Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Select in Horizontal Layout Field for Solid

Theme sits beside a menu that opens on System. The choices are Light, Dark, and System, and there is no placeholder.

UI library: Ark UI

Theme and the menu share one row. The menu already shows System. The choices are Light, Dark, and System. There is no placeholder.

Put it on a setting with a default that should stay on one line. The operating system's menu is a Native Select. Ark UI in Solid does not change the theme.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Field anatomy: root, label, input, description, error

Usage

<Field class="max-w-md" orientation="horizontal">
    <FieldLabel>Theme</FieldLabel>
    <Select collection={collection} defaultValue={["system"]}>
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          {collection.items.map(item => <SelectItem item={item}>
              {item.label}
            </SelectItem>)}
        </SelectGroup>
      </SelectContent>
    </Select>
  </Field>

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 an array containing 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. Field connects the two for you, with no ids to write. 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.

API Reference

Field

Sets orientation="horizontal". The rest is on the Field page.

Select

Sets collection={collection}, defaultValue={["system"]} and item={item}. The rest is on the Select page.

All 38 field examples