Input

Checkboxes allow the user to select one or more items from a set.

Import

import { Input } from "pier-ui";

Default Input

<Input />

With Label

Name

<Input placeholder="With Label"
label="Name"
type="text"
labelFor="test-id"
id="test-id">

With Floating Label

Floating Label

<Input floatingLabel={true} label="Floating Label" type="text" />

Variants

Outline

Filled

<Input
   variant="outline"
   placeholder="outline"
   label="Outline"
   type="text"
   width="100%"/>
 <Input
   variant="filled"
   placeholder="Filled"
   label="Filled"
   type="text"
   width="100%"/>

Colors

Color

<Input
  variant="outline"
  placeholder="Color"
  label="Color"
  type="text"
  color="F87656"
/>

Color

<Input
  variant="outline"
  placeholder="Color"
  label="Color"
  type="text"
  focusColor="F87656"
/>

Props

Prop	Description	Type	Default
`label`	label for the input	`string`
`floatingLabel`	floating label for the input	`boolean`	`false`
`className`	className for the component	`string`
`size`	Size of the component	`string`	`base`
`color`	Color of the component	`string`	`theme.colors.grey`
`focusColor`	focusColor of the input	`string`	`theme.colors.grey`
`disabled`		`boolean`	`false`
`required`		`boolean`	`false`
`readOnly`		`boolean`	`false`

Documentation

Input

Import

Default Input

With Label

With Floating Label

Variants

Colors

Props