Select

Select

Default

import { Select } from '@eekodigital/raster';

<Select
name="standard"
placeholder="Choose a standard…"
options={[
  { value: 'wcag-2.2', label: 'WCAG 2.2' },
  { value: 'wcag-3.0', label: 'WCAG 3.0 (beta)' },
]}
/>

Error state

<Select name="standard" hasError placeholder="Choose a standard…" options={[...]} />

Disabled

<Select name="standard" defaultValue="wcag-2.2" disabled options={[...]} />

SelectField

Default

import { SelectField } from '@eekodigital/raster';

<SelectField
label="Standard"
name="standard"
placeholder="Choose a standard…"
options={[
  { value: 'wcag-2.2', label: 'WCAG 2.2' },
  { value: 'wcag-3.0', label: 'WCAG 3.0 (beta)' },
]}
/>

With hint

<SelectField label="Standard" name="standard" hint="The standard all results will be evaluated against." options={[...]} />

With error

<SelectField label="Standard" name="standard" error="Please select a standard." options={[...]} />

Props

Select

Prop	Type	Description
options	SelectOption[]	Array of { value, label, icon?, disabled? } objects.
placeholder	string	Text shown when no value is selected.
value	string	Controlled selected value.
defaultValue	string	Initial value for uncontrolled usage.
onValueChange	(value: string) => void	Called when the selected value changes.
hasError	boolean	Applies error styling to the trigger.
disabled	boolean	Disables the control.
name	string	Form field name.
id	string	ID for label association.

SelectField

Prop	Type	Description
label	string	Visible label text.
options	SelectOption[]	Array of { value, label, icon?, disabled? } objects.
placeholder	string	Placeholder shown when no value is selected.
hint	string	Optional hint text below the label.
error	string	Validation error message.
value	string	Controlled selected value.
defaultValue	string	Initial value for uncontrolled usage.
onValueChange	(value: string) => void	Called when the selected value changes.