Select

Pick one value from a fixed list. field is the input-shaped control inside a form; filter is the compact button in a filter row. allLabel adds a first option such as All clients that reports an empty string.

import { Select } from "@puckoops/camelot";
NameDescriptionDefaultControl
options*
SelectOption[]		-
value
string		-
defaultValue
string		-
onValueChange
(value: string) => void		--
placeholder
string		"Select"
allLabel
Adds a "no filter" first option
string		-
variant
Form control or filter button
"field""filter"		"field"
variant
disabled
boolean		-
id
string		-
name
string		-
className
string		-
aria-label
string		-
aria-describedby
string		-
aria-invalid
boolean		-

When to use

Use variant="field" inside forms and variant="filter" in filter rows. allLabel adds a first option such as "All clients" that reports an empty string.

  • Use SegmentedControl instead for two to five options that should all stay visible.
  • Use ChoiceGroup instead for options shown as chips, such as Type or Priority in a form.

Examples

Filter

A compact button in a filter row; All clients stands for no filter.

In A Field

Inside Field the label, hint and invalid state reach the trigger.

Invoices go to the client's billing contact.

Invalid

An error from Field marks the trigger invalid.

Disabled Option

An option that cannot be picked stays visible for context.

Disabled

Read-only in this context, value still readable.

All Variants

Field empty, chosen and disabled; filter with and without a value.