Select

Componente de selección desplegable para elegir de una lista de opciones.

Importar

import { Select } from 'asterui'

Ejemplos

Select básico

Desplegable de selección simple.

</>

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

Con valor predeterminado

Select con opción pre-seleccionada.

</>

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

Tamaños

Cinco tamaños: xs, sm, md, lg y 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

Colores

Variantes de color 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 ghost

Estilo de fondo 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 deshabilitado

Select deshabilitado no interactivo.

</>

Disabled select

import { Select } from 'asterui'

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

export default App

En formulario

Select con validación de formulario.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
size	Tamaño del select	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
color	Tema de color del select	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
ghost	Variante de estilo ghost	boolean	false
bordered	Mostrar borde	boolean	true
disabled	Estado deshabilitado	boolean	false
className	Clases CSS adicionales	string	-
children	Elementos de opción	React.ReactNode	-
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

• Usa <select> nativo para accesibilidad completa
• Navegación por teclado con teclas de flecha y Enter
• Funciona con etiquetas de formulario estándar
• El estado deshabilitado se comunica apropiadamente