Select

Componente de seleção dropdown para escolher de uma lista de opções.

Importação

import { Select } from 'asterui'

Exemplos

Select Básico

Dropdown de seleção simples.

</>

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

Com Valor Padrão

Select com opção pré-selecionada.

</>

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

Tamanhos

Cinco tamanhos: xs, sm, md, lg e 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

Cores

Variantes de cor para diferentes estados.

</>

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

Variante Fantasma

Estilo com fundo transparente.

</>

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

Estado Desabilitado

Select desabilitado não interativo.

</>

Disabled select

import { Select } from 'asterui'

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

export default App

Em Formulário

Select com validação de formulário.

</>

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

Propriedade	Descrição	Tipo	Padrão
size	Tamanho do select	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
color	Tema de cor do select	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
ghost	Variante de estilo fantasma	boolean	false
bordered	Mostrar borda	boolean	true
disabled	Estado desabilitado	boolean	false
className	Classes CSS adicionais	string	-
children	Elementos de opção	React.ReactNode	-
data-testid	ID de teste para testes	string	-

Acessibilidade

• Usa <select> nativo para acessibilidade completa
• Navegação por teclado com teclas de seta e Enter
• Funciona com labels de formulário padrão
• Estado desabilitado é comunicado corretamente