Skip to main content

Inputs

From single input controls like text boxes to full form patterns.

Text Input

Colors

Icons

Sizes

Input Groups

Inline

Fixed Width

Use .o-field--fixed to fix the width of the field without it breaking the layout of the group.

Stacked

Buttons

Rounded

Checkboxes and Radios

Place your checkboxes and radios within labels and append the .c-field--choice modifier class.

Fieldsets and Legends

Use .fieldset and .fieldset__legend classes to apply Blaze's styles to ensure consistent fieldset behaviours.

Disabled Fieldset

Disabling a fieldset will disable all controls within it and Blaze will apply the disabled styling.

Labels and Form Elements

Hints

.c-hint--static will make the hint visible at all times.

Forms

Blaze has no classes for forms, rather it relies on styling the child blocks of forms; fieldsets, legends, labels and fields.