Inputs

Select

Pick one from a short list. Ink check, grouped options, scroll arrows, ghost variant for toolbars. NativeSelect is the platform's own list (its keyboard, the phone's picker) in the same field look.

Live example

Import

Each family is its own entry point, so a page loads only what it uses.

tsx

import { Field } from "@nibapp/ui/components/field";import { NativeSelect } from "@nibapp/ui/components/native-select";import { Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectRoot, SelectSeparator, SelectTrigger, SelectValue } from "@nibapp/ui/components/select";

Props

Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.

Field

Label + control + description + error in one.

Prop	Type	Default	Description
label	ReactNode	—
hint	ReactNode	—	Muted trailing text in the label row — "Optional", a character count…
description	ReactNode	—
error	ReactNode	—	Forces the field invalid and shows this message. Omit to show the browser's validation message after Base UI validates the control.
orientation	"vertical" \| "horizontal"	"vertical"	`vertical` stacks label → control → description. `horizontal` puts the copy on the left and the control on the right — the settings-row layout for switches and compact selects.
nativeLabel	boolean	true	Set to `false` for button controls (Select, Combobox trigger) so clicking the label focuses rather than presses the trigger.
children (required)	ReactNode	—

Also takes the props of Base UI's Field.Root, except children.

NativeSelect

A select that is the platform's own: `<option>` children, the native keyboard and the phone's own picker, in the kit's field look (the Select trigger's chrome, chevron and sizes). Use it where the native list matters more than a styled one: a language switcher, a long list on the web for phones. Works inside <Field> for its label, description and validation.

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"
block	boolean	—
ref	Ref<HTMLSelectElement>	—
value	string	—
defaultValue	string	—
onValueChange	(value: string) => void	—	Fires with the chosen option's value.
leading	ReactNode	—	Icon before the value (a globe for a language).
invalid	boolean	—	Marks the field invalid outside of a <Field> (inside one, Field drives it).
className	string \| undefined	—	Classes for the frame (width, margins…).

Also takes the props of a <select> element, except ref, size, multiple, value, defaultValue and className.

Select

Single-value select from a list of options: `<Select items={models} defaultValue="opus" />`.

Prop	Type	Default	Description
variant	"default" \| "ghost"	"default"	default Framed, matches Input. ghost Chromeless until hovered: toolbars, inline pickers ("Last 7 days ⌄").
size	"sm" \| "md" \| "lg"	"md"
block	boolean	—
items (required)	readonly SelectEntry<Value>[]	—	Flat options, or groups of options (separated automatically).
placeholder	ReactNode	—
leading	ReactNode	—	Icon before the value in the trigger.
aria-label	string	—	Required when there's no visible <Field> label.
className	string \| undefined	—	Classes for the trigger.
contentClassName	string \| undefined	—
side	SelectContentProps["side"]	—
align	SelectContentProps["align"]	—
alignItemWithTrigger	boolean	—

Also takes BaseSelect.Root.Props<Value>, except items, children and multiple.

SelectContent

Portal + positioner + popup + scroll arrows + list in one. Children are items/groups.

Prop	Type	Default	Description
side	ComponentProps<typeof BaseSelect.Positioner>["side"]	"bottom"
align	ComponentProps<typeof BaseSelect.Positioner>["align"]	"start"
sideOffset	number	6
alignItemWithTrigger	boolean	false	Overlap the trigger so the selected item lines up with the value (macOS-style). Off by default: the kit's popups drop below their trigger.

Also takes .

SelectGroup

Also takes the props of Base UI's Select.Group.

SelectGroupLabel

Also takes the props of Base UI's Select.GroupLabel.

SelectItem

Prop	Type	Default	Description
icon	ReactNode	—	Leading icon (provider logo, lucide icon).
description	ReactNode	—	Secondary line under the label ("Most capable · 1M context").
trailing	ReactNode	—	Trailing adornment before the check (badge, shortcut…).
children	ReactNode	—

Also takes the props of Base UI's Select.Item, except children.

SelectSeparator

Also takes the props of Base UI's Select.Separator.

SelectTrigger

Prop	Type	Default	Description
variant	"default" \| "ghost"	"default"	default Framed, matches Input. ghost Chromeless until hovered: toolbars, inline pickers ("Last 7 days ⌄").
size	"sm" \| "md" \| "lg"	"md"
block	boolean	—
leading	ReactNode	—	Icon before the value (e.g. a provider logo).

Also takes .

SelectValue

Also takes the props of Base UI's Select.Value.