Select

A native dropdown select component with size variants, a placeholder option, and inline error message display. Styled with a custom chevron indicator and built with class-variance-authority.

Import

import { Select } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<Select
  options={[
    { value: 'au', label: 'Australia' },
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
  ]}
  placeholder="Choose a country"
/>

<Select
  options={options}
  inputSize="lg"
  error="Please select an option"
/>

Props

Prop	Type	Default	Description
`options`*	Array<{ value: string; label: string }>	-	Array of selectable options with value and label.
`placeholder`	string	`'Select an option...'`	Text shown as the first disabled option.
`inputSize`	'default' \| 'sm' \| 'lg'	`'default'`	Size variant controlling the height of the select.
`error`	boolean \| string	`false`	Error state. When a string is provided, it is displayed as an inline error message.
`value`	string	-	Controlled value of the select.
`onChange`	(e: ChangeEvent<HTMLSelectElement>) => void	-	Change event handler.
`disabled`	boolean	`false`	Whether the select is disabled.
`className`	string	-	Additional CSS classes to apply.

The component also accepts all standard HTML <select> attributes (except size, which is replaced by inputSize).