Select

The Select component is a Radix UI based dropdown menu for selecting options.

Example

Preview

Code

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from '@hv/ui/select';

<Select>
  <SelectTrigger>
    <SelectValue placeholder='Select an option' />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value='option1'>Option 1</SelectItem>
    <SelectItem value='option2'>Option 2</SelectItem>
    <SelectItem value='option3'>Option 3</SelectItem>
  </SelectContent>
</Select>;

Props

Name	Description	Type/Value
className	Additional classes for styling	String
children	The content of the select	ReactNode
value	Controlled value of the select	String
defaultValue	Default value of the select	String
placeholder	Placeholder text for the select value	String
onValueChange	Callback for when the value changes	Function
position	Controls the position of the dropdown	'item-aligned' 'popper'
disabled	Disables the select	Boolean

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides.