Select

Composant de sélection déroulante pour choisir parmi une liste d’options.

Import

import { Select } from 'asterui'

Exemples

Select basique

Menu déroulant de sélection 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

Avec valeur par défaut

Sélection avec option présélectionnée.

</>

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

Tailles

Cinq tailles : xs, sm, md, lg et 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

Couleurs

Variantes de couleur pour différents états.

</>

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 fantôme

Style d'arrière-plan transparent.

</>

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

État désactivé

Sélection désactivée non interactive.

</>

Disabled select

import { Select } from 'asterui'

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

export default App

Dans un formulaire

Sélection avec validation de formulaire.

</>

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

Propriété	Description	Type	Défaut
size	Taille du select	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
color	Thème de couleur du select	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
ghost	Variante de style fantôme	boolean	false
bordered	Afficher la bordure	boolean	true
disabled	État désactivé	boolean	false
className	Classes CSS supplémentaires	string	-
children	Éléments d’option	React.ReactNode	-
data-testid	ID de test pour les tests	string	-

Accessibilité

• Utilise <select> natif pour une accessibilité complète
• Navigation au clavier avec les touches fléchées et Entrée
• Fonctionne avec les étiquettes de formulaire standard
• L’état désactivé est correctement communiqué