Input

A flexible component to deliver the most common types of input fields

<Input id="default-input" placeholder="Input placeholder">
  Input
</Input>

<Input id="default-input" placeholder="Input placeholder">
  Input
</Input>

Prop name	Type	Default	Description
`className`	`string`	`null`	A custom className you would like to pass to the Component
`placeholder`	`string`	`null`	The placeholder text for the Input
`type`	`enum`	`'text'`	The type of input field
`children`	`union`	`Required`	The label text for the input
`id`	`string`	`Required`	The unique identifier for the Input

Types

<Input
  id="text-input"
  placeholder="Placeholder text"
  type="text"
>
  Text
</Input>

<Input
  id="text-input"
  placeholder="Placeholder text"
  type="text"
>
  Text
</Input>

<Input
  id="email-input"
  label="Input"
  placeholder="test@example.com"
  type="email"
>
  Email
</Input>

<Input
  id="email-input"
  label="Input"
  placeholder="test@example.com"
  type="email"
>
  Email
</Input>

<Input
  id="tel-input"
  label="Input"
  placeholder="867-5309"
  type="tel"
>
  Phone
</Input>

<Input
  id="tel-input"
  label="Input"
  placeholder="867-5309"
  type="tel"
>
  Phone
</Input>

<Input
  id="number-input"
  label="Input"
  placeholder="123456789"
  type="number"
>
  Number
</Input>

<Input
  id="number-input"
  label="Input"
  placeholder="123456789"
  type="number"
>
  Number
</Input>

<Input
  id="date-input"
  label="Input"
  placeholder="26/12/1984"
  type="date"
>
  Date
</Input>

<Input
  id="date-input"
  label="Input"
  placeholder="26/12/1984"
  type="date"
>
  Date
</Input>

<Input
  id="search-input"
  label="Input"
  placeholder="Search..."
  type="search"
>
  Search
</Input>

<Input
  id="search-input"
  label="Input"
  placeholder="Search..."
  type="search"
>
  Search
</Input>