Select

A common form component for choosing a predefined value in a dropdown menu.

Font Family

API reference

Prop	Type	Default	Responsive
label	string	Select an option	No
description	string	-	No
name	string	-	No
options	Array<{ value: string, label: string }>	-	No
value	string	-	No
defaultValue	string	-	No
placeholder	string	-	No
size	smallmedium	medium	Yes
onValueChange	(value: string) => void	-	No
onOpenChange	(open: boolean) => void	-	No
className	string	-	No
style	CSSProperties	-	No

Examples

With Label and description

Select component with label and description.

Font Family

Choose a font family for your document

<Select
  name="font"
  label="Font Family"
  description="Choose a font family for your document"
  options={[ ... ]}
/>

Sizes

Here's a view when the selects have different sizes.

Font Family

<Flex>
  <Select
    size="small"
    label="Font family"
    options={[ ... ]}
  />
  <Select
    size="medium"
    label="Font family"
    options={[ ... ]}
  />
</Flex>

Disabled

Here's a view when the select is disabled.

Font Family

<Select
  disabled
  label="Font family"
  options={[ ... ]}
/>

Responsive

Here's a view when the select is responsive.

<Select
  size={{ initial: 'small', lg: 'medium' }}
  label="Font family"
  options={[ ... ]}
/>