Inputs

Text inputs

Text input fields are used for inputting text are the most common input in the control panel.

inputs

Search inputs

The search input is used for all search functionality on the control panel. Once a search term is entered, pressing Enter or Return on the keyboard will return search results. Optionally the search input may include autocomplete.

inputs--search

Date inputs

The date input is used for selecting a specific date. When this field is active, a calendar selection will display below the field allowing a date to be selected which autofills the input with the selected date. Once a date is selected from the calendar, the calendar disappears.

date_input

Number inputs

The number input is used when numbers need to be selected. Pressing the arrow buttons within on the left or right of the input will increase the number in the field by 1.

inputs--number

Checkbox inputs

Checkbox inputs are used when any number of choices or a single option can be turned on or off.

inputs--checkbox

Radio inputs

Radio buttons are used when a choice is offered between a list of two or more mutually exclusive options. Use a radio over select when you want to expose all available options. If there are more than 4 options, a select is preferable to avoid clutter.

inputs--radio

Textarea inputs

Textarea is used for the entry of more than one line of text.

textareas

Toggle inputs

Used to allow for a switch between two mutually exclusive states, such as turning a feature on or off. These should be used for actions that occur immediately after the toggle switch is “flipped.” Autosave is generally expected with a toggle, so use a checkbox if autosave isn’t available.

inputs--toggle

Help text

Additional instructions or context that may appear beside or below the input field.

helper-text