Biofarma | Bind UI

Select

The Select feature enables users to choose an option from a list within a form field. By default, the first option in the list is displayed. However, you can also configure a different option to be pre-selected from the list.

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

Label

Select an option

Helper text

Usage

import { Select } from 'bio-bind-ui';

<Select
  errorText='Error text'
  helperText='Helper text'
  id='select'
  label='Label'
  mode='light'
  name='select'
  options={[
    {
      label: 'Option 1',
      value: 'option-1',
    },
    {
      label: 'Option 2',
      value: 'option-2',
    },
    {
      label: 'Option 3',
      value: 'option-3',
    },
  ]}
  placeholder='Select an option'
  radius='md'
  required
  showInfo
  size='sm'
  style={{
    control: () => {},
  }}
  variant='outline'
/>

Examples

Variant

Use the variants outline, background, or underline to change style of the select.

Label

Select an option

Helper text

Label

Select an option

Helper text

Label

Select an option

Helper text

Multiple (optional)

Use multiple to turn single into multiple select.

Label

Select an option

Helper text

Size

Use the size sm, md, or lg to change the size of the select.

Label

Select an option

Helper text

Label

Select an option

Helper text

Label

Select an option

Helper text

Radius

Use the radius none, xs, sm, md, lg, xl, or full to change the radius of the select.

Label

Select an option

Helper text

Label

Select an option

Helper text

Label

Select an option

Helper text

Label

Select an option

Helper text

Label

Select an option

Helper text

Label

Select an option

Helper text

Label

Select an option

Helper text

<Select
  errorText='Error text'
  helperText='Helper text'
  id='select'
  label='Label'
  mode='light'
  name='select'
  options={[
    {
      label: 'Option 1',
      value: 'option-1',
    },
    {
      label: 'Option 2',
      value: 'option-2',
    },
    {
      label: 'Option 3',
      value: 'option-3',
    },
  ]}
  placeholder='Select an option'
  radius='none'
  required
  showInfo
  size='sm'
  style={{
    control: () => {},
  }}
  variant='outline'
/>
<Select
  errorText='Error text'
  helperText='Helper text'
  id='select'
  label='Label'
  mode='light'
  name='select'
  options={[
    {
      label: 'Option 1',
      value: 'option-1',
    },
    {
      label: 'Option 2',
      value: 'option-2',
    },
    {
      label: 'Option 3',
      value: 'option-3',
    },
  ]}
  placeholder='Select an option'
  radius='xs'
  required
  showInfo
  size='sm'
  style={{
    control: () => {},
  }}
  variant='outline'
/>
<Select
  errorText='Error text'
  helperText='Helper text'
  id='select'
  label='Label'
  mode='light'
  name='select'
  options={[
    {
      label: 'Option 1',
      value: 'option-1',
    },
    {
      label: 'Option 2',
      value: 'option-2',
    },
    {
      label: 'Option 3',
      value: 'option-3',
    },
  ]}
  placeholder='Select an option'
  radius='sm'
  required
  showInfo
  size='sm'
  style={{
    control: () => {},
  }}
  variant='outline'
/>
<Select
  errorText='Error text'
  helperText='Helper text'
  id='select'
  label='Label'
  mode='light'
  name='select'
  options={[
    {
      label: 'Option 1',
      value: 'option-1',
    },
    {
      label: 'Option 2',
      value: 'option-2',
    },
    {
      label: 'Option 3',
      value: 'option-3',
    },
  ]}
  placeholder='Select an option'
  radius='md'
  required
  showInfo
  size='sm'
  style={{
    control: () => {},
  }}
  variant='outline'
/>
<Select
  errorText='Error text'
  helperText='Helper text'
  id='select'
  label='Label'
  mode='light'
  name='select'
  options={[
    {
      label: 'Option 1',
      value: 'option-1',
    },
    {
      label: 'Option 2',
      value: 'option-2',
    },
    {
      label: 'Option 3',
      value: 'option-3',
    },
  ]}
  placeholder='Select an option'
  radius='lg'
  required
  showInfo
  size='sm'
  style={{
    control: () => {},
  }}
  variant='outline'
/>
<Select
  errorText='Error text'
  helperText='Helper text'
  id='select'
  label='Label'
  mode='light'
  name='select'
  options={[
    {
      label: 'Option 1',
      value: 'option-1',
    },
    {
      label: 'Option 2',
      value: 'option-2',
    },
    {
      label: 'Option 3',
      value: 'option-3',
    },
  ]}
  placeholder='Select an option'
  radius='xl'
  required
  showInfo
  size='sm'
  style={{
    control: () => {},
  }}
  variant='outline'
/>
<Select
  errorText='Error text'
  helperText='Helper text'
  id='select'
  label='Label'
  mode='light'
  name='select'
  options={[
    {
      label: 'Option 1',
      value: 'option-1',
    },
    {
      label: 'Option 2',
      value: 'option-2',
    },
    {
      label: 'Option 3',
      value: 'option-3',
    },
  ]}
  placeholder='Select an option'
  radius='full'
  required
  showInfo
  size='sm'
  style={{
    control: () => {},
  }}
  variant='outline'
/>

Props

Props	Required	Default	Type	description
id	true	-	`string`	A unique identifier for the select.
name	true	-	`string`	Name prop is commonly used in form elements, such as select.
isMultiple	false	`false`	`boolean`	If true, select will be set to multiple select.
options	false	-	`OptionProps[]`	List of value options for multiple select.
placeholder	true	-	`string`	Placholder information to provide input select area information.
showInfo	false	`true`	`boolean`	If false, the filed select will be set not showing info.
isAsync	false	`false`	`boolean`	If true, the filed select will be set showing async.
loadOptions	false	-	`(inputValue: string) => Promise<OptionProps[]>`	Unique identifier for the load option select.
variant	true	`outline`	`outline`, `background`, `underline`	The visual style variant of the select.
size	true	`md`	`sm`, `md`, `lg`	The size of the select
onChange	true	-	`(value: OptionProps or OptionProps[]) => void`	Callback function to run when the select is clicked.
value	false	-	`OptionProps or OptionProps[]`	The information value of the select.
defaultValue	false	-	`OptionProps or OptionProps[]`	The information default value of the select.
helperText	false	-	`string`	Helper text information to provide select information.
isError	false	`false`	`boolean`	If true, select will be set to error state.
errorText	false	-	`string`	Error text information to provide select information if it is an error.
radius	true	`md`	`none`, `xs`, `sm`, `md`, `lg`, `xl`, `full`	Corner radius of the field select
label	false	-	`string`	The label text for the select.
disabled	false	`false`	`boolean`	If true, select will be set to disabled state.
required	true	`false`	`boolean`	If true, required state will be set for the select.
style	false	-	`StylesConfig<OptionProps, boolean, GroupBase<OptionProps>>`	Custom styles for the select component.
mode	false	`light`	`light` `dark`	The theme mode of the select (`light` or `dark`).

Radio Button Slider