Switch

Un interrupteur entre deux états.

BetaWhoa UI est en bêta : certains éléments peuvent encore changer. Un bug ? Écrivez-moi à hello@ugolin-olle.com.

Airplane mode

switch.tsx

'use client';import { Label } from '@/components/ui/label';import { Switch } from '@/components/ui/switch';export default function Demo() {  return (    <div className="flex items-center gap-2">      <Switch id="airplane" />      <Label htmlFor="airplane">Airplane mode</Label>    </div>  );}

Animation

La pastille glisse en 180 ms et la piste change de couleur en 120 ms.

Les jetons et les règles communes sont décrits sur la page Motion.

Installation

Le composant fait partie des primitives shadcn/ui sur Base UI.

bunx --bun shadcn@latest add switch

Ou depuis le paquet npm :

import { Switch } from '@whoa-studio/ui/switch';

Exports : Switch.