Select

Select allows users to select a value from a dropdown list of options.

Usage

import { Select } from '@elegantui/forms';

Components

The Select component also includes a Select.Option component that allows you to display a list of options.

Basic Example

import { Select } from '@elegantui/forms';

export default function App() {
  const people = [
    { id: 1, name: 'Durward Reynolds', unavailable: false },
    { id: 2, name: 'Kenton Towne', unavailable: false },
    { id: 3, name: 'Therese Wunsch', unavailable: false },
    { id: 4, name: 'Benedict Kessler', unavailable: true },
    { id: 5, name: 'Katelyn Rohan', unavailable: false }
  ];

  const [person, setPerson] = React.useState(people[0]);

  return (
    <Select
      name='default'
      label='Select'
      selectedText={person.name}
      value={person}
      onChange={(p) => setPerson(p)}
    >
      {people.map((person) => (
        <Select.Option
          key={person.id}
          optionText={person.name}
          value={person}
        />
      ))}
    </Select>
  );
}

Displaying selected value

The value passed to the selectedText prop is displayed inside the select input. This value is usually the option selected by the user.

Variants

Select component is available in six variants.

import { Select } from '@elegantui/forms';

export default function App() {
  const people = [
    { id: 1, name: 'Durward Reynolds', unavailable: false },
    { id: 2, name: 'Kenton Towne', unavailable: false },
    { id: 3, name: 'Therese Wunsch', unavailable: false },
    { id: 4, name: 'Benedict Kessler', unavailable: true },
    { id: 5, name: 'Katelyn Rohan', unavailable: false }
  ];

  const [person, setPerson] = React.useState(people[0]);
  return (
    <Select
      name='Default'
      label='Select'
      selectedText={person.name}
      value={person}
      onChange={(p) => setPerson(p)}
      variant='primary' // 'default' | 'secondary' | 'success' | 'warning' | 'error'
    >
      {people.map((person) => (
        <Select.Option
          key={person.id}
          optionText={person.name}
          value={person}
        />
      ))}
    </Select>
  );
}

Label

Select component renders a label for accessibility purposes. The value for the label can be provided using the label prop. If you would like to hide the label but still keep it accessible to screen readers you can pass a hideLabel prop.

import { Select } from '@elegantui/forms';

export default function App() {
  const people = [
    { id: 1, name: 'Durward Reynolds', unavailable: false },
    { id: 2, name: 'Kenton Towne', unavailable: false },
    { id: 3, name: 'Therese Wunsch', unavailable: false },
    { id: 4, name: 'Benedict Kessler', unavailable: true },
    { id: 5, name: 'Katelyn Rohan', unavailable: false }
  ];

  const [person, setPerson] = React.useState(people[0]);
  return (
    <Select
      name='primary'
      label='Primary'
      selectedText={person.name}
      value={person}
      onChange={(p) => setPerson(p)}
      variant='primary'
      hideLabel
    >
      {people.map((person) => (
        <Select.Option
          key={person.id}
          optionText={person.name}
          value={person}
        />
      ))}
    </Select>
  );
}

Disabled state

Select component can be disabled by using the disabled prop. This will disable the entire component. For disabling only certain options the disabled prop needs be passed to each Select.Option component individually.

import { Select } from '@elegantui/forms';

export default function App() {
  const people = [
    { id: 1, name: 'Durward Reynolds', unavailable: false },
    { id: 2, name: 'Kenton Towne', unavailable: false },
    { id: 3, name: 'Therese Wunsch', unavailable: false },
    { id: 4, name: 'Benedict Kessler', unavailable: true },
    { id: 5, name: 'Katelyn Rohan', unavailable: false }
  ];

  const [person, setPerson] = React.useState(people[0]);
  return (
    <Select
      name='primary'
      label='Primary'
      selectedText={person.name}
      value={person}
      onChange={(p) => setPerson(p)}
      variant='primary'
      disabled
    >
      {people.map((person) => (
        <Select.Option
          key={person.id}
          optionText={person.name}
          value={person}
          disabled={person.unavailable} // use this to disable only certain options
        />
      ))}
    </Select>
  );
}

Available Props

Select

Select.Option