Ouds 1.0 – Formulaire // Checkbox

Variants

Divider

Icon

Description text

Description text

Description text

Layout

Default

Description text

A longer description text that can wrap to another line to show the behaviour

Also a longer description text, it will also wrap at some point depending on the component width

Reverse

Description text

Also a longer description text, it will also wrap at some point depending on the component width

Horizontal

Max width

Description text

Description text

Indeterminate

Here is the associated JavaScript to set a checkbox as indeterminate.

const checkbox = document.getElementById(‘checkboxIndeterminate’) checkbox.indeterminate = true

States

Disabled

Read only

Default readonly checkbox

Checked readonly checkbox

Indeterminate readonly checkbox

Invalid

Description text

Description text

Description text

Incompatible choices.

Horizontal

Please choose at least one.

With <ul>

  • Description text

  • Description text

You must choose one.

Unique

You must accept the terms and condition to proceed.

Fieldset <legend>

Checkboxes group example

Description text

Description text

Standalone