shadcn.io is not affiliated with official shadcn/ui
Form examples · Advanced
Form with Switch for React
Three notification switches, email, push and desktop, each on a bordered row with its label and description.
On/off preferences read best as switches. Under a Notification Settings legend, each row is a bordered horizontal Field with a FieldContent for the label and description and the Switch on the other side. A Controller wires each switch into React Hook Form, and the schema is three booleans, so there is nothing to fail. Use it for notification settings, feature toggles or privacy controls.
Preview
Installation
FAQ
How is each switch connected to the form?
The rows come from one notifications array mapped to a Controller each. Switch takes checked={field.value} and onCheckedChange={field.onChange}.
Which switches start on?
defaultValues sets emailNotifications and desktopNotifications to true and pushNotifications to false.
How is each row arranged?
Each row is Field orientation="horizontal" with rounded-lg border p-4: FieldContent with the FieldLabel and FieldDescription first, then the Switch. The rows sit in a FieldGroup inside a FieldSet whose FieldLegend is Notification Settings.
What do the three descriptions say?
Email Notifications: "Receive notifications via email." Push Notifications: "Receive push notifications on your device." Desktop Notifications: "Receive notifications on your desktop."
Related
- Form with CheckboxA form with three checkboxes and their
- Settings FormAn app settings form with language and
- Default SwitchA switch in its default off state, with
- Mixed Orientations FieldA vertical input, a horizontal switch
- Form with Mixed ControlsA support request form that mixes a text
- Form with Multiple SelectsA name input and three required selects