Switch

Componente de interruptor con API conveniente y compuesta

Componente switch construido con Ark UI que admite API conveniente y API compuesta completa.

Activar notificaciones

import { Switch } from "@/components/ui/switch";

export default function Example() {
  return <Switch label="Activar notificaciones" />;
}

View Code

Instalación

bash

liminal add switch

Uso

Activar notificaciones

import { Switch } from "@/components/ui/switch";

export default function Example() {
  return <Switch label="Activar notificaciones" />;
}

View Code

Ejemplos

API compuesta

Modo oscuro

import {
  SwitchRoot,
  SwitchControl,
  SwitchThumb,
  SwitchLabel,
  SwitchHiddenInput,
} from "@/components/ui/switch";

export default function Example() {
  return (
    <SwitchRoot className="inline-flex items-center gap-2">
      <SwitchHiddenInput />
      <SwitchControl>
        <SwitchThumb />
      </SwitchControl>
      <SwitchLabel>Modo oscuro</SwitchLabel>
    </SwitchRoot>
  );
}

View Code

API

Prop	Type	Default	Description
label	React.ReactNode	-	Texto del label que se muestra junto al switch.
checked	boolean	-	Estado checked controlado.
defaultChecked	boolean	-	Estado checked inicial cuando no está controlado.
onCheckedChange	(details: { checked: boolean }) => void	-	Callback cuando cambia el estado checked.