Select

A control-surface trigger with a popover list, matching the CRM Select.

When to use

Use Select when you need a control-surface trigger with a popover list, matching the crm select.

Import

TypeScript

import { Select } from '@gzodo/ui'

Select is a button on .gz-control plus a positioned menu. Options support search, groups, colors, multiple values, and a clear row. onChange receives the next value and the option data. The menu width follows the trigger.

Examples

Basic

Controlled value. Choosing a row calls onChange(value, data) and closes the menu.

Placeholder

An empty value shows placeholder. isClearValue adds a “...” row that clears the selection.

Search and groups

isSearch filters labels. Set group on options to draw section headers. color paints a status swatch.

Multiple

isMultiple keeps an array of values. Selected rows show the leading dot.

Sizes and width

Size follows the control scale. fullWidth stretches the trigger.

Disabled

Disable the trigger with the control surface disabled state.

Select

Property

Description

Type

Default

size

Fixed height of the control.

'sm' | 'md' | 'lg' | 'xl'

'md'

variant

Surface treatment. Primary is the main action.

—

color

Semantic color layered on top of the variant.

'danger' | 'success' | 'warning'

—

fullWidth

Stretch the control to the container width.

boolean

false

disabled

Blocks interaction and lowers opacity.

boolean

false

className

Extra classes, merged with the component classes.

string

—

value

Selected value, or an array when isMultiple is true.

string | string[]

—

options

Choices. Each option has value, label, and optional group, color, data.

SelectOption[]

—

onChange

Called with the next value and the option data payload.

(value: string | string[], data: unknown) => void

—

placeholder

Shown when nothing is selected.

string

'Select...'

isSearch

Show a search field above the list.

boolean

false

isMultiple

Allow several selected values.

boolean

false

isClearValue

Add a clear row when the search is empty.

boolean

false

isLoading

Spinner on the trigger and in the menu body.

boolean

—

isPortal

Render the menu in a portal.

boolean

false

isOpen

Controlled open state.

boolean

—

onOpenChange

Called when the menu opens or closes.

(open: boolean) => void

—

customValue

Replace the default value rendering.

ReactNode

—

renderValue

Custom selected value node.

(option) => ReactNode

—

renderOption

Custom option row. Search highlighting is skipped.

(option, search) => ReactNode

—

iconLeft

Icon before the value.

ReactNode

—

iconRight

Icon after the value.

ReactNode

—

SelectOption

Property

Description

Type

Default

value

Option id written into value.

string

—

label

Visible label.

string

—

group

Section title in the menu.

string

—

color

Status swatch. Theme tones or any CSS color.

string

—

data

Passed as the second onChange argument.

unknown

—

Textarea

DatePicker