sunweb

Choice List

components choice list choice-list form elements

Definition


The choice list component let users make a choice in a given list of options. For every available option, Radio Button or Checkbox will be shown according if there is single or multiple eligible choices.

c-choice-list single-choice

Handlebars

Loading...
c-choice-list single-choice with large text

Handlebars

Loading...
c-choice-list single-choice with tooltip on label

Handlebars

Loading...

Javascript

Loading...
c-choice-list multiple-choice

Handlebars

Loading...
c-choice-list multiple-choice with large text

Handlebars

c-choice-list multiple-nested-choice

Handlebars

Loading...

Handlebars

Loading...

Modifiers


c-choice-list > c-choice-list--highlighted

The highlighted modifiers changes the color of the selected option, giving more clarity to the user about the marked option.

Handlebars

Loading...

Handlebars


Variants


c-choice-list boxed

The choice list has the "boxed" variant which displays the list items in a "boxed" style.
This variant also shows the selected option in a different color by default, so no modifier has to be applied to get this.

Handlebars

Loading...

Handlebars


c-choice-list inline

The inline modifier displays the options as inline elements.

Handlebars

Loading...

Handlebars


States


c-choice-list is-disabled

The disabled state blocks the users interaction and modifies the appearance to let them know that the component is not useful at this moment.

Handlebars

Loading...

Handlebars


c-choice-list is-unresolved

The unresolved state is used when options are not yet ready, and needs to be resolved asynchronously.

Handlebars

Loading...

Handlebars

Loading...

c-choice-list has-error

The error state let the user know that the filled information has an error.

Handlebars

Field is Required
Select at least one
Loading...