Docs / Forms / Select

Select

FormSelect is a styled native <select>. It keeps the real element — so keyboard behavior, mobile pickers, and every native attribute work — while applying the form-control look, including the custom dropdown caret.

Import

import { FormSelect } from '@metatoy/bootstrap-styled';

Basic & disabled

Pass <option> elements as children. disabled dims the whole control.

Sizes

size="sm" and size="lg" scale the select the same way they scale Form control. (This is the Bootstrap sizing token; the native size attribute is not exposed.)

Multiple

Add multiple for an expanded list box that accepts several selections.

Validation states

isValid / isInvalid paint the border and swap the caret for the validation icon; pair with FormFeedback for the message.

Props

FormSelect also accepts all native <select> attributes (multiple, disabled, required, name, value / defaultValue, onChange, …).

Theming

FormSelect shares the text-input tokens — --bs-body-bg, --bs-body-color, --bs-border-color, --bs-border-width, --bs-border-radius — plus its own --bs-form-select-bg-img / --bs-form-select-bg-icon for the dropdown caret. The focus ring uses --bs-primary / --bs-primary-rgb, and validation borders use --bs-form-valid-border-color / --bs-form-invalid-border-color.

Accessibility

Associate the select with a FormLabel (htmlFor → the select’s id). A leading placeholder <option value=""> gives users a clear empty state; mark it disabled if a choice is required so it can’t be re-selected. For invalid state, set aria-invalid and reference the error via aria-describedby.

Explore in Ladle

Browse the select stories in the interactive gallery: Open in Ladle.