Back to Style Guide

Forms & Inputs

Form components including text fields, selects, checkboxes, radios, switches, and more.

Text Fields

Outlined (Default)

We'll never share your email

Filled Variant

States

Please enter a valid email address

Sizes

Classes: fui-field, fui-field__input, fui-field__label, fui-field__helper | Variants: fui-field--filled, fui-field--error, fui-field--disabled | Sizes: fui-field--sm, fui-field--lg

Textarea

Max 500 characters
Classes: fui-field fui-field--textarea

Select

Classes: fui-select, fui-select__input, fui-select__label, fui-select__arrow

Checkbox

Classes: fui-checkbox, fui-checkbox__input, fui-checkbox__box, fui-checkbox__label

Radio Buttons

Vertical (default)
Horizontal
Classes: fui-radio-group, fui-radio, fui-radio__input, fui-radio__circle, fui-radio__label | Horizontal: fui-radio-group--horizontal

Switch / Toggle

Classes: fui-switch, fui-switch__input, fui-switch__track, fui-switch__label | Size: fui-switch--sm

Progress Indicators

Linear Progress

60% complete
Indeterminate

Circular Spinner

Classes: fui-progress, fui-progress__bar, fui-progress--indeterminate | fui-spinner, fui-spinner--sm, fui-spinner--lg

Badges & Tooltips

Badges

3
12

Tooltips

Badges: fui-badge, fui-badge__dot, fui-badge__count | Tooltips: fui-tooltip + data-tooltip attribute

Dividers, Avatars & Lists

Dividers

Content above

Content below

OR

Alternative content

Avatars

XS
SM
MD
LG
XL
Avatar Group
A
B
C
+2

List

  • Messages
    3 unread messages
  • Notifications
    5 new alerts
  • Settings
    Account preferences
Dividers: fui-divider, fui-divider--text | Avatars: fui-avatar, fui-avatar--md, fui-avatar--brand-1 | Lists: fui-list, fui-list__item, fui-list__icon, fui-list__content