A sheet is a large modal that requests additional information from the user in order to complete a task. It often contains a title header, body of 3 or more form fields, and footer with buttons.
Example
⌘ Cmd + ⌥ Option + 1
Properties
"Sheet" Component
| property | propType | required | default | description |
|---|---|---|---|---|
| hasCloseButton | bool | - | true | Used to determine if the sheet should have a close button. |
| onClose | func | - | () => {} | Function to perform when the sheet is closed. |
| subtitle | string | - | '' | A subtitle for the sheet. |
| testSection | string | - | '' | Identifier used to create data-test-section attributes for testing. |
| children | node | yes | - | The body of the sheet to request information and data from the user. |
| footerButtonList | array | yes | - | Array of buttons used in the footer of the sheet. |
| title | string | yes | - | Main title of the sheet. |
Usage
Sheets are intended to hold interactive content like forms and accept user input. Use a Sheet when users need to create, edit, or view forms with more than two inputs. If you need user acknowledgment or quick data entry, use a Dialog instead.
Best Practices
Do
Use a Sheet to request more details and input from the user without interrupting their flow
Don't
Don't use Sheet to prompt users for a simple action