Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Field examples · Selects

Select in Horizontal Layout Field for React

A theme select with its label beside it in a horizontal field.

Framework
UI library

A settings row: the Theme label on one side, a Select of Light, Dark and System on the other, opening on System. orientation="horizontal" on the Field keeps them on one line.

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

How do the label and the select share a row?

orientation is horizontal on Field, so Theme and the Select sit side by side. max-w-md caps the row.

Which theme is selected at first?

There is no placeholder, because a theme is already selected. The items are Light, Dark, and System. Set defaultValue to system.

Where do Light, Dark, and System go?

Each theme is a SelectItem. The trigger shows the selected label.

How does the Theme label connect?

FieldLabel names the select. Its htmlFor matches the SelectTrigger's id. The label is the first child of the horizontal field.

How do I put Theme back above the select?

Drop orientation, or set it to vertical. The label then stacks over the trigger.

How do I add a hint beside the select?

Put the label and a FieldDescription in FieldContent, and leave the Select as the other child. FieldContent keeps that pair stacked on the row.

All 38 field examples