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.

<Input type="text" required={true} placeholder="e.g. My hodl wallet" />
<Input type="text" required={true} placeholder="e.g. My hodl wallet" />
Copy code

Disabled input

<Input type="text" placeholder="e.g. My hodl wallet" required={true} disabled />
<Input type="text" placeholder="e.g. My hodl wallet" required={true} disabled />
Copy code

Optional input

Renders "(Optional)" next to the label.

<Input type="text" placeholder="e.g. My hodl wallet" />
<Input type="text" placeholder="e.g. My hodl wallet" />
Copy code

Text input types

Text input

Brings up a standard keyboard.

<Input
  type="text"
  required={true}
  placeholder="e.g. 0xAc03BB73b6a9e108530AFf4Df5077c2B3D481e5A"
/>
<Input
  type="text"
  required={true}
  placeholder="e.g. 0xAc03BB73b6a9e108530AFf4Df5077c2B3D481e5A"
/>
Copy code

Email input

Give you an @ on your keyboard.

<Input type="email" required={true} placeholder="you@example.com" />
<Input type="email" required={true} placeholder="you@example.com" />
Copy code

Password input

Masks any input.

<Input type="password" required={true} />
<Input type="password" required={true} />
Copy code

Search input

Allows users to quickly remove a search term.

<Input type="search" required={true} placeholder="e.g. Ethereum" />
<Input type="search" required={true} placeholder="e.g. Ethereum" />
Copy code

URL input

Brings up a url keyboard.

<Input type="url" required={true} placeholder="e.g. rimble.consensys.design" />
<Input type="url" required={true} placeholder="e.g. rimble.consensys.design" />
Copy code

Numerical input types

Number input

Opens the number page of your keyboard.

<Input type="number" required={true} placeholder="e.g. 123" />
<Input type="number" required={true} placeholder="e.g. 123" />
Copy code

Range input

See the Slider component to implement a range input type.

Telephone input

Brings up the telephone keyboard.

<Input type="tel" required={true} placeholder="e.g. +445575242519" />
<Input type="tel" required={true} placeholder="e.g. +445575242519" />
Copy code

Time input types

Date input

Displays HTML5 date picker.

<Input type="date" />
<Input type="date" />
Copy code

Time input

Displays HTML5 time picker.

<Input type="time" />
<Input type="time" />
Copy code

Month input

Displays HTML5 month picker.

<Input type="month" />
<Input type="month" />
Copy code

Week input

Displays HTML5 week picker.

<Input type="week" />
<Input type="week" />
Copy code

Other input types

File input

Displays HTML5 file picker.

Choose file…
<Input type="file" />
<Input type="file" />
Copy code

Props

'background'

1

'moon-gray'

1

1

'text'

'1rem'

'3rem'

'initial'

3

Styled System Props

Input uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styled System props.

Design guidelines

Some best practices for using Input in your product.

Don't use placeholders instead of labels

Related components

• Field
• Form validation