Search and Filter Sheet for React

It's an input with type="search" and the label Search, in a Field. Browsers add a clear button to search inputs, and phones show a search key.

In a FieldSet whose FieldLegend reads Categories. Each category is a horizontal Field with the checkbox first and its label after, so clicking the label toggles the box.

Not yet: the checkboxes are uncontrolled and the button has no handler. Read the values when it's pressed, apply them to your list, and close the sheet.

Control the open state and set it to false in the Apply handler: Pass open to Sheet; onOpenChange receives the next boolean.

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

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 Search & Filter, with Refine your search with filters below as the description.