THE COMPONENT PLAYGROUND
Try every state.
Start with a scenario, adjust the controls, then apply your changes to the preview. Your selections stay in the URL, so you can bookmark or share a test.
Start with a scenario
2. Test the preview
Try the fields and submit the button. Change the settings on the left to compare another state.
Your preview card
This is an article with optional header and footer slots.
This sample forces error styling. Choose Normal in the control settings to clear it.
What to test
- Tab and Shift+Tab: focus stays visible.
- Disabled controls cannot be activated.
- Read-only text can be selected but not edited.
- Resize the window to stack the grid.
- Try a long button label and both color themes.
More ways to build.
These controls inherit your theme and the control state selected above. File selection stays in your browser; this preview does not upload anything.
Native form controls
Feedback with meaning
DraftIn progressCompleteNeeds reviewFailed
A useful detail
Alerts can contain text, links, or nested components.
Changes saved
Your work is ready for the next step.
A little attention needed
Review the details before continuing.
We could not complete that
Check your entries and try again.
These are static examples. The form lab demonstrates live error feedback and links to invalid fields.
Try the form labNative elements, styled.
Typography & disclosure
A paragraph with strong emphasis, italics, highlighting, and a real link.
Let HTML carry the structure.
Open a native disclosure
The browser owns this behavior. Use Enter or Space on the summary.
Progress & button states
A static progress sample, not a running task.