dowel
Select

Components

Select

A quiet single-choice popup with groups, descriptions, keyboard navigation, and native form values.

Grouped options

The trigger matches Input geometry. Group labels and descriptions add structure without turning a routine choice into a command menu.

tsx
import { Select } from "@karnstack/dowel";

const providers = [
  { value: "github", label: "GitHub", group: "Cloud" },
  { value: "gitlab", label: "GitLab", group: "Cloud" },
  { value: "self-hosted", label: "Self-hosted Git", description: "Internal Git server", group: "Advanced" },
];

<Select label="Git provider" options={providers} defaultValue="github" />

Forms

Pass name to submit the selected string through the hidden native control. Field supplies the visible label while the required label prop names the combobox.

tsx
<Field.Root>
  <Field.Label>Repository visibility</Field.Label>
  <Select
    label="Repository visibility"
    name="visibility"
    options={[
      { value: "private", label: "Private" },
      { value: "public", label: "Public" },
    ]}
    defaultValue="private"
  />
</Field.Root>

Behavior

Enter, Space, or Arrow Down opens the list. Arrow keys move the highlighted option, typing performs typeahead, Enter selects, and Escape closes without changing the value. The popup inherits the active Dowel theme through its portal.