Input

Use Input to build forms for your interface. This component provides a styled version of HTML <input>.
Import component
import { Input } from 'rimble-ui';

Examples

Different ways to use the Input component in your product. Note: these examples use the Field component to render associated labels.
Placeholder
Adds placeholder text to suggest the type of input expected.
Disabled input
Optional input
Renders "(Optional)" next to the label.

Text input types

Text input
Brings up a standard keyboard.
Email input
Give you an @ on your keyboard.
Password input
Masks any input.
Search input
Allows users to quickly remove a search term.
URL input
Brings up a url keyboard.

Numerical input types

Number input
Opens the number page of your keyboard.
Range input
See the Slider component to implement a range input type.
Telephone input
Brings up the telephone keyboard.

Time input types

Date input
Displays HTML5 date picker.
Time input
Displays HTML5 time picker.
Month input
Displays HTML5 month picker.
Week input
Displays HTML5 week picker.

Other input types

File input
Displays HTML5 file picker.

Props

Prop NameTypeIs RequiredDefault ValueDescription
themeobjectoptional
theme
coloroptional
'copyColor'
bgoptional
'white'
fontFamilyoptional
'sansSerif'
fontSizeoptional
'1rem'
lineHeightoptional
'solid'
heightoptional
'3rem'
poptional
3
borderoptional
1
borderColoroptional
'grey'
borderRadiusoptional
1
boxShadowoptional
1
Styled System Props
Input uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styed System props.

Design guidelines

Some best practices for using Input in your product.
Don't use placeholders instead of labels
Placeholders disappear as the user enters the field. This makes reviewing form entries difficult as you lose the explanation of the expected input.
Do
Don't
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute