optionsreadonly Option[]children?ReactNodedefaultValue?Option['value']onChange?(value: Option['value']) => voidplacement?Placement'bottom'value?Option['value']| Prop | Type | Default |
|---|---|---|
options | readonly Option[] | - |
children? | ReactNode | - |
defaultValue? | Option['value'] | - |
onChange? | (value: Option['value']) => void | - |
placement? | Placement | 'bottom' |
value? | Option['value'] | - |
label?stringsize?ComponentProps<typeof Button>['size']'md'| Prop | Type | Default |
|---|---|---|
label? | string | - |
size? | ComponentProps<typeof Button>['size'] | 'md' |
iconReactElementlabel?stringsize?ComponentProps<typeof Button>['size']'md'| Prop | Type | Default |
|---|---|---|
icon | ReactElement | - |
label? | string | - |
size? | ComponentProps<typeof Button>['size'] | 'md' |
helpContent?ReactElement| Prop | Type | Default |
|---|---|---|
helpContent? | ReactElement | - |
import { ListBox } from '@k8ordo/ui';const OPTIONS: readonly Option[] = [
{ value: 'apple', label: 'Apple' },
{ value: 'banana', label: 'Banana' },
{ value: 'cherry', label: 'Cherry' },
{ value: 'grape', label: 'Grape' },
{ value: 'melon', label: 'Melon' },
];
const [selected, setSelected] = useState<string>();
<ListBox.Root
onChange={(value) => setSelected(value)}
options={OPTIONS}
value={selected}
>
<ListBox.Trigger label="Fruit" />
<ListBox.Content />
</ListBox.Root><ListBox.Root onChange={onChange} options={OPTIONS} value={value}>
<ListBox.Trigger label="Fruit (sm)" size="sm" />
<ListBox.Content />
</ListBox.Root>
<ListBox.Root onChange={onChange} options={OPTIONS} value={value}>
<ListBox.Trigger label="Fruit (md)" size="md" />
<ListBox.Content />
</ListBox.Root>
<ListBox.Root onChange={onChange} options={OPTIONS} value={value}>
<ListBox.Trigger label="Fruit (lg)" size="lg" />
<ListBox.Content />
</ListBox.Root>import { ListIcon } from '@k8ordo/ui';
<ListBox.Root onChange={onChange} options={OPTIONS} value={value}>
<ListBox.IconTrigger icon={<ListIcon />} label="Fruit" />
<ListBox.Content />
</ListBox.Root>