Skip to content

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

Free

Simple Switch Field for Solid

Airplane Mode leads the row and the switch follows. The switch starts off, and there is no sentence under the label.

UI library: Ark UI

Airplane Mode and the switch share one row, label first. The switch starts off. There is no sentence under the label.

It fits an on or off setting that applies right away. A choice saved only when the form is submitted is a Checkbox. Ark UI on Solid does not turn on airplane mode.

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>Airplane Mode</FieldLabel>
    <Switch />
  </Field>

FAQ

How do the label and the switch share a row?

orientation is horizontal. FieldLabel comes first, then Switch, so Airplane Mode and the switch sit on one line.

How does Airplane Mode connect to the switch?

FieldLabel names the switch. Field connects the two for you, with no ids to write. max-w-md caps the row.

Does the switch start on?

This switch does not pass a checked default, so it starts off. The label stays beside it either way.

How do I add an explanation under the label?

Put the FieldLabel and a FieldDescription in FieldContent, and keep the Switch as the other child of the horizontal Field.

How do I stack the label over the switch?

Drop orientation, or set it to vertical. A switch under a label is a taller stack than this row.

Which key toggles the switch?

Space activates the focused switch. Field does not add arrow-key behavior of its own.

API Reference

Field

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

Switch

No extra props in this demo. The rest is on the Switch page.

All 38 field examples