Form Controls
Interactive inputs for collecting user data
Button#
Form actions
Primary/secondary pairing for settings, onboarding, checkout.
Destructive
Irreversible actions — only after a confirm dialog.
Loading state
Disabled + spinner icon while awaiting a response.
Icon + text
Leading glyph for recognition at a glance.
Trailing icon + leading/trailing pair
Trailing chevrons hint at navigation; pairing both icons frames a label in a command.
Size ladder (shadcn parity)
xs / sm / default / lg — plus four icon-only sizes with required aria-label.
Input#
Profile
A typical sign-up form using text, email, and password inputs.
Input Types
Each HTML input type rendered with a contextual placeholder.
States
Default, populated, invalid, disabled, and read-only.
Textarea#
Share your feedback
Tell us what worked and what didn't. We read every response.
Profile
Shown on your public profile and attribution lines.
Tip: mention where you work, what you build, and where folks can find you.
Invalid (aria)
Form framework set aria_invalid without styling as hard error.
Screen readers will announce this field as invalid.
Admin notes
Read-only. Changes require a support ticket.
Last updated by Sofia M. · 6 days ago
Checkbox#
Checkbox
Radio#
Radio — Plan
Radio — States
Radio — With Descriptions
Select#
Preferences
A realistic settings form with theme, language, and a locked timezone field.
Controls the application appearance.
Select Anatomy
Individual select states shown in isolation.
Pre-selected
Placeholder
Disabled option
Fully disabled
Small size
Invalid state
Grouped options
Options organized under labeled groups with separator helper.
Switch#
Notification Settings
States
Sizes
Default and compact (sm) variants.
Form Integration
Required and invalid states propagate to the hidden input.
Slider#
Price range
Range slider (two thumbs)
Volume
Brightness
Vertical slider
Number Field#
Cart — Wireless Headphones
Aurora Wireless Headphones
$149 each
Max 10 per order
Account — Age verification
You must be at least 13 to create an account.
Recipe — Tomato Basil Risotto
Adjust to scale ingredients (1–12 people).
Backordered — quantity locked
Ships when restocked on April 28.
Field#
Create Account
A realistic registration form showing label, description, error, and required field patterns together.
We'll never share your email with anyone.
Use 8 or more characters with a mix of letters and numbers.
Must be at least 8 characters.
A brief introduction for your public profile.
Multiple Errors
A field with multiple validation errors rendered via the errors Vec. Root carries data-invalid for CSS and form-framework hooks.
Passwords must meet all requirements.
Must contain at least one uppercase letter.
Must contain at least one digit.
Must be at least 12 characters long.
Horizontal Orientation
Label on the left, control on the right — good for dense forms and settings panels.
Primary contact address.
Composed Fieldset
Built from helper fns (fieldset, legend, group, title, separator, label, description, content) rather than the monolithic render(Props).
Field Anatomy
Each feature of the Field component shown in isolation.
Basic
Required
With Description
Include country code for international numbers.
With Error
Please enter a valid URL starting with https://.
Description + Error
Found in your invitation email.
This code has already been used.
Textarea Field
Any additional context (optional).
Fieldset#
Profile Fieldset
Disabled Fieldset
Label#
Variants
Default
Required
Disabled
With input
Native Select#
Country
Currency
Disabled
Display
Visual indicators and content presentation
Badge#
Swatch#
Sizes
Raw values
Any valid CSS colour string. Click a chip to copy the value.
Design tokens (live)
Each chip reads var(--mui-*) at paint time, so toggling the gallery theme flips the grid.
Scale ramps (Tailwind-style)
Horizontal ramps from 50 to 950 — click any tone to copy its hex.
Avatar#
User Card
Status Indicator
Status Badge
Team
Sizes
Separator#
Profile card sections
Separator divides the Bio block from account Settings in a user profile.
Auth methods
“OR” label separates social sign-in from email + password.
Navigation
Vertical separator between primary nav and user menu.
Progress#
File upload
Stepped progress
Indeterminate
With label + value helpers
Download complete
Meter#
Battery level (higher is better)
15%
60%
90%
Disk usage (lower is better)
25%
70%
95%
Kbd#
Keyboard shortcuts
Skeleton#
Loading post
Loading table row
Loading product card
Spinner#
Sizes
Loading button
Page loading
Inline status
Typography#
Headings
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
Body text
A lead paragraph is great for intros. It's visually larger and lighter than body text, drawing the eye without shouting.
Regular paragraph text. This is the standard body copy size used throughout the interface for readable content at comfortable line lengths.
Lists
- First bullet item
- Second bullet item
- Third bullet item
- Step one
- Step two
- Step three
Code
Install dependencies with bun install then run bun dev to start.
Blockquote
Design is not just what it looks like and feels like. Design is how it works.
Table
| Name | Role | Status |
|---|---|---|
| Ada Lovelace | Mathematician | Active |
| Alan Turing | Cryptanalyst | Active |
Empty State#
No results
No results found
Try adjusting your search query or removing some filters to find what you're looking for.
Empty inbox
Your inbox is empty
Messages you receive will appear here.
First run
Create your first project
Projects help you organize your work and collaborate with your team.
Minimal
Nothing here yet
Composed (Default media)
No packages installed
Install a package to start building your app.
Composed (Icon media)
No matches
No items match your current filters.
Layout
Structural components for organizing content
Card#
Notifications
Notifications
Choose what you want to be notified about.
Push Notifications
Send notifications to device.
Email Notifications
Receive emails for activity updates.
Stat card
Total Revenue
$45,231.89
+20.1% from last month
Create project
Create project
Deploy your new project in one click.
Compact card (size: Sm)
Storage
6.2 GB of 15 GB used.
Card with action slot
Team members
Manage who has access to this project.
- Alice Johnson — Owner
- Bob Smith — Editor
- Carol Davis — Viewer
Accordion#
FAQ
Yes. It adheres to the WAI-ARIA design pattern.
Yes. It comes with a default theme that matches shadcn.
Yes. JavaScript handles expand/collapse with ARIA state.
Multiple
Content for Section A with relevant information.
Content for Section B with additional details.
Content for Section C with more information.
Collapsible#
Headless accessible UI components for maud + htmx.
Currently in active development. APIs may change.
- Item A
- Item B
Tabs#
Default (horizontal, segmented)
Make changes to your account here. Click save when you’re done.
Change your password here. After saving, you’ll be logged out.
Invite your team members to collaborate.
Sofia Davis
sofia@example.com
Jackson Lee
jackson@example.com
Isabella Nguyen
isabella@example.com
Line variant (underline)
Make changes to your account here. Click save when you’re done.
Change your password here. After saving, you’ll be logged out.
Invite your team members to collaborate.
Sofia Davis
sofia@example.com
Jackson Lee
jackson@example.com
Isabella Nguyen
isabella@example.com
Vertical orientation + disabled tab + manual activation
Make changes to your account here. Click save when you’re done.
Change your password here. After saving, you’ll be logged out.
Invite your team members to collaborate.
Sofia Davis
sofia@example.com
Jackson Lee
jackson@example.com
Isabella Nguyen
isabella@example.com
Table#
With badges, right-aligned amounts, and footer total
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
| Total | $1,750.00 |
Striped + hoverable
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
Compact
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
Data Table#
Searchable, sortable, paginated (5 per page)
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
| INV006 | Pending | Bank Transfer | $200.00 |
| INV007 | Paid | Credit Card | $300.00 |
| INV008 | Unpaid | PayPal | $400.00 |
| INV009 | Paid | Bank Transfer | $500.00 |
| INV010 | Pending | Credit Card | $275.00 |
Selectable rows + view options
| Name | Role | |
|---|---|---|
| Alice | Admin | |
| Bob | Editor |
Standalone column_header() helper
| Sortable column | Plain column |
|---|
Pagination#
Search results
Showing 21–30 of 97 results
First page
Last page
Few pages (no ellipsis)
With href pattern (anchor links)
Icons only (prev/next labels hidden)
Resizable#
Sidebar + Content
Three-column Layout
Explorer
Editor
Select a file from the explorer to view its contents here. This center panel occupies the majority of the available space.
Inspector
Properties and metadata for the selected item will appear in this panel.
Scroll Area#
Release tags
Commit log
Sidebar#
App shell (left, icon-collapsible)
Press Cmd/Ctrl + B to toggle, or click the menu button.
Item#
Item group — three variants
Default with icon media, Outline with image media, Muted title-only (sm).
New message from Jane
Hey — just a heads up that the design doc is ready for review.
Acme Corp launch brief
Shared folder · 12 files · updated 2h ago
Drafts (3)
With header / footer / separator
Build finished
kapable-api · blue slot · 00:42 elapsed
Tests passed
Aspect Ratio#
Common ratios
16:9
4:3
1:1
With image
Direction#
Writing direction
The HTML dir attribute cascades to all descendants — inputs, lists, and even scrollbars flip automatically.
dir="ltr"
Hello World
English flows left to right.
dir="rtl"
مرحبا بالعالم
تتدفق اللغة العربية من اليمين إلى اليسار.
Overlay
Modal and floating content layers
Dialog#
Alert Dialog#
Drawer#
Right (default)
Left (navigation)
Bottom (sheet with grab handle)
Scaled background (Vaul-style)
No close button (footer-only dismiss)
Sheet#
Right (default)
Popover#
Popover with Form (bottom-start)
Dimensions
Set width and height for the element.
Right-Center with header/title/description
Shortcut
Press ⌘K to open the command palette from anywhere.
Left-End, controlled open state
Controlled
This popover is rendered open via the `open` prop.
Tooltip#
Icon buttons with contextual tooltips — copy, roster, shortcut, destructive.
Align start / center / end (bottom placement)
Custom side_offset (emits data-side-offset for client positioning code)
Hover Card#
HoverCard — Bottom / Center (default)
Crafting beautiful, accessible interfaces. Passionate about design systems.
HoverCard — Top / End
Crafting beautiful, accessible interfaces. Passionate about design systems.
HoverCard — Right / Start
Crafting beautiful, accessible interfaces. Passionate about design systems.
Toast#
Static toasts (inline)
Imperative (click to dispatch)
Title only
With description
With action slot
Sonner#
Position (pick one, then fire a toast)
Alert#
Subscription expiring
Renew by Apr 19 to keep unlimited builds and priority support. After expiry your workspace drops to the Free tier and projects over 3 will be archived.
Two-factor enabled
Backup codes were emailed to invoice@geldentech.ca. Store them somewhere safe — you'll need one if you lose access to your authenticator.
Destructive — API key revocation
Any services using this key will stop working immediately. This action cannot be undone — you'll need to issue a new key and redeploy.
Informational
The build pipeline will be paused for roughly 20 minutes. In-flight deploys will resume automatically once maintenance completes.
With action — deletion undo
It will be permanently deleted in 30 days. You can restore it from the Trash until then.
Composite
Multi-part components combining primitives
Button Group#
Text alignment toolbar
Editor toolbar — exactly one alignment active at a time. Click or use ← / → to switch.
Text formatting
Rich-text controls — each toggle independent (Bold currently on). Click any to flip.
View switcher
Project listing view — Grid / List / Board (Grid active).
Pager with separator
Sm-size pager — [Prev] [separator] [Next]. The separator is a vertical rule between buttons in a horizontal group.
Pager with text indicator
Non-interactive text cell — [Page 1 of 10] [Prev] [Next]. Useful for status read-outs inside toolbars.
Toggle#
Text Editor Toolbar
Default variant — formatting controls
Outline variant
Sizes
Disabled
Toggle Group#
Text alignment
Paragraph alignment in the document editor.
Text formatting
Bold, italic, underline, strikethrough — multi-select.
Calendar view
Switch between Day, Week, and Month layouts.
Input Group#
Input with $ prefix
Input with .com suffix
Input with https:// prefix and Go button
Email with @ prefix
Addon alignment — prefix text, suffix button, block-end hint
Uses `addon`, `text`, `button`, and `input_el` helpers. Prefix text is InlineStart, Go is InlineEnd, hint wraps below the row via BlockEnd.
Input Otp#
Verify your email
We sent a code to sofia@example.com
Enter PIN
Your transaction PIN
Confirms payments over $100. Never share this PIN.
2FA locked
Too many failed attempts. Try again in 15 minutes.
Redeem coupon
Alphanumeric code — pattern: DigitsAndChars.
Wrong code
aria_invalid: true — announces failure to screen readers.
Radio Group#
Vertical (default)
Horizontal
Disabled
Required + Comfortable
required: true propagates to each input; variant: Comfortable opens spacing.
Compact
variant: Compact — tighter rows for admin/settings panels.
Calendar#
Check-in
Pick a check-in date — earliest arrival is today (Apr 16).
Departure
Departure must be after check-in — min Apr 21, max 60 days out.
Disabled weekends
Business-day picking — window locked to the Mon–Fri work week of Apr 20–24.
Carousel#
Featured products
What customers say
Chart#
Bar chart
Monthly Revenue (USD)
Line chart with area fill
Active Users Over Time
Custom color
Conversion Rate by Month
Wide line chart
Pageviews Trend (6 months)
Accessibility layer (emits data-accessibility-layer)
Sessions (a11y layer on)
Date Picker#
No selection (placeholder)
With selected date
Disabled
Custom format + range mode