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>