Select

Une liste déroulante pour choisir une valeur.

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

select.tsx

'use client';import {  Select,  SelectContent,  SelectItem,  SelectTrigger,  SelectValue,} from '@/components/ui/select';const FRUITS = ['Apple', 'Banana', 'Blueberry', 'Grapes'];export default function Demo() {  return (    <Select defaultValue="Apple">      <SelectTrigger className="w-48">        <SelectValue />      </SelectTrigger>      <SelectContent>        {FRUITS.map((fruit) => (          <SelectItem key={fruit} value={fruit}>            {fruit}          </SelectItem>        ))}      </SelectContent>    </Select>  );}

Animation

La liste grandit depuis le déclencheur en 180 ms ; quand elle s'aligne sur la valeur courante, elle apparaît sans transition.

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 select

Ou depuis le paquet npm :

import { Select } from '@whoa-studio/ui/select';

Exports : Select, SelectTrigger, SelectValue, SelectContent, SelectItem.