Select

@/components/kamod-ui/select

Installation

Import Select primitives from `@/components/kamod-ui/select`.

pnpm add @kamod-ch/ui

Usage

Compose trigger, value, groups and content items to build accessible single-select dropdowns.

import { Select } from "@/components/kamod-ui/select";
<Select />

Basic Select

Select one option from a compact modern dropdown list.

Groups and Separators

Use labels and separators to organize larger option sets.

Disabled Items

Disable unavailable entries while keeping the same list structure.

Scrollable Content

Use the default max-height content to keep long lists usable.

Invalid State

Combine with Field and ARIA invalid attributes for error presentation.

API Reference

Props, slots and variants for this component.

Select

Select component props and accepted values.

PropTypeDefault
defaultValuestringundefined
valuestringuncontrolled
onValueChange(value: string) => voidundefined
SelectItem valuestringrequired
SelectItem disabledbooleanfalse
SelectContent forceMountbooleanfalse

Accessibility Notes

Provide clear option labels, mark invalid triggers with aria-invalid, and keep placeholder text distinct from valid selections.