Notification Preferences Sheet for React

Email Notifications holds Product Updates and Newsletter. Push Notifications holds New Messages and Mentions. Each group is a FieldSet with a FieldLegend and a FieldGroup of rows.

Each row is a horizontal Field: the FieldLabel at the start names the Checkbox at the end, and clicking the label toggles it. Newsletter is the only box that starts unchecked.

No. The checkboxes are uncontrolled and the sheet has no footer, so nothing reads them. Add a SheetFooter with a save button, and make the boxes controlled, to store the choices.

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 Notification Settings, with Choose what notifications you want to receive as the description.

The outline button labeled Notifications 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.