Select

Used for selecting a single option from a list. It's built around the Radix UI Select (opens in a new tab) for better accessibility.

Current Status

Built around Radix UI Select primitive
Basic styling using Tailwind CSS
Works as a controlled component when used within the Field component

Future

Add animations
Add visual polish
Improve responsive design for all common device sizes
Add darkmode support
Standardize color design token

Examples

TBD

How to use

Install Radix Select primitive

npm install @radix-ui/react-select

Create component

Copy the code from the sandbox above and paste it into a new file (e.g. Select.tsx)

Make it controlled

Wrap with Field component to add control via React Hook Form:

yourform.tsx

  <Field
    name="selectExample"
    defaultValue="first"
    validateOnBlur={false}
  >
    <Field.GroupLabel>Flat list Select:</Field.GroupLabel>
    <Field.Control>
      <Select
        placeholder="Select an option"
        itemOptions={[
          {
            value: "mj",
            labelText: "Michael Jordan",
            separator: false,
          },
          {
            value: "shaq",
            labelText: "Shaquille O'Neal",
            separator: true,
          },
          {
            value: "kobe",
            labelText: "Kobe Bryant",
            separator: false,
          },
          {
            value: "iverson",
            labelText: "Allen Iverson",
            separator: false,
          },
        ]}
      />
    </Field.Control>
  </Field>

Setup `defaultValues` and `zodSchema` in `Form`

Details in Form component

Component API

Required Prop	Type	Description
itemOptions	Array<FlatListItems \| GroupListItems>	Will render Select with either flat or grouped list of items.
placeholder	string	The value displayed if there is no default value.

Optional Prop	Type	Description
FlatListItems (itemOptions schema)	{ value: string, labelText: string, separator: Boolean }	This itemsOptions schema renders Select with a flat list of items.
GroupedListItems (itemOptions schema)	{ groupLabel: string \| null, items: Array<FlatListItems> }	This itemsOptions schema renders Select with a grouped list of items.

Radio Group Text Area