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
c-choice-list multiple-nested-choice

Handlebars

Loading...

Handlebars

Loading...
c-choice-list single-choice with rich-choice-list
Loading...

Javascript

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.

Loading...

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.

Loading...
Loading...

c-choice-list inline

The inline modifier displays the options as inline elements.

Loading...

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.

Loading...

c-choice-list is-unresolved

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

Loading...
Loading...

c-choice-list has-error

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

Field is Required
Select at least one
Loading...