Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

List Option

v.1.0.0 | Saturn
Healthy
StorybookFigma

Component

Play with the component with our playground.

Anatomy

Foo

NameDescription

1

Selected option indicator
width
and
height
Fixed.

2

Left icon
Indicates that there is a multiple selection.

3

Label
Required
Describes the option.

4

Container
Required
width
and
height
Fluid (100% bounded by parent element)

5

Right icon
Icon can be shown to give user more information.

Status

Unselected

  • Displays the default option without user interaction.

    • Hover

  • Displays the status when the cursor is placed over the element to indicate that it is clickable.

    • Selected

  • Displays the option selected by the user.

    • Disabled

  • Indicates to the user that the option cannot be selected.

    • Loader

  • This state communicates a noninteractive component. An animated loader is displayed in order to inform the user that more information is being processed.

    • Keyboard focus

  • The entire container is clickable.

    • Behaviour

    Simple selection

  • In simple selection only one option can be selected from the list.

    • Multiple selection

  • When the list allows multiple options to be selected, a check will be included in the option.

    • Filling state

  • When the ListOptions is using in the InputSearch, only the words that the user types are bolded.

    • Options

    Several lines

  • The container can have several lines of text. The left icon is aligned to the top with the text and the check icon is aligned to the center with respect to the text.

    • Spacing

  • When the options are accompanied by a section title, they must have a spacing of 8px and a line separator.

    • Layout

    Without icon

  • By default the option will be displayed without icon.

    • With icon

  • May contain a decorative icon.

    • List OptionUsage
    List OptionCode API