Forms - Decidim Design Guide

HTML regular inputs

Only displays common types, full available list: date, datetime-local, email, month, number, password, search, tel, text, time, url, week

input type="date" input type="datetime_local" input type="number" input type="password" input type="text"

fieldset [legend] input type="checkbox" input type="checkbox" input type="checkbox"

fieldset [legend] input type="radio" input type="radio" input type="radio"

textarea select

Help texts

input type="date" Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos hic quos omnis vero aspernatur architecto! input type="datetime_local" Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos hic quos omnis vero aspernatur architecto! input type="number" Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos hic quos omnis vero aspernatur architecto! input type="password" Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos hic quos omnis vero aspernatur architecto! input type="text" Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos hic quos omnis vero aspernatur architecto!

fieldset [legend] Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos hic quos omnis vero aspernatur architecto! input type="checkbox" input type="checkbox" input type="checkbox"

fieldset [legend] Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos hic quos omnis vero aspernatur architecto! input type="radio" input type="radio" input type="radio"

textarea Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos hic quos omnis vero aspernatur architecto! select Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos hic quos omnis vero aspernatur architecto!

Disabled

input type="date" disabled input type="datetime_local" disabled input type="number" disabled input type="password" disabled input type="text" disabled

fieldset [legend] input type="checkbox" disabled input type="checkbox" disabled input type="checkbox" disabled

fieldset [legend] input type="radio" disabled input type="radio" disabled input type="radio" disabled

textarea disabled select disabled

Errors

Does not apply for select

input type="date" required

Lorem ipsum dolor sit amet.

input type="datetime_local" required

Lorem ipsum dolor sit amet.

input type="number" required

Lorem ipsum dolor sit amet.

input type="password" required

Lorem ipsum dolor sit amet.

input type="text" required

Lorem ipsum dolor sit amet.

fieldset [legend]

Lorem ipsum dolor sit amet.

input type="checkbox" input type="checkbox" input type="checkbox"

fieldset [legend]

Lorem ipsum dolor sit amet.

input type="radio" input type="radio" input type="radio"

textarea required

Lorem ipsum dolor sit amet.

Min/Max length

Only works for input type='text' and textarea

input type="text" maxlength="20" textarea maxlength="20" input type="text" minlength="5" maxlength="20" textarea minlength="5" maxlength="20"

Emojis

Only works for textarea

textarea data-input-emoji="true"

Multiselect

Multiselects are a javascript feature available thanks to an external library called Tom Select.

input type="text" class="js-tags-container" value="abc, 123"

This page comes from a legacy view. Content is outdated. Forms

HTML regular inputs

Help texts

Disabled

Errors

Min/Max length

Emojis

Multiselect

This page comes from a legacy view. Content is outdated.

Forms