Theme Settings Sheet for React

As a RadioGroup with defaultValue="dark", inside a FieldSet whose FieldLegend reads Theme. Picking one clears the others, which three checkboxes couldn't do.

Two checkboxes in horizontal Field rows, label first. Compact Mode starts off and Enable Animations starts on.

No. The radio group and the checkboxes are uncontrolled, and nothing writes the choice anywhere. Control the radio group's value and pass it to your theme provider, and store it if it should survive a reload.

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. It reads Appearance, with Customize how the app looks as the description.

The outline button labeled Appearance is the trigger, and its text is the accessible name. The Button goes in the render prop of SheetTrigger, and the label stays its child.

The right: SheetContent leaves side unset. The corner close button is on because showCloseButton defaults to true. Escape and a click on the overlay close the sheet too, and focus goes back to the trigger.