Reddot UI Library

Docs
Select

Select

Displays a list of options for the user to pick from—triggered by a button.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/select.json

Utilisation

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
 
export function SelectDemo() {
  return (
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
        <SelectItem value="blueberry">Blueberry</SelectItem>
        <SelectItem value="grapes">Grapes</SelectItem>
        <SelectItem value="pineapple">Pineapple</SelectItem>
      </SelectContent>
    </Select>
  )
}

Scrollable

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
 
export function SelectScrollable() {
  return (
    <Select>
      <SelectTrigger className="w-[280px]">
        <SelectValue placeholder="Select a timezone" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
        <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
        <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
        <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
        <SelectItem value="akst">Alaska Standard Time (AKST)</SelectItem>
        <SelectItem value="hst">Hawaii Standard Time (HST)</SelectItem>
      </SelectContent>
    </Select>
  )
}

API Reference

Select

PropTypeDefaultDescription
defaultValuestring-The value of the select when initially rendered. Use when you do not need to control the state
valuestring-The controlled value of the select. Should be used in conjunction with onValueChange
onValueChange(value: string) => void-Event handler called when the value changes
disabledbooleanfalseWhen true, prevents the user from interacting with select
namestring-The name of the select. Submitted with its owning form as part of a name/value pair

SelectTrigger

Le bouton qui ouvre la liste déroulante.

SelectValue

Affiche la valeur sélectionnée ou le placeholder.

SelectContent

Le conteneur pour les éléments sélectionnables.

SelectItem

Un élément sélectionnable dans la liste.

PropTypeDefaultDescription
valuestring-The value given as data when submitted with a name
disabledbooleanfalseWhen true, prevents the user from interacting with the item

Dépendances

Ce composant nécessite les dépendances suivantes :

  • @radix-ui/react-select

Notes

  • Ce composant UI fait partie du système de design
  • Respecte les conventions de style et d'accessibilité WAI-ARIA
  • Supporte les interactions clavier
  • Compatible avec les formulaires et librairies comme React Hook Form
  • Supporte le contenu scrollable pour de longues listes