Select

Select fields are used to create a drop-down list of options for the user to choose from.

The Select field is used to create a drop-down list of options for the user to choose from. This component is built on top of the Radix UI library and styled using Tailwind CSS.

This component comes from the Shadcn UI Library - with minimal changes to the original component. I recommended to check out the original documentation for more information.

tsximport {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@components/ui/Select';
 
<Select>
  <SelectTrigger>
    <SelectValue placeholder={'Pick a fruit...'} />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value={'Apple'}>Apple</SelectItem>
      <SelectItem value={'Banana'}>Banana</SelectItem>
      <SelectItem value={'Peach'}>Peach</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

PreviousTextarea

NextRadio Group