Select

Component for displaying a select dropdown with customizable size, placeholder, and item list

function SelectExample() {
  return (
    <Select
      error={false}
      items={[
        { label: 'Chair', value: 'chair' },
        { label: 'Table', value: 'table' },
        { label: 'Sofa', value: 'sofa' },
        { label: 'Bookshelf', value: 'bookshelf' },
        { label: 'Wardrobe', value: 'wardrobe' },
        { type: 'separator' },
        { label: 'Other', value: 'other' },
      ]}
      placeholder="Pick"
    />
  );
}

Props

items

required

TypeArray

List of items to display in the select dropdown

className

Typestring

Custom class name for the component.

error

Typeboolean

Defaultfalse

Whether the select has an error

placeholder

Typestring

Placeholder text for the select input

size

TypeExtract

Default'medium'

Size of the select input

CSS Variables

Size

--ax-public-select-border-size

Color

--ax-public-select-button-background-color-error

--ax-public-select-button-border-color

--ax-public-select-button-border-color-error

--ax-public-select-button-border-color-focus

--ax-public-select-button-color

--ax-public-select-button-color-disabled

--ax-public-select-button-color-error