Skip to main content

Input

Quick start​

Here's a quick start guide to get started with the input component

Importing Component​

import { Input } from "@hover-design/react";

Code Snippets and Examples​

Input Default​
<div className="App">
  <Flex flexDirection="column" gap="6px">
    <Label htmlFor={"basic-input"}>Simple Input</Label>
    <Input id="basic-input" placeholder="placeholder" />
  </Flex>
</div>
Input Success​
<div className="App">
  <Input statusBorder={"hsla(145, 63%, 42%, 1)"} />
</div>
Input Warning​
<div className="App">
  <Input statusBorder={"hsla(45, 74%, 56%, 1)"} />
</div>
Input Error​
<div className="App">
  <Input statusBorder={"hsla(0, 79%, 63%, 1)"} />
</div>
Input with Icon (right alligned)​
<div className="App">
  <Input Icon={<TwitterIconSvg />} />
</div>
Input with Icon (left alligned)​
<div className="App">
  <Input Icon={<TwitterIconSvg />} iconPosition="left" />
</div>