Input

Single-line text field with some goodies built in.

This component is a wrapper around the native input element. It provides a consistent look and feel across browsers and devices, and includes some additional features like icons and labels.

<Input placeholder="Type something..." />

---

Props

Inherits all props from HTMLElement, including the following additional props:

• formSize
• iconLeft
• iconRight
• label
• onChange
• value

formSize

The size of the input. Defaults to md.

<Input formSize="small" />
<Input formSize="medium" />
<Input formSize="large" />

iconLeft

An icon to display on the left side of the input. Padding is automatically added.

<Input iconLeft="magnifying-glass" />

iconRight

An icon to display on the right side of the input. Padding is automatically added.

<Input iconRight="percent" />

label

The label for the input. Without an id prop, the label will not be clickable.

<Input label="Label" id="my-input" />

onChange

The change handler for the input.

import { useState } from "react";

function MyComponent() {
  const [val, setVal] = useState("");
  return <Input value={val} onChange={setVal} />;
}

value

The value of the input.

<Input value="Hello, World!" />