Inputs Reference ↓
Input Sizes
Input Types
Input Groups - prefix & suffix
https://
$
USD
@
.io
States
Must be unique within your workspace.
Please enter a valid email address.
Email is available - looking good!
Spaces in subdomain names may cause issues.
Email cannot be changed on this plan.
Select & Textarea - Sizes
Select & Textarea - States
Invalid value selected.
Looks good!
Are you sure?
Please correct the content.
Accepted!
Please review this text.
ui-textarea-no-resize disables the drag handle.
Checkbox & Radio - Sizes & States
Checkbox sizes
Radio sizes & states
Toggle - Sizes & States
Reference
Base
| Class | Values |
|---|---|
.ui-input | text / number / email / date … input |
.ui-input-group | prefix + suffix wrapper |
.ui-input-prefix | prepended icon or text |
.ui-input-suffix | appended icon or text |
.ui-select | styled <select> |
.ui-textarea | styled <textarea> |
.ui-checkbox | styled checkbox |
.ui-radio | styled radio |
.ui-toggle | toggle switch |
aria-invalid | red error state on any field |
Modifiers
| Class | Values |
|---|---|
.ui-input@* | xs, s, m, l, xl |
.ui-select@* | xs, s, m, l, xl |
.ui-textarea@* | xs, s, m, l, xl |
.ui-toggle@* | xs, s, m, l, xl |
Options
| Class | Values |
|---|---|
disabled | muted disabled state |