Radio Group

Un choix unique parmi plusieurs options.

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

default

comfortable

compact

radio-group.tsx

'use client';import { Label } from '@/components/ui/label';import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';export default function Demo() {  return (    <RadioGroup defaultValue="comfortable">      {['default', 'comfortable', 'compact'].map((value) => (        <div className="flex items-center gap-2" key={value}>          <RadioGroupItem id={value} value={value} />          <Label className="capitalize" htmlFor={value}>            {value}          </Label>        </div>      ))}    </RadioGroup>  );}

Animation

Le point apparaît avec un fondu et un zoom de 120 ms ; la bordure suit.

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 radio-group

Ou depuis le paquet npm :

import { RadioGroup } from '@whoa-studio/ui/radio-group';

Exports : RadioGroup, RadioGroupItem.