Form Elements

Basic Form Elements

Sheet Subtitle

Text

Password

Textarea

Url

Tel

Number

Range

Label without For Attribute

Text

Checkboxes and Radios

Select Element

Regular Select Element

A Div Styled Like a Select Element

This is all show

Select Element with Size 5

Select Element with Size 10

Select Element with Multiple Select Options

File Upload

Disabled Inputs

Add class disabled on the label to match the opacity to disabled input.

Text Input

Password Input

Textarea

Select Element

Select Element with Multiple Select Options

Disabled Fieldset

Read Only States

Text Input (Read Only)

Read Only Plaintext

Textarea (Read Only)

Plunger pot, extra siphon latte, as americano aromatic roast cultivar cup cup frappuccino. To go, strong, half and half foam single origin, cultivar affogato black grounds shop ut plunger pot. Con panna aroma, pumpkin spice to go, wings, aromatic single shot, aged single shot to go extraction java. Percolator americano at cultivar grinder est java percolator plunger pot shop con panna.

Form Element Sizes

Small text input

Normal text input

Large text input

Form Group

First Name

Last Name

Address 1

Address 2

Form Group Autofit

Equally spaced form inputs based on the number of items inside .form-group-autofit. Each input and label group should be wrapped inside .form-group-item. form-group-autofit stacks all inputs at max-width: 575px (breakpoint sm).

To set a maximum width on a .form-group-item use max-width: 200px;.

To make a .form-group-item shrink to the size of its content add .form-group-item-shrink. This component should only be used for static content, such as labels or buttons. This component doesn't work well with dynamically added content, such as form helper text, use the max-width method above instead.

Form Group Autofit doesn't support label's with long text that breaks to new lines or multiple new lines above the input.

Form Inline Autofit

Select Element

First Name

Last Name

Input Group

.00

Plunger pot, extra siphon latte, as americano aromatic roast cultivar cup cup frappuccino.

City

State ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

Zip Code

Plunger pot, extra siphon latte, as americano aromatic roast cultivar cup cup frappuccino.

Donation

.00

Clear

Form Group Autofit (Horizontal Form)

Create horizontal forms by placing each input inside form-group-item and label inside form-group-item form-group-item-label form-group-item-shrink and set a min-width on .form-group-item-label.

Form Inline

It's recommended to use .form-group-autofit instead. This Bootstrap 4 component isn't supported by Clay and is here only for documentation purposes.

Form Inline

Clay CSS v3.9.0

Form Elements

Basic Form Elements

Sheet Subtitle

Label without For Attribute

Checkboxes and Radios

Checkboxes

Radio Buttons

Select Element

File Upload

Disabled Inputs

Disabled Fieldset

Read Only States

Form Element Sizes

Form Group

Form Group Autofit

Form Group Autofit (Horizontal Form)

Form Inline