Select

Select components allow users to choose one option from a dropdown list.

Installation

npm install @libretexts/davis-react

Basic Usage

import { Select } from '@libretexts/davis-react';

export default function Example() {
  return (
    <Select
      name="country"
      label="Country"
      options={[
        { value: 'us', label: 'United States' },
        { value: 'ca', label: 'Canada' },
        { value: 'uk', label: 'United Kingdom' },
      ]}
    />
  );
}

When to use

• Select — Use for closed lists of 4–15 options where all options are known and filtering is not needed. The native <select> element is accessible and familiar.
• Combobox — Use when the list has many options (15+), when users benefit from type-ahead filtering, or when options can be dynamically fetched (e.g., country search, user lookup).