- Text inputs
- Search inputs
- Date inputs
- Number inputs
- Checkbox inputs
- Radio inputs
- Textarea inputs
- Toggle inputs
- Help text
Text input fields are used for inputting text are the most common input in the control panel.
The search input is used for all search functionality on the control panel. Once a search term is entered, pressing
Return on the keyboard will return search results. Optionally the search input may include autocomplete.
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.
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.
Checkbox inputs are used when any number of choices or a single option can be turned on or off.
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.
Textarea is used for the entry of more than one line of text.
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.
Additional instructions or context that may appear beside or below the input field.