Select
Select component is a component that allows users pick a value from predefined options.
Import
import { Select } from "@recastui/react";
Usage
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>
Size
The Select component comes in four sizes. The default is base.
Editable Example
<div className='space-y-2'><Select placeholder='extra small size' size='xs' /><Select placeholder='small size' size='sm' /><Select placeholder='medium size' size='base' /><Select placeholder='large size' size='lg' /></div>
Variant
The Select component comes in 4 variants: outline, solid, underline, and rounded. Pass the variant prop and set it to one of these values. The default variant is outline.
Editable Example
<div className='space-y-2'><Select variant='outline' placeholder='Outline' /><Select variant='solid' placeholder='Solid' /><Select variant='underline' placeholder='Underline' /><Select variant='rounded' placeholder='Rounded' /></div>
Full width
The Select component comes full width by default its true.
Editable Example
<div className='space-y-2'><Select placeholder='Full width' fullWidth /><Select placeholder='Width auto' fullWidth={false} /></div>
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>
Error
Editable Example
<Select placeholder='Select an option' error><option value='option1'>Option 1</option><option value='option2'>Option 2</option><option value='option3'>Option 3</option></Select>