Skip to content

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

Free

Select in Horizontal Layout Field for Ark UI

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

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 React does not change the theme.

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

Anatomy

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

Usage

<Field className="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} key={item.value}>
            {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