SelectV2 allows you to build a wide range of multi and single selects.
Usage
Import
import { SelectV2 } from '@passfort/castle'
Example
<SelectV2 onChange={log}>
<SelectV2.Button placeholder="Single select" />
<SelectV2.Options>
<SelectV2.Option>Option 1</SelectV2.Option>
<SelectV2.Option>Option 2</SelectV2.Option>
<SelectV2.Option>Option 3</SelectV2.Option>
</SelectV2.Options>
</SelectV2>
live example
Single Select
Set up a single-select dropdown, including support for disabled options.
<SelectV2 onChange={log}>
<SelectV2.Button placeholder="Single select" />
<SelectV2.Options>
<SelectV2.Option value="option 1">Option 1</SelectV2.Option>
<SelectV2.Option value="option 2">Option 2</SelectV2.Option>
<SelectV2.Option value="option 3" isDisabled>
Option 3
</SelectV2.Option>
</SelectV2.Options>
</SelectV2>
live example
Multiple Select
Configure a multi-select dropdown with pre-selected values.
<SelectV2 multiple onChange={log} value={['option 1']}>
<SelectV2.Button>Select options</SelectV2.Button>
<SelectV2.Options>
<SelectV2.Option value="option 1">Option 1</SelectV2.Option>
<SelectV2.Option value="option 2">Option 2</SelectV2.Option>
<SelectV2.Option value="option 3">Option 3</SelectV2.Option>
<SelectV2.Option value="option 4">Option 4</SelectV2.Option>
</SelectV2.Options>
</SelectV2>
live example
Single Search
Add a search bar to a single-select dropdown to enable filtering.
<SelectV2 onChange={log}>
<SelectV2.Search placeholder="Search..." />
<SelectV2.Options>
<SelectV2.Option value="option 1">Option 1</SelectV2.Option>
<SelectV2.Option value="option 2">Option 2</SelectV2.Option>
<SelectV2.Option value="option 3">Option 3</SelectV2.Option>
<SelectV2.Option value="option 4">Option 4</SelectV2.Option>
</SelectV2.Options>
</SelectV2>
live example
Multiple Search
Combine multi-select functionality with a search bar for filtering options.
<SelectV2 multiple onChange={log} multiple>
<SelectV2.Button placeholder="Select" />
<SelectV2.Options>
<SelectV2.Search placeholder="Search" />
<SelectV2.Option value="option 1">Option 1</SelectV2.Option>
<SelectV2.Option value="option 2">Option 2</SelectV2.Option>
<SelectV2.Option value="option 3">Option 3</SelectV2.Option>
<SelectV2.Option value="option 4">Option 4</SelectV2.Option>
</SelectV2.Options>
</SelectV2>
live example
Multiple compact
Enable a compact mode for multi-select with search and pre-selected values.
<SelectV2 multiple value={['option 1']} onChange={log}>
<SelectV2.Button mode="compact" placeholder="Select" />
<SelectV2.Options>
<SelectV2.Search placeholder="Search" />
<SelectV2.Option value="option 1">Option 1</SelectV2.Option>
<SelectV2.Option value="option 2">Option 2</SelectV2.Option>
<SelectV2.Option value="option 3">Option 3</SelectV2.Option>
<SelectV2.Option value="option 4">Option 4</SelectV2.Option>
</SelectV2.Options>
</SelectV2>
live example
Compact Select
Create a compact single-select dropdown.
<SelectV2 onChange={log}>
<SelectV2.Button
showPlaceholder
withClear={false}
placeholder="Single select"
/>
<SelectV2.Options withClear>
<SelectV2.Option value="option 1">Option 1</SelectV2.Option>
<SelectV2.Option value="option 2">Option 2</SelectV2.Option>
<SelectV2.Option value="option 3" isDisabled>
Option 3
</SelectV2.Option>
</SelectV2.Options>
</SelectV2>
live example
