Select

Select component is a component that allows users pick a value from predefined options. Ideally, it should be used when there are more than 5 options, otherwise you might consider using a radio group instead.

Import

import { Select } from '@sajari-ui/core';

import { Select } from '@sajari-ui/core';

Usage

Here's a basic usage of the Select component.

Editable Example

<Select placeholder="Select an option">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</Select>

<Select placeholder="Select an option">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</Select>

Invalid

Editable Example

<Select placeholder="Select an option" invalid>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</Select>

<Select placeholder="Select an option" invalid>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</Select>

Disabled

Editable Example

<Select placeholder="Select an option" disabled>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</Select>

<Select placeholder="Select an option" disabled>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</Select>

Overriding the styles

Even though the Select comes with predefined styles, you can override pretty much any property. Here we'll override the background color.

Editable Example

<Select backgroundColor="bg-orange-100" borderColor="border-orange-200" placeholder="Woohoo! A new background color!" />

<Select backgroundColor="bg-orange-100" borderColor="border-orange-200" placeholder="Woohoo! A new background color!" />

Props

The Select component composes PseudoBox so you can pass all PseudoBox props, and React.SelectHTMLAttributes.

Name	Type	Default	Description
`size`	`sm`, `md`, `lg`	`md`	The visual size of the `select` element.
`icon`	`React.ElementType`, `string`	`chevron-down`	The icon to use in place if the `chevron-down`
`iconSize`	`BoxProps['size']`	`20px`	The visual size of the icon
`iconColor`	`BoxProps['color']`		The color of the icon
`variant`	`outline`, `unstyled`, `flushed`, `filled`	`outline`	The variant of the select style to use.
`focusBorderColor`	`string`		The border color when the select is focused.
`errorBorderColor`	`string`		The border color when `isInvalid` is set to `true`.
`isDisabled`	`boolean`	`false`	If `true`, the select will be disabled. This sets `aria-disabled=true` and you can style this state by passing `_disabled` prop.
`isInvalid`	`boolean`	`false`	If `true`, the `select` will indicate an error. This sets `aria-invalid=true` and you can style this state by passing `_invalid` prop.
`isRequired`	`boolean`	`false`	If `true`, the select element will be required.
`isReadOnly`	`boolean`	`false`	If `true`, prevents the value of the select from being edited.
`rootProps`	`BoxProps`		The props to pass to the wrapper of the select. The select is wrapped in a `Box` to help align the icon, if you want to pass some props to that wrapper, use this prop