Forms

Always use fieldset tag for grouping checkboxes and radios, native fieldset tag has an additional benefits.

# Basic form

If you need multiline label beside checkbox (or radio) use the additional span tag

Text field

Select

Textarea

Checkboxes

Checked by default first checkbox

Second checkbox

Radio buttons

First radio

Fusce commodo aliquam arcu. Pellentesque egestas, neque sit amet convallis pulvinar,
justo nulla eleifend augue, ac auctor orci leo non est. Praesent turpis. Suspendisse faucibus,
nunc et pellentesque egestas, lacus ante convallis tellus, vitaeiaculis lacus elit id tortor.

Attachments

# Form divided by columns

Add class .grid to the form and use standard grid columns as wrapper for fields.

First name

Options

Checkboxes

Checked by default first checkbox

Second checkbox

# Grouping fields

Use class .fieldset-group for grouping sets of fields and display them inline.

# Disabling fields

Use disabled attribute on tag fieldset to disable group of fields.

To disable single elements just do it in classic way by using attribute readonly or disabled

# Form validation

Validation for group of fields

# Pure CSS pretty checkboxes and radios

Just add only one class for input input class="mate-input", put the input inside label if you want.

# Elegant input file with only one line (inline) of JavaScript!

Important: Input file must be placed inside form and then in label tag!

Single file

Multiple files

Select several files to see effect