Select allows you to build a wide range of multi and single selects.
Usage
Import
import { Select } from '@passfort/castle'
Example
<Select onChange={log}>
<Select.Button placeholder="Single select" />
<Select.Options>
<Select.Option>Option 1</Select.Option>
<Select.Option>Option 2</Select.Option>
<Select.Option>Option 3</Select.Option>
</Select.Options>
</Select>
live example
Single Select
Set up a single-select dropdown, including support for disabled options.
<Select onChange={log}>
<Select.Button placeholder="Single select" />
<Select.Options>
<Select.Option value="option 1">Option 1</Select.Option>
<Select.Option value="option 2">Option 2</Select.Option>
<Select.Option value="option 3" isDisabled>
Option 3
</Select.Option>
</Select.Options>
</Select>
live example
Single Select Search
Set up a single-select dropdown, including support for disabled options.
<Select onChange={log}>
<Select.Button placeholder="Single select" />
<Select.Options minH="100px" maxHeight="300px">
<Select.Search placeholder="Search" />
<Select.EmptyState title="No results found" />
<Select.Option value="option 1">Option 1</Select.Option>
<Select.Option value="option 2">Option 2</Select.Option>
<Select.Option value="option 3">Option 3</Select.Option>
<Select.Option value="option 4" isDisabled>
Option 4
</Select.Option>
<Select.Footer>Footer</Select.Footer>
</Select.Options>
</Select>
live example
Multiple Select
Configure a multi-select dropdown with pre-selected values.
<Select multiple onChange={log} value={['option 1']}>
<Select.Button placeholder="Select options" />
<Select.Options>
<Select.Option value="option 1">Option 1</Select.Option>
<Select.Option value="option 2">Option 2</Select.Option>
<Select.Option value="option 3">Option 3</Select.Option>
<Select.Option value="option 4">Option 4</Select.Option>
</Select.Options>
</Select>
live example
Groups
Group options with Select.Group. optionally include a divider using withDivider prop
<Select multiple onChange={log}>
<Select.Button placeholder="Select options" />
<Select.Options>
<Select.Group>Group A</Select.Group>
<Select.Option value="option 1">Option 1</Select.Option>
<Select.Option value="option 2">Option 2</Select.Option>
<Select.Group withDivider>Group B</Select.Group>
<Select.Option value="option 3">Option 3</Select.Option>
<Select.Option value="option 4">Option 4</Select.Option>
</Select.Options>
</Select>
live example
Single Search
Add a search bar to a single-select dropdown to enable filtering.
<Select onChange={log}>
<Select.Search placeholder="Search..." />
<Select.Options>
<Select.Option value="option 1">Option 1</Select.Option>
<Select.Option value="option 2">Option 2</Select.Option>
<Select.Option value="option 3">Option 3</Select.Option>
<Select.Option value="option 4">Option 4</Select.Option>
</Select.Options>
</Select>
live example
Multiple Search
Combine multi-select functionality with a search bar for filtering options.
<Select multiple onChange={log} multiple>
<Select.Button placeholder="Select" />
<Select.Options>
<Select.Search placeholder="Search" />
<Select.Option value="option 1">Option 1</Select.Option>
<Select.Option value="option 2">Option 2</Select.Option>
<Select.Option value="option 3">Option 3</Select.Option>
<Select.Option value="option 4">Option 4</Select.Option>
</Select.Options>
</Select>
live example
Multiple compact
Enable a compact mode for multi-select with search and pre-selected values.
<Select multiple value={['option 1']} onChange={log}>
<Select.Button mode="compact" placeholder="Select" />
<Select.Options>
<Select.Search placeholder="Search" />
<Select.Option value="option 1">Option 1</Select.Option>
<Select.Option value="option 2">Option 2</Select.Option>
<Select.Option value="option 3">Option 3</Select.Option>
<Select.Option value="option 4">Option 4</Select.Option>
</Select.Options>
</Select>
live example
Compact Select
Create a compact single-select dropdown.
<Select onChange={log}>
<Select.Button
showPlaceholder
withClear={false}
placeholder="Single select"
/>
<Select.Options withClear>
<Select.Option value="option 1">Option 1</Select.Option>
<Select.Option value="option 2">Option 2</Select.Option>
<Select.Option value="option 3" isDisabled>
Option 3
</Select.Option>
</Select.Options>
</Select>
live example
Search Labels
Select.Label renders the display text for options and registers that text as searchable content for Select.Search
function Example() {
const items = [
{ id: 'usr_123', name: 'John Smith' },
{ id: 'usr_456', name: 'Jane Doe' },
{ id: 'usr_789', name: 'Bob Johnson' },
]
const [selectedId, setSelectedId] = useState()
const handleChange = (id) => {
setSelectedId(id)
log('Selected user ID:', id)
}
return (
<Select value={selectedId} onChange={handleChange}>
<Select.Button placeholder="Choose a user" />
<Select.Options>
<Select.Search placeholder="Search users..." />
{items.map((item) => (
<Select.Option key={item.id} value={item.id}>
<Select.Label>{item.name}</Select.Label>
</Select.Option>
))}
</Select.Options>
</Select>
)
}
live example
Custom Select
This is an example of a custom select component that displays a custom value to the button text when a value is selected.
function Example() {
const data = [
{ label: 'Low', value: 'low', count: 123 },
{ label: 'Medium', value: 'medium', count: 234 },
{ label: 'High', value: 'high', count: 345 },
{ label: 'Undetermined', value: 'undetermined', count: 456 },
]
const [selectedValue, setSelectedValue] = useState()
const handleChange = (value) => {
setSelectedValue(data.find((item) => item.value === value))
}
return (
<Select onChange={handleChange} containerStyle={{ width: '200px' }}>
<Select.Button placeholder="Choose an option">
{selectedValue && (
<Row gap={1} spacing={0}>
<Text>{selectedValue.label}</Text>
<Text pr={2}>{`(${selectedValue.count})`}</Text>
</Row>
)}
</Select.Button>
<Select.Options>
{data.map(({ label, value }) => (
<Select.Option key={value} value={value}>
{label}
</Select.Option>
))}
</Select.Options>
</Select>
)
}
live example
