Field Select

Usage

The FieldSelect component provides a select field component for the Field component.

Theme

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  SelectGroup,
  SelectLabel,
} from "@epilot/volt-ui"

<Field variant="highlight">
  <FieldLabel>Theme</FieldLabel>
  <Select>
    <SelectTrigger>
      <SelectValue placeholder="Select a theme" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        <SelectLabel>Themes</SelectLabel>
        <SelectItem value="system">System</SelectItem>
        <SelectItem value="light">Light</SelectItem>
        <SelectItem value="dark">Dark</SelectItem>
      </SelectGroup>
    </SelectContent>
  </Select>
</Field>

API Reference

Select

Root component for the select. Accepts all standard Radix UI Select Root props.

Prop	Type	Default	Description
`value`	string	-	The controlled value of the select.
`defaultValue`	string	-	The value of the select when initially rendered.
`onValueChange`	(value: string) => void	-	Event handler called when the value changes.
`open`	boolean	-	The controlled open state of the select.
`defaultOpen`	boolean	-	The open state of the select when initially rendered.
`onOpenChange`	(open: boolean) => void	-	Event handler called when the open state changes.
`disabled`	boolean	false	When set to `true`, the select is disabled.
`name`	string	-	The name of the select. Submitted with its owning form as part of a name/value pair.
`required`	boolean	false	When set to `true`, the select is required.
`container`	React.ReactNode	-	The container to render the select content in.

SelectTrigger

The button that toggles the select. Accepts all standard Radix UI Select Trigger props.

Prop	Type	Default	Description
`className`	string	-	Additional CSS classes.
`disabled`	boolean	false	When set to `true`, the trigger is disabled.
`asChild`	boolean	false	Change the component to the HTML tag or custom component.

SelectValue

Displays the selected value or placeholder. Accepts all standard Radix UI Select Value props.

Prop	Type	Default	Description
`placeholder`	string	-	The placeholder text shown when no value is selected.

SelectContent

The content of the select dropdown. Accepts all standard Radix UI Select Content props.

Prop	Type	Default	Description
`className`	string	-	Additional CSS classes.
`position`	"popper" \| "item-aligned"	`"popper"`	The positioning strategy to use.
`align`	"start" \| "center" \| "end"	`"center"`	The alignment of the content relative to the trigger.
`side`	"top" \| "right" \| "bottom" \| "left"	`"bottom"`	The side of the trigger to render against.
`sideOffset`	number	4	The distance in pixels from the trigger.

SelectItem

An item in the select dropdown. Accepts all standard Radix UI Select Item props.

Prop	Type	Default	Description
`value`	string	-	The value of the item (required).
`className`	string	-	Additional CSS classes.
`disabled`	boolean	false	When set to `true`, the item is disabled.

SelectLabel

A label for grouping items in the select dropdown. Accepts all standard Radix UI Select Label props.

Prop	Type	Default	Description
`className`	string	-	Additional CSS classes.

SelectGroup

Groups items together in the select dropdown. Accepts all standard Radix UI Select Group props.

Prop	Type	Default	Description
`className`	string	-	Additional CSS classes.

SelectSeparator

A visual separator between items in the select dropdown. Accepts all standard Radix UI Select Separator props.

Prop	Type	Default	Description
`className`	string	-	Additional CSS classes.

Field Select

On this page