Select

Dropdown select component for choosing from a list of options.

Import

import { Select } from 'asterui'

Examples

Basic Select

Simple select dropdown.

</>

Pick your favoriteAppleOrangeBananaGrape

import { Select } from 'asterui'

function App() {
  return (
      <Select>
        <option disabled selected>
          Pick your favorite
        </option>
        <option>Apple</option>
        <option>Orange</option>
        <option>Banana</option>
        <option>Grape</option>
      </Select>
    )
}

export default App

With Default Value

Select with pre-selected option.

</>

AppleOrangeBananaGrape

import { Select } from 'asterui'

function App() {
  return (
      <Select defaultValue="orange">
        <option value="apple">Apple</option>
        <option value="orange">Orange</option>
        <option value="banana">Banana</option>
        <option value="grape">Grape</option>
      </Select>
    )
}

export default App

Sizes

Five sizes: xs, sm, md, lg, and xl.

</>

Extra smallSmallMedium (default)LargeExtra large

import { Select, Space } from 'asterui'

function App() {
  return (
      <Space size="xs">
        <Select size="xs">
          <option>Extra small</option>
        </Select>
        <Select size="sm">
          <option>Small</option>
        </Select>
        <Select size="md">
          <option>Medium (default)</option>
        </Select>
        <Select size="lg">
          <option>Large</option>
        </Select>
        <Select size="xl">
          <option>Extra large</option>
        </Select>
      </Space>
    )
}

export default App

Colors

Color variants for different states.

</>

PrimarySecondaryAccentInfoSuccessWarningError

import { Select, Space } from 'asterui'

function App() {
  return (
      <Space size="xs">
        <Select color="primary">
          <option>Primary</option>
        </Select>
        <Select color="secondary">
          <option>Secondary</option>
        </Select>
        <Select color="accent">
          <option>Accent</option>
        </Select>
        <Select color="info">
          <option>Info</option>
        </Select>
        <Select color="success">
          <option>Success</option>
        </Select>
        <Select color="warning">
          <option>Warning</option>
        </Select>
        <Select color="error">
          <option>Error</option>
        </Select>
      </Space>
    )
}

export default App

Ghost Variant

Transparent background style.

</>

Pick oneOption 1Option 2

import { Select } from 'asterui'

function App() {
  return (
      <Select ghost>
        <option disabled selected>
          Pick one
        </option>
        <option>Option 1</option>
        <option>Option 2</option>
      </Select>
    )
}

export default App

Disabled State

Non-interactive disabled select.

</>

Disabled select

import { Select } from 'asterui'

function App() {
  return (
      <Select disabled>
        <option>Disabled select</option>
      </Select>
    )
}

export default App

In Form

Select with form validation.

</>

Country*

Select a countryUnited StatesCanadaMexicoUnited Kingdom

 

Language*

Select a languageEnglishSpanishFrenchGerman

 

Save Settings

import { Select, Form, Button } from 'asterui'

function App() {
  const handleSubmit = (values: Record<string, unknown>) => {
    console.log('Form values:', values);
    alert(JSON.stringify(values, null, 2));
  };
  
  return (
      <Form onFinish={handleSubmit} initialValues={{ country: 'canada' }}>
        <Form.Item
          name="country"
          label="Country"
          required
          rules={{ required: 'Please select a country' }}
        >
          <Select>
            <option value="">Select a country</option>
            <option value="usa">United States</option>
            <option value="canada">Canada</option>
            <option value="mexico">Mexico</option>
            <option value="uk">United Kingdom</option>
          </Select>
        </Form.Item>
  
        <Form.Item
          name="language"
          label="Language"
          required
          rules={{ required: 'Please select a language' }}
        >
          <Select>
            <option value="">Select a language</option>
            <option value="en">English</option>
            <option value="es">Spanish</option>
            <option value="fr">French</option>
            <option value="de">German</option>
          </Select>
        </Form.Item>
  
        <Form.Item>
          <Button htmlType="submit" color="primary">
            Save Settings
          </Button>
        </Form.Item>
      </Form>
    )
}

export default App

API

Select

Property	Description	Type	Default
size	Select size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
color	Select color theme	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
ghost	Ghost style variant	boolean	false
bordered	Show border	boolean	true
disabled	Disabled state	boolean	false
className	Additional CSS classes	string	-
children	Option elements	React.ReactNode	-
data-testid	Test ID for testing	string	-

Accessibility

• Uses native <select> for full accessibility
• Keyboard navigation with arrow keys and Enter
• Works with standard form labels
• Disabled state is properly communicated