Input

A wrapper for the html "input" element. Comes with a variety of validation styles and default styles that extend to other elements and components. These include: select, checkboxe and radio.

Implementation

import { Input } from "slipstream-ui";

const Example = () => <Input />;

Example

Example

<Input placeholder="First Name" type="text" name="firstName" />

Validation States

Example

<Input success />

<Input invalid />

<Input disabled />

Size

Example

<Input size="sm" />

<Input size="md" />

<Input size="lg" />

Rounded

Example

<Input rounded />

Right-To-Left (rtl)

Example

<Input rtl />

Props

Attribute	Type	Value	Default Value	Description
success	boolean	true/false		Green border surrounding input element
invalid	boolean	true/false		Red border surrounding input element
disabled	boolean	true/false		Disabled the input element from user interaction
rounded	boolean	true/false		Rounded out corners of input to become more circular in presentation
size	string	sm/md/lg	md	Incremental sizing of form elements including input, select, etc...
rtl	boolean	true/false		When true, sets element to direction of right-to-left (rtl)