Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Field examples · Selects

Multiple Selects Field for React

Language and currency selects stacked in a field group, each with a default value.

Framework
UI library

Two related Selects for regional settings, Language and Currency, stacked in a FieldGroup. Each opens on a default, English and USD, so the form is valid before anyone touches it.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What groups Language and Currency?

One FieldGroup stacks two Fields, capped with max-w-md. Each field is a FieldLabel and a Select, and neither field sets orientation.

Which values are selected at first?

Language opens on English, and Currency opens on USD. Neither has a placeholder. Set defaultValue to en on Language and usd on Currency.

What is in each list?

Language items are English, Spanish, French, and German. Currency items are USD, EUR, GBP, and JPY. Each option is a SelectItem.

How wide are the triggers?

Each select fills its field, and the labels stay above the triggers.

How do the labels connect?

FieldLabel names that select. Its htmlFor matches the SelectTrigger's id. The labels are Language and Currency.

How do I put a label beside its select?

Set orientation to horizontal on that Field. The label and the trigger then share a row.

All 38 field examples