"use client"; import * as React from "react"; import { Select as SelectPrimitive } from "radix-ui"; import { cn } from "@kineticui/core"; import { CheckIcon, ChevronDownIcon } from "@kineticui/icons"; export type SelectOption = { value: string; label: React.ReactNode; /** Small text under the label. */ description?: React.ReactNode; /** Icon or colour dot before the label. */ icon?: React.ReactNode; /** Options with the same group are listed under one heading. */ group?: string; disabled?: boolean; }; export type SelectProps = { options: SelectOption[]; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; placeholder?: string; disabled?: boolean; invalid?: boolean; className?: string; contentClassName?: string; name?: string; "aria-label"?: string; id?: string; }; /** Accessible custom select with groups, icons and descriptions. */ export function Select({ options, value, defaultValue, onValueChange, placeholder = "Select…", disabled, invalid, className, contentClassName, name, id, ...rest }: SelectProps) { const groups = React.useMemo(() => { const map = new Map(); for (const o of options) map.set(o.group ?? "", [...(map.get(o.group ?? "") ?? []), o]); return [...map.entries()]; }, [options]); return ( {groups.map(([group, items], gi) => ( {group ? ( {group} ) : null} {items.map((o) => ( {o.icon} {o.label} {o.description ? {o.description} : null} ))} ))} ); }

Select

Installation

Exports