Select

The Select component displays a selected value and controls a Dropdown when clicked

Overview

The InputField component includes including an input, icon, end adornment, and helper text.

Option one

Example: Select

  import { Icon, Select } from '@skiff-org/skiff-ui';
  const [value, setValue] = useState('');
  <Select
    value={value}
    forceTheme={theme}
    onChange={(value) => {
      setValue(value);
    }}
    {...props}
  >
    <DropdownItem
      icon={Icon.Dumbbell}
      label='Option one'
      value='option-1'
    />
    <DropdownItem
      icon={Icon.Martini}
      label='Option two'
      value='option-2'
    />
    <DropdownItem
      icon={Icon.Sound}
      label='Option three'
      value='option-3'
    />
  </Select>

Filled type a visible container to the select field.

The filled variant adds

Option one

Example: Filled select

  import { Icon, Select } from '@skiff-org/skiff-ui';
  const [value, setValue] = useState('');
  <Select
    filled
    value={value}
    forceTheme={theme}
    onChange={(value) => {
      setValue(value);
    }}
    {...props}
  >
    <DropdownItem
      icon={Icon.Dumbbell}
      label='Option one'
      value='option-1'
    />
    <DropdownItem
      icon={Icon.Martini}
      label='Option two'
      value='option-2'
    />
    <DropdownItem
      icon={Icon.Sound}
      label='Option three'
      value='option-3'
    />
  </Select>

Properties

Name
children
Type
Array<DropdownItemComponent>
Description
Children that are passed into the Dropdown of the Select as items.
Name
onChange
Type
(value: string) => void
Description
Function called on the onChange event.
Name
disabled
Type
boolean
Description
Controls the disabled state of the Select component.
Name
filled
Type
boolean
Description
Type of Input. Either DEFAULT, EMAIL, NUMBER, or PASSWORD`.
Name
forceTheme
Type
ThemeMode
Description
Force the theme (dark or light mode) of the Select, regardless of app theme.
Name
ghostColor
Type
Color
Description
Ghost variant text and icon color.
Name
maxHeight
Type
number
Description
Max dropdown height.
Name
placeholder
Type
string
Description
Select placeholder text.
Name
size
Type
SelectSize
Description
Size of the Select component.
Name
value
Type
string
Description
Controlled Select value.
Name
value
Type
string
Description
Controlled Select value.
Name
width
Type
number
Description
Custom Select width.
Name
fullWidth
Type
boolean
Description
Whether the select should take up the full width of its container.
Name
zIndex
Type
number
Description
Custom z-index.

Types

  type SelectSize = Size.SMALL | Size.MEDIUM | Size.LARGE;