Components

Select

A Select component allows users to pick a value from predefined options.

Select preview
Preview

Viewmodels

SelectVM

selectedItemIndexnumber

The index of the currently selected option in the Select.

optionslist

Contains a list of all available options in the Select.

controlArtboardartboard

Determines which artboard is used to visualize the component's state.

labelArtboardartboard

Determines which component is used for the Label.

labelstring

Specifies the localized strings that identifies the Select.

expandedboolean

Determines whether the Select has been expanded.

disabledboolean

Determines whether the Select is disabled.

hoverboolean

Indicates when the pointer overlaps with the Select.

directionEnum

Determines the Select's left-to-right alignment.

SelectOptionVM

controlArtboardartboard

Determines which artboard is used to visualize the component's state.

listIndexnumber

The index of the item.

itemPressedtrigger

Fires when the option has been chosen.

labelstring

Specifies the localized strings that identifies the option.

hoverboolean

Indicates when the pointer overlaps with the Select.

Hierarchical Structure

select_component

  • Root - The Root of the component.
    • Label - A Layout containing the Label Artboard.
      • A component instance of labelArtboard.
    • Control - A Layout containing the Control Artboard. Pointer functionality targets this layout.
      • A component instance of controlArtboard.
    • Options - A Layout containing the Select's options.
      • An Artboard List of options. The artboard in use is option_item.
  • IndexManager - A script that manages selectedItemIndex. If (loopItems = true), selectedItemIndex will loop around once it goes beyond the range of itemCount. If (loopItems = false), selectedItemIndex will be clamped within the bounds of itemCount.

Animations

This artboard contains a pair of animations used in a corresponding state machine layer.

  • Expanded
    • ExpandedTrue - Sets the visibility of Body to "Show." Plays if (expanded = true).
    • ExpandedFalse - Sets the visibility of Body to "Hide." Plays if (expanded = false).

select_arrow_control

  • Root - The Root of the component.
    • Value - A Layout containing an Artboard List.
      • An Artboard List of options. The artboard in use is option_display_item.
    • Icon - A Layout containing a group.
      • A group containing a shape. This prevents the shape from being distorted by its parent layout.
        • A shape representing an arrow.

Animations

This component contains three pairs of animations, each on its corresponding layer.

  • Disabled
    • DisabledTrue - Indicates the Select cannot be interacted with. Plays if (disabled = true).
    • DisabledFalse - Indicates the Select can be interacted with. Plays if (disabled = false).
  • Hover
    • HoverTrue - Indicates the pointer overlaps with the Select. Plays if (hover (SelectVM) = true) and (disabled (SelectVM) = false).
    • HoverFalse - Indicates the pointer does not overlap with the Select. Plays if (hover (SelectVM) = false).
  • Expanded
    • ExpandedTrue - Indicates the Select has been expanded. Plays if (expanded = true) and (disabled = false).
    • ExpandedFalse - Indicates the Select has not been expanded. Plays if (expanded = false).

text_label

  • Root - The Root of the component.
    • Text Layout - A Layout containing a Text Element.
      • Text - A text element. The value of its Text Run is bound to label (SelectVM).

option_item

  • Root - The Root of the component. Pointer functionality targets this Layout.
    • A component instance of controlArtboard (SelectOptionVM).

option_control

  • Root - The Root of the component.
    • Label - A Text Layout containing a Text Element.
      • Text - A text element. The value of its Text Run is bound to label (SelectOptionVM).
    • Icon - A Layout containing a group.
      • A group containing a shape. This prevents the shape from being distorted by its parent layout.
        • A shape representing a checkmark.

Animations

This component contains two pairs of animations, each on its corresponding layer.

  • SelectedIndex
    • SelectedIndexTrue - Indicates the option has been selected (selectedItemIndex = listIndex).
    • SelectedIndexFalse - Indicates the option has not been selected. Plays if (selectedItemIndex ≠ listIndex).
  • Hover
    • HoverTrue - Indicates the pointer overlaps with the Select. Plays if (hover (SelectOptionVM) = true).
    • HoverFalse - Indicates the pointer does not overlap with the Select. Plays if (hover (SelectOptionVM) = false).

option_display_item

  • Root - The Root of the component.
    • A component instance of text_option_label.

Animations

This artboard contains a pair of animations used in a corresponding state machine layer.

  • SelectedIndex
    • SelectedIndexTrue - Sets the visibility of Root to "Show." Plays if (selectedItemIndex = listIndex).
    • SelectedIndexFalse - Sets the visibility of Root to "Hide." Plays if (selectedItemIndex ≠ listIndex).

text_option_label

  • Root - The Root of the component.
    • Text Layout - A Layout containing a Text Element.
      • Text - A text element. The value of its Text Run is bound to label (SelectOptionVM).

Best Practices

  • If using this component on a platform without pointer input, you can increment or decrement selectedItemIndex to navigate between options. IndexManager was created to account for this use case.
Previous
Dropdown Menu
Next
Slider