Native Select Optgroup Enhanced

ProNew

A styled native select with option groups, a disabled placeholder, counts in the group labels, required validation with a message and a hint that names the chosen group. Use this when the platform picker is the right choice, as on phones.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

value

defaultValue

label

placeholder

required

name

showCounts

Guide and examples

When to use it

Use it on touch devices and in simple forms, where the operating system's own picker is more accessible and more familiar than a custom popup, and options fall into a few groups.

Do not use it when you need search, rich rows or multi-select. Use a combobox.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`groups`	`{ label, options: { value, label, disabled? }[] }[]`	-	The grouped options.
`value`	`string`	-	Selected value (controlled).
`defaultValue`	`string`	`""`	Initial value.
`onValueChange`	`(value: string) => void`	-	Runs on change.
`label`	`string`	-	Visible label.
`placeholder`	`string`	`Choose…`	Text of the disabled first option.
`required`	`boolean`	`false`	Native required validation.
`name`	`string`	-	Submits with a form.
`showCounts`	`boolean`	`true`	Show the option count in group labels.

Accessibility

A native <select> with a visible <label for>: screen readers, voice control and mobile pickers behave as they do everywhere.
The first option is a disabled, selected placeholder, so a required select starts empty instead of silently choosing the first real option.
After the field is touched, a missing required value shows a message linked with aria-describedby, and aria-invalid is set.
Group labels include counts (Europe (5)); screen readers read them as the group name.

Testing

The pattern ships with a Testing Library test (native-select-optgroup-enhanced.test.tsx) that covers the native structure, the placeholder, required validation and the group hint.

Guide and examples

When to use it

Use it on touch devices and in simple forms, where the operating system's own picker is more accessible and more familiar than a custom popup, and options fall into a few groups.

Do not use it when you need search, rich rows or multi-select. Use a combobox.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`groups`	`{ label, options: { value, label, disabled? }[] }[]`	-	The grouped options.
`value`	`string`	-	Selected value (controlled).
`defaultValue`	`string`	`""`	Initial value.
`onValueChange`	`(value: string) => void`	-	Runs on change.
`label`	`string`	-	Visible label.
`placeholder`	`string`	`Choose…`	Text of the disabled first option.
`required`	`boolean`	`false`	Native required validation.
`name`	`string`	-	Submits with a form.
`showCounts`	`boolean`	`true`	Show the option count in group labels.

Accessibility

A native <select> with a visible <label for>: screen readers, voice control and mobile pickers behave as they do everywhere.
The first option is a disabled, selected placeholder, so a required select starts empty instead of silently choosing the first real option.
After the field is touched, a missing required value shows a message linked with aria-describedby, and aria-invalid is set.
Group labels include counts (Europe (5)); screen readers read them as the group name.

Testing

The pattern ships with a Testing Library test (native-select-optgroup-enhanced.test.tsx) that covers the native structure, the placeholder, required validation and the group hint.