shadcn.io is not affiliated with official shadcn/ui
Field examples · Toggles
Simple Switch Field for React
An airplane mode switch with its label on the other side of the row.
Framework
UI library
An on/off setting that applies right away. A horizontal Field puts the Airplane Mode label first and the Switch after it, the usual layout for a settings list.
Preview
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
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. Its htmlFor matches the control's id. 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.
Related
- Switch with Description FieldA multi-factor authentication switch with
- Simple Checkbox FieldA terms and conditions checkbox with its
- Radio Buttons FieldA fieldset of three radio buttons for
- Simple Input with Label FieldAn email input with its label above it
- Multiple Checkboxes FieldA fieldset of four checkboxes for the
- Fieldset with LegendAn address fieldset with a legend, a