Installation
npm install @kuzenbo/core @kuzenbo/theme
Usage
import { Select } from "@kuzenbo/core";
function App() {
return (
<Select>
<Select.Trigger className="min-w-48">
<Select.Value placeholder="Select option" />
</Select.Trigger>
<Select.Content>
<Select.Item value="a">Option A</Select.Item>
<Select.Item value="b">Option B</Select.Item>
<Select.Item value="c">Option C</Select.Item>
</Select.Content>
</Select>
);
}
Examples
With Groups and Labels
Organize options into labeled groups.
import { Select } from "@kuzenbo/core";
function GroupsExample() {
return (
<Select>
<Select.Trigger className="min-w-48">
<Select.Value placeholder="Select option" />
</Select.Trigger>
<Select.Content>
<Select.Group>
<Select.Label>Suggestions</Select.Label>
<Select.Item value="a">Option A</Select.Item>
<Select.Item value="b">Option B</Select.Item>
</Select.Group>
<Select.Separator />
<Select.Group>
<Select.Label>Settings</Select.Label>
<Select.Item value="c">Option C</Select.Item>
</Select.Group>
</Select.Content>
</Select>
);
}
Sizes
Selects are available in five size variants.
import { Select } from "@kuzenbo/core";
function SizesExample() {
return (
<div className="grid gap-3">
<Select size="xs">
<Select.Trigger className="min-w-48">
<Select.Value placeholder="XS select" />
</Select.Trigger>
<Select.Content>
<Select.Item value="a">Option A</Select.Item>
</Select.Content>
</Select>
<Select size="sm">
<Select.Trigger className="min-w-48">
<Select.Value placeholder="SM select" />
</Select.Trigger>
<Select.Content>
<Select.Item value="a">Option A</Select.Item>
</Select.Content>
</Select>
<Select size="md">
<Select.Trigger className="min-w-48">
<Select.Value placeholder="MD select" />
</Select.Trigger>
<Select.Content>
<Select.Item value="a">Option A</Select.Item>
</Select.Content>
</Select>
<Select size="lg">
<Select.Trigger className="min-w-48">
<Select.Value placeholder="LG select" />
</Select.Trigger>
<Select.Content>
<Select.Item value="a">Option A</Select.Item>
</Select.Content>
</Select>
<Select size="xl">
<Select.Trigger className="min-w-48">
<Select.Value placeholder="XL select" />
</Select.Trigger>
<Select.Content>
<Select.Item value="a">Option A</Select.Item>
</Select.Content>
</Select>
</div>
);
}
Controlled
Manage the selected value with React state.
import { Select } from "@kuzenbo/core";
import { useState } from "react";
function ControlledExample() {
const [value, setValue] = useState("b");
return (
<Select value={value} onValueChange={setValue}>
<Select.Trigger className="min-w-48">
<Select.Value placeholder="Select option" />
</Select.Trigger>
<Select.Content>
<Select.Item value="a">Option A</Select.Item>
<Select.Item value="b">Option B</Select.Item>
<Select.Item value="c">Option C</Select.Item>
</Select.Content>
</Select>
);
}
Disabled Options
Individual options can be disabled.
import { Select } from "@kuzenbo/core";
function DisabledOptionsExample() {
return (
<Select>
<Select.Trigger className="min-w-48">
<Select.Value placeholder="Select tier" />
</Select.Trigger>
<Select.Content>
<Select.Item value="starter">Starter</Select.Item>
<Select.Item value="pro">Pro</Select.Item>
<Select.Item value="enterprise" disabled>
Enterprise (contact sales)
</Select.Item>
</Select.Content>
</Select>
);
}
Multiple Selection
Enable multiple selection mode.
import { Select } from "@kuzenbo/core";
import { useState } from "react";
function MultipleExample() {
const [values, setValues] = useState<string[]>([]);
return (
<Select multiple value={values} onValueChange={setValues}>
<Select.Trigger className="min-w-48">
<Select.Value placeholder="Select regions" />
</Select.Trigger>
<Select.Content>
<Select.Item value="us">United States</Select.Item>
<Select.Item value="eu">Europe</Select.Item>
<Select.Item value="apac">Asia Pacific</Select.Item>
</Select.Content>
</Select>
);
}
Props
Select
Select extends Base UI Select.Root props.
Size variant applied to trigger and content.Options: "xs" | "sm" | "md" | "lg" | "xl"
Controlled selected value.
Default selected value for uncontrolled usage.
Callback fired when the selected value changes.
When true, allows selecting multiple values.
When true, disables the entire select.
Select trigger, content, and other elements.
Subcomponents
Select.Trigger
The button that opens the select dropdown.
<Select.Trigger className="min-w-48">
<Select.Value placeholder="Choose..." />
</Select.Trigger>
Select.Value
Displays the selected value or placeholder text.
Select.Content
The dropdown panel containing select items.
Select.Item
An individual selectable option.
<Select.Item value="option-1">Option 1</Select.Item>
Select.Group
Groups related items together.
Select.Label
A label for a group of items.
Select.Separator
A visual separator between groups.
Select.Portal
Renders content in a portal (default behavior).
Select.Positioner
Controls popup positioning.
Select.Backdrop
Optional backdrop overlay.
Select.Icon
The dropdown indicator icon.
Select.Arrow
An optional arrow pointing to the trigger.
Buttons for scrolling long lists.
TypeScript
import type {
SelectProps,
SelectTriggerProps,
SelectValueProps,
SelectContentProps,
SelectItemProps,
SelectGroupProps,
SelectLabelProps,
} from "@kuzenbo/core";
const CustomSelect = <Value,>(props: SelectProps<Value, false>) => {
return <Select {...props} />;
};
Accessibility
- Select uses semantic ARIA combobox pattern
- Supports keyboard navigation with arrow keys, Enter, and Escape
- Typeahead search for quick option finding
- Proper focus management between trigger and popup
- Disabled options are skipped in navigation
- Screen reader announcements for selection changes