Files
fn_registry/frontend/functions/ui/switch_toggle.md
egutierrez 2d108c295a refactor: migrate frontend from shadcn/Tailwind to Mantine v9
Reescribe todos los componentes UI para usar Mantine v9 en lugar de shadcn/Tailwind.
Elimina cn(), CVA, components.json, theme_provider custom y globals.css con Tailwind.
Añade 25+ componentes nuevos (AppShell, AuthForm, DatePickerInput, Dropzone, etc.)
y MantineProvider como wrapper estándar del sistema de temas.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 23:46:44 +02:00

1.9 KiB

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.