Select Field
Related components
SelectField wraps a Select with a Label and a InlineMessage to provide consistent behaviour and layout.
<Form>
<SelectField name="options" label="Options" className="w-80">
<option value="apples">Apples</option>
<option value="bananas">Bananas</option>
</SelectField>
</Form>
API Reference
| Prop | Type | Default | Required |
|---|---|---|---|
appearance | "standard" | "modern" | Partial<Record<Breakpoint, "standard" | "modern">> & "standard" | Partial<Record<Breakpoint, "standard" | "modern">> & "modern" | - | - |
as | JSX.IntrinsicElements | - | - |
description | string | - | - |
error | string | - | - |
hideLabel | boolean | - | - |
label | string | - | |
placeholder | string | - | - |
prompt | { link?: string | undefined; label: string; onClick?: (() => void) | undefined; } | - | - |
size | Partial<Record<Breakpoint, "sm" | "md" | "lg">> | "sm" | "md" | "lg" | - | - |
state | "error" | Partial<Record<Breakpoint, "error">> | - | - |
theme | "white" | "grey" | Partial<Record<Breakpoint, "white" | "grey">> | - | - |
validation | ValidationOptions | - | - |