Select - rafty/ui Docs

Select component is a component that allows users to pick a value from predefined options.

This is a custom component made upon native select and its props according to our styling conventions. All native select props can be used here.

Anatomy

Import all parts and piece them together.

import { Select, SelectItem } from "@rafty/ui";

<Select>
  <SelectItem />
</Select>;

Usage

<Select>
  <SelectItem>
    Option 1
  </SelectItem>
  <SelectItem>
    Option 2
  </SelectItem>
  <SelectItem>
    Option 3
  </SelectItem>
</Select>

Size

There are 3 size options in input field: sm, md (default) & lg.

<Select size="sm">
  <SelectItem>
    Option 1
  </SelectItem>
  <SelectItem>
    Option 2
  </SelectItem>
  <SelectItem>
    Option 3
  </SelectItem>
</Select>

Variant

There are 3 variant options in input field: solid, outline (default) & ghost.

<Select variant="solid">
  <SelectItem>
    Option 1
  </SelectItem>
  <SelectItem>
    Option 2
  </SelectItem>
  <SelectItem>
    Option 3
  </SelectItem>
</Select>

IsDisabled

IsDisabled prop is used to show select component in disabled state

<Select isDisabled>
  <SelectItem>
    Option 1
  </SelectItem>
  <SelectItem>
    Option 2
  </SelectItem>
  <SelectItem>
    Option 3
  </SelectItem>
</Select>

IsRequired

IsRequired prop is used to show select in required state.

<Select isRequired>
  <SelectItem>
    Option 1
  </SelectItem>
  <SelectItem>
    Option 2
  </SelectItem>
  <SelectItem>
    Option 3
  </SelectItem>
</Select>

IsReadOnly

IsReadOnly prop is used to show select in read only state.

<Select isReadOnly>
  <SelectItem>
    Option 1
  </SelectItem>
  <SelectItem>
    Option 2
  </SelectItem>
  <SelectItem>
    Option 3
  </SelectItem>
</Select>

API

Root

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	`false`