WIP components
Scratch space for components mid-iteration.
>Alert
Variants
Heads up
You can add components and dependencies to your app.
Something went wrong
Your session has expired. Please log in again to continue.
With icon
New activity
Three people replied to your post since you last checked in.
Connection lost
We can't reach the server. Retrying in the background.
With action
Update available
A newer version is ready. Reload to apply the changes.
Title only
Saved as draft.
Saved to your bookmarks.
>Checkbox
Sizes
xs - 25px
sm - 35px
md - 45px (default)
lg - 55px
Variants
primary
accent
accent-soft
primary (indeterminate)
accent (indeterminate)
accent-soft (indeterminate)
States
With label
Controlled
state:
indeterminateInside Field
Subscribe to newsletter
Monthly digest, never more.
>Form composition
Sign-up form
Settings panel (with errors + sizes)
>Empty spinner
Standalone
In a surface
Loading -> empty -> content (toggle)
>Empty
Minimal
No bookmarks yet
Things you save will live here.
With icon media
No bookmarks yet
Tap the bookmark icon on any post to save it here.
With content / actions
Nothing to explore
Follow a few people or check back after the next refresh.
Default media slot (custom)
Offline
We can't reach the server right now.
>Input
Sizes
States
With label + ButtonGroup
>Input OTP
Verification code (6-digit)
Sizes
PIN (4-digit, masked)
Controlled / onComplete
Current: (empty)
Completed: (not yet)
>Field
Vertical (default)
Shown on your profile.
Horizontal
Responsive (vertical < @md, horizontal ≥ @md)
Description and single error
Only used for important notices.
That email looks malformed.
Multiple errors (deduped)
- At least 12 characters.
- Must contain a number.
- Must contain a symbol.
Empty error renders nothing
Selectable card (Field nested in Field.Label)
FieldSet + FieldLegend
FieldSeparator
FieldSeparator with content
or