Expandable Input

A control with single line input field inside an expandable control.

Behaviours & States

Behaviour

The expandable Input has two states, open and closed. When closed, the expandable control consists of a title describing the input's function and either the current or default selection. The default varies depending on what options are available in the open state.

 

To open, put the control in focus and select. When the control opens, all content below is pushed further down to make room for the entire height of the control in its open state.

 

When the expandable control is open, the layout consists of a divider control (using the same title as closed state) and a single line input field under the divider. When closed the Expandable Input displays a title on the first line and a value on the second line.

States

The control can be one (1) of these states at any given time:

  • Closed - Normal
  • Closed - Focus
  • Open

 

Normal state is used when there has been no interaction with the button but it is available for use.

 

Focus is when the control is hovered over or has the focus from 5-way navigation.

 

Open is when the control has been opened and changes can be made to the picker.

Sizing

The width of the expandable control will automatically scale to fit the container.

Illustration

EXPANDABLE_INPUT.png

Navigation