Select

Single-value select. Options are SelectOption objects; values are generic (T, string by default). Includes built-in field chrome: label, hint, error, required.

Country

Searchable + clearable


import { Select } from '@gg-software/ui';
 
<Select
    label="Country"
    placeholder="Pick a country"
    options={[
        { label: 'Czechia', value: 'cz' },
        { label: 'Slovakia', value: 'sk' },
        { label: 'Austria', value: 'at', disabled: true },
    ]}
    onChange={(value, option) => console.log(value, option)}
/>
 
<Select label="Searchable + clearable" searchable clearable options={options} />

Props

Prop	Type	Default	Description
`options`*	`SelectOption<T>[]`	—
`value`	`T \| null`	—
`defaultValue`	`T \| null`	`null`
`onChange`	`((value: T \| null, option: SelectOption<T> \| null) => void)`	—
`placeholder`	`string`	`Select…`
`label`	`ReactNode`	—
`hint`	`ReactNode`	—
`error`	`ReactNode`	—
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	`md`
`status`	`"warning" \| "error"`	—
`disabled`	`boolean`	`false`
`searchable`	`boolean`	`false`
`clearable`	`boolean`	`false`
`filterOption`	`((query: string, option: SelectOption<T>) => boolean)`	—	custom filter predicate for searchable selects
`emptyText`	`ReactNode`	`No options`	content shown when no option matches
`id`	`string`	—
`name`	`string`	—
`className`	`string`	—

* required · generated from packages/ui/src/input/Select/Select.tsx

Types


type SelectOption<T = string> = {
    label: ReactNode;
    value: T;
    disabled?: boolean;
};