Select

<Select
addEmpty?: boolean
align?: "start" | "center" | "end"
name?: string
label?: string
options?: Array<{ value: string; label: string; description?: string; disabled?: boolean }>
isDisabled?: boolean
isRequired?: boolean
isSearchable?: boolean
isClearable?: boolean
defaultValue?: string
handleSelection?: (selected: string) => void
error?: string
placeholder?: string

: JSX.Element

• addEmpty: Adds an empty option at the top of the dropdown. Defaults to false.
• align: Sets the alignment of the dropdown content. Options are "start", "center", or "end". Defaults to "start".
• name: The name of the hidden input field used for form submission. Defaults to an empty string.
• label: Text label displayed above the select component.
• options: An array of options for the dropdown. Each option includes a value, label, optional description, and disabled state.
• isDisabled: Disables the select component when set to true. Defaults to false.
• isRequired: Marks the select as required for form validation. Defaults to true.
• isSearchable: Enables a search input within the dropdown for filtering options. Defaults to false.
• isClearable: Allows clearing the selection when set to true. Defaults to true.
• defaultValue: Sets the initial value of the select component.
• handleSelection: Callback triggered when an option is selected. Receives the selected value as a parameter.
• error: Custom error message for the component.
• placeholder: Text displayed when no value is selected. Defaults to an empty string.

Example

import { Select } from "@explita/daily-toolset/form";
function App() {
const options = [
    { value: "1", label: "Option 1" },
    { value: "2", label: "Option 2", description: "Additional info" },
];

const handleSelection = (selected) => {
    console.log("Selected:", selected);
};

return (
    <Select
        name="exampleSelect"
        label="Example Select"
        options={options}
        isSearchable={true}
        isClearable={true}
        placeholder="Select an option..."
        handleSelection={handleSelection} />
    );
}

Use Cases

• Creating dropdowns with dynamic options and descriptions.
• Integrating searchable dropdowns in forms for better UX.
• Handling form validation and controlled inputs seamlessly.
• Customizing alignment and empty-state handling for specific needs.