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.

defaultValue

Typestring | number | null

The default value of the select when uncontrolled.

disabled

Typeboolean

Whether the select is disabled.

error

Typeboolean

Defaultfalse

Whether the select has an error

name

Typestring

Identifies the field when a form is submitted.

onChange

Typesignature

Callback fired when the value of the select changes.

placeholder

Typestring

Placeholder text for the select input

required

Typeboolean

Whether the user must choose a value before submitting a form.

size

TypeExtract

Default'medium'

Size of the select input

value

Typestring | number | null

The controlled value of the select.

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