We classify our inputs into two main categories Text-based and Clic-based.
Text-based inputs
As the name suggests, text-based inputs are those that receive typed data, such as names, phone numbers, passwords, dates, etc.
Text Field
A resizable text box for multiple lines of standard text.
Text Area
A resizable text box for multiple lines of standard text.
Rich Text Editor
The rich text editor (RTE) is a complex control for data input and editing.
It allows users to format the text and insert different types of elements within the text, such as hyperlinks or code blocks.
Date Picker
A component that allows users to select a single date or a range of dates.
Month Picker
A component that allows users to select a month.
Time Picker
A component that allows the user to select a specific time.
Time-Zone Picker
Time-zone pickers allow users to change the local time on a UI.
Single-Select Dropdown
A basic component that provides a list of options in a limited space.
Multi-Select Dropdown
A basic component that provides a list of options in a limited space.
Spin Button
A two-segment UI control increases or decreases the numeric value in a field incrementally.
Click-based inputs
Click-based inputs receive non-typed data, such as a click or a single key press like Enter or Space.
Star Rating
Simple component that visually shows a rating with the use of star shapes.
Toggle
A digital on/off switch that always has a default value and prompts users to choose between two mutually exclusive options. Toggles should also provide immediate results.
Checkbox
A basic element that can be marked as selected and can be used in a list to provide multiple selection options.
Radio Button
Radio buttons are UI elements that select one option from a list of mutually exclusive options.
Range Slider
An element that allows for selection of a value within a range.
Selector Card
Selector cards are used as a supercharged radio/checkbox input, the can hold icons and description to better explain the options the user is selecting.
Segmented Control
Segmented controls are used for changing the visualization of data.
Color Picker
A configurable interface for color selection.