fn-design-system/components/switch_toggle.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	output	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant
switch_toggle	component	ts	ui	1.0.0	impure	SwitchToggle(props: SwitchToggleProps): JSX.Element	Toggle on/off accesible con label opcional a izquierda o derecha. Mantine Switch.	switch toggle component ui interactive form mantine				false		@mantine/core	Componente SwitchToggle que renderiza switch on/off accesible con label opcional	false			frontend/functions/ui/switch_toggle.tsx	name type required description label string false Texto de etiqueta visible junto al switch name type required description labelPosition 'left' | 'right' false Posicion del label respecto al switch (default: right) name type required description checked boolean false Estado controlado del toggle name type required description defaultChecked boolean false Estado inicial no controlado name type required description disabled boolean false Deshabilita el toggle name type required description onCheckedChange (checked: boolean) => void false Callback cuando cambia el estado	onCheckedChange	false	react

Ejemplo

// Label a la derecha (default)
<SwitchToggle label="Notificaciones" defaultChecked />

// Label a la izquierda
<SwitchToggle label="Modo oscuro" labelPosition="left" checked={dark} onCheckedChange={setDark} />

// Solo switch sin label
<SwitchToggle checked={enabled} onCheckedChange={setEnabled} />

Notas

Usa Mantine Switch. Soporta labelPosition nativo de Mantine para posicionar el label a izquierda o derecha. El callback onCheckedChange se adapta desde el onChange nativo.