Select

Choose one option from a list.

Overview

One choice from a list of about five or more: a category, a country, a rating.

Choice

Do
import { Field, Select } from "@hackcove/ui";

<Field label="Category" htmlFor="do-category">
  <Select id="do-category" defaultValue="books">
    <option value="books">Books</option>
    <option value="clothes">Clothes</option>
    <option value="furniture">Furniture</option>
    <option value="records">Records</option>
    <option value="toys">Toys</option>
  </Select>
</Field>
Choosing one of several is a Select in a Field.
Don't
import { Field, Select } from "@hackcove/ui";

<Field label="Open now" htmlFor="dont-open">
  <Select id="dont-open" defaultValue="yes">
    <option value="yes">Yes</option>
    <option value="no">No</option>
  </Select>
</Field>
A yes or no is not a choice from a list: it is a Checkbox.

Usage

  • Put a Select in a Field, with <option> children; set defaultValue or control it with value and onChange.
  • A yes or no is a Checkbox.
  • Two to four modes switched in place are a SegmentedControl.
  • size and width are the same choices as on Input.

Accessibility

  • A Select is a native <select>, so it keeps the browser's arrow, its keyboard handling and its mobile picker.
  • The focus ring comes from the component.

API

Select

A native <select> styled like Input, keeping the browser's own arrow. Takes size and width too.

size

sm is compact, text-xs with less padding, for dense forms and table rows.

Type
"sm" | "md"
Default
md
width

full (default) fills the parent; fill grows to fill the room left in a row beside other items (it can shrink to nothing, so buttons stay on the line); xs, sm, md, lg are fixed; auto is as wide as its content.

Type
"auto" | "sm" | "md" | "lg" | "xs" | "fill" | "full"
Default
full