Select

A native dropdown for selecting a value from a list of options.

Overview

The Select component wraps the native HTML select element with consistent styling, label support, and validation states. Use it when a user needs to choose a single value from a predefined list. As a native HTML select wrapper, it supports both controlled (value + onChange) and uncontrolled (defaultValue) usage.

Select uses the native HTML <select> element, ensuring consistent behavior across devices including mobile.
For lists with fewer than 4 options, consider RadioGroup for better visibility.
For searchable or multi-select scenarios, a custom combobox may be more appropriate.

Accessibility

Renders a native <select> element with full browser and mobile keyboard support.
Arrow keys navigate between options; Enter or Space opens and confirms the selection.
When label is provided, the select is wrapped in a Field component with an associated <label> element.
error and description messages are linked via aria-describedby.

Import

import { Select } from "@cocso-ui/react";

Default

A basic select with a label and options.

Country

import { Select } from "@cocso-ui/react";

export default function SelectDefault() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4 p-4">
      <Select label="Country">
        <option value="">Select a country</option>
        <option value="kr">South Korea</option>
        <option value="us">United States</option>
        <option value="jp">Japan</option>
      </Select>
    </div>
  );
}

Size

Four sizes are available to match surrounding content density.

Large

Medium

Small

X-Small

import { Select } from "@cocso-ui/react";

export default function SelectSizes() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4 p-4">
      <Select label="Large" size="large"><option>Option</option></Select>
      <Select label="Medium" size="medium"><option>Option</option></Select>
      <Select label="Small" size="small"><option>Option</option></Select>
      <Select label="X-Small" size="x-small"><option>Option</option></Select>
    </div>
  );
}

States

Use description for help text, error for validation messages, and disabled to prevent interaction.

With description

Choose your preferred option.

With error

Please select an option.

Disabled

import { Select } from "@cocso-ui/react";

export default function SelectStates() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4 p-4">
      <Select description="Choose your preferred option." label="With description">
        <option>Option A</option>
        <option>Option B</option>
      </Select>
      <Select error="Please select an option." label="With error">
        <option value="">Select...</option>
      </Select>
      <Select disabled label="Disabled">
        <option>Cannot change</option>
      </Select>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
`value`	`string`	-	Controlled value. Use together with `onChange` to manage the select state externally.
`defaultValue`	`string`	-	Initial value for uncontrolled usage. The select manages its own state internally after mount.
`onChange`	`(e: ChangeEvent<HTMLSelectElement>) => void`	-	Callback invoked when the selected value changes. Works in both controlled and uncontrolled modes.
`label`	`string`	-	Label text displayed above the select. When provided, the select is wrapped in a Field component with an associated `<label>` element.
`size`	`"large" \| "medium" \| "small" \| "x-small"`	`"medium"`	Controls the height, padding, and font size. Choose based on surrounding content density.
`disabled`	`boolean`	`false`	Prevents interaction and visually dims the select. Disabled selects are excluded from form submission.
`error`	`boolean \| string`	`false`	When a string, displays a red error message below the select linked via `aria-describedby`. When `true`, applies error border styling without a message.
`description`	`string`	-	Help text displayed below the select in a muted style, linked via `aria-describedby`. Hidden when `error` is set.
`stretch`	`boolean`	`false`	Expands the select to fill the full width of its container. Use in form layouts where the select should match the grid column width.