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.
Select inputs are most often used when a person must choose one option from a list (the exception is the multiple select). Consider using a select when you have more than 4 options to avoid clutter. Use Select as a placeholder unless there’s a default option.
Used when more complex information needs to be displayed in each option. Most typically used to display lists of people or organizations.
Used to select multiple options from a list, such as locations or tags.
The file uploader creates a region to drag and drop files to upload.
The upload queue displays a listing of files currently being uploaded and their progress. Each item contains the file name, a progress bar with percentage, and an “x” icon to cancel it. Once a file has completed the upload process it is removed from the queue and added to the files listing.
progressbarrole should be used along with the
aria-valuenowvalue should be updated dynamically to indicate progress to assistive devices.