Select Component
The Select component allows users to choose one or multiple options from a dropdown list.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | Array<Option> | [] | Array of options to display in the dropdown |
| placeholder | string | "Select an option" | Placeholder text when no option is selected |
| multiple | boolean | false | Allow multiple selections |
| onChange | function | undefined | Callback function when an option is selected |
| label | string | undefined | Label text for the select component |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Sets the size of the select component |
| variant | "primary" | "secondary" | "success" | "warning" | "error" | "ghost" | "primary" | Sets the color variant of the select component |
| required | boolean | false | Whether the select is required |
| className | string | "" | Additional CSS classes for the select component |
| wrapperClass | string | "" | Additional CSS classes for the wrapper element |
| labelClass | string | "" | Additional CSS classes for the label element |
| labelTextClass | string | "" | Additional CSS classes for the label text |
| sx | React.CSSProperties | {} | Custom styles to be applied to the select component |
| renderOption | function | undefined | Custom render function for option items |
| hideSearch | boolean | false | Hide the search input in the dropdown |
Usage
import { Select } from 'knoxui-react';
const options = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' },
];
<Select
options={options}
onChange={(option) => setSelectedOption(option)}
placeholder="Select an option"
/>