---
sidebar_position: 1
---

import { Input } from "rizzui";
import Paper from "@site/src/components/paper";
import InputCounter, { InputCharacterCounter, InputClearable } from "@site/src/components/input";
import {
  MagnifyingGlassIcon,
  ArrowRightIcon,
  CurrencyDollarIcon,
} from "@heroicons/react/24/outline";

# Input

A basic widget for getting the user input.

```tsx
"use client"; 

import { Input } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of **Input** component.

<Paper className="text-gray-950 block">
  <Input
    label="Name"
    placeholder="Enter your name"
  />
</Paper>

```tsx
"use client"; 

import { Input } from "rizzui";

export default function App() {
  return (
    <Input
      label="Name"
      placeholder="Enter your name"
    />
  );
}
```

<div className="mb-16" />

## Types

You can change the type of **Input** using [**type**](#input-types) property.

<Paper className="block">
  <div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-4 text-gray-950">
    <Input
      type="number"
      label="Number"
      placeholder="1234567890"
    />
    <Input
      type="text"
      label="Name"
      placeholder="Enter your Name"
    />
    <Input
      type="email"
      label="Email"
      placeholder="Your email"
    />
    <Input
      type="time"
      label="Time"
    />
    <Input
      type="date"
      label="Date"
    />
    <Input
      type="datetime-local"
      label="Datetime Local"
    />
    <Input
      type="month"
      label="Month"
    />
    <Input
      type="search"
      label="Search"
      placeholder="Search"
    />
    <Input
      type="tel"
      label="Tel"
      placeholder="Telephone"
    />
    <Input
      type="url"
      label="Url"
      placeholder="Url"
    />
    <Input
      type="week"
      label="Week"
    />
  </div>
</Paper>

```tsx
"use client"; 

import { Input } from "rizzui";

export default function App() {
  return (
    <>
      <Input
        type="number"
        label="Number"
        placeholder="1234567890"
      />
      <Input
        type="text"
        label="Name"
        placeholder="Enter your Name"
      />
      <Input
        type="email"
        label="Email"
        placeholder="Your email"
      />
      <Input
        type="time"
        label="Time"
      />
      <Input
        type="date"
        label="Date"
      />
      <Input
        type="datetime-local"
        label="Datetime Local"
      />
      <Input
        type="month"
        label="Month"
      />
      <Input
        type="search"
        label="Search"
        placeholder="Search"
      />
      <Input
        type="tel"
        label="Tel"
        placeholder="Telephone"
      />
      <Input
        type="url"
        label="Url"
        placeholder="Url"
      />
      <Input
        type="week"
        label="Week"
      />
    </>
  );
}
```

<div className="mb-16" />

## Variants

You can change the style of **Input** using [**variant**](#input-variants) property.

<Paper className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-3 gap-4 text-gray-950">
  <Input
    label="Outline"
    placeholder="Enter your name"
    variant="outline"
  />
  <Input
    label="Flat"
    placeholder="Enter your name"
    variant="flat"
  />
  <Input
    label="Text"
    placeholder="Enter your name"
    variant="text"
  />
</Paper>

```tsx
"use client"; 

import { Input } from "rizzui";

export default function App() {
  return (
    <>
      <Input
        label="Outline"
        placeholder="Enter your name"
        variant="outline"
      />
      <Input
        label="Flat"
        placeholder="Enter your name"
        variant="flat"
      />
      <Input
        label="Text"
        placeholder="Enter your name"
        variant="text"
      />
    </>
  );
}
```

<div className="mb-16" />

## Sizes

You can change the sizes of **Input** using [**size**](#input-sizes) property.

<Paper className="gap-4 justify-start items-start text-gray-950">
  <Input
    type="email"
    size="sm"
    label="Small"
    placeholder="Enter your email"
  />
  <Input
    type="email"
    label="Default"
    placeholder="Enter your email"
  />
  <Input
    type="email"
    size="lg"
    label="Large"
    placeholder="Enter your email"
  />
  <Input
    type="email"
    size="xl"
    label="Extra Large"
    placeholder="Enter your email"
  />
</Paper>

```tsx
"use client"; 

import { Input } from "rizzui";

export default function App() {
  return (
    <>
      <Input
        type="email"
        size="sm"
        label="Small"
        placeholder="Enter your email"
      />
      <Input
        type="email"
        label="Default"
        placeholder="Enter your email"
      />
      <Input
        type="email"
        size="lg"
        label="Large"
        placeholder="Enter your email"
      />
      <Input
        type="email"
        size="xl"
        label="Extra Large"
        placeholder="Enter your email"
      />
    </>
  );
}
```

<div className="mb-16" />

## Rounded

You can change the border radius of **Input** using [**rounded**](#input-rounded) property.

<Paper className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-4 text-gray-950">
  <Input
    label="Rounded None"
    placeholder="Enter your name"
    rounded="none"
  />
  <Input
    label="Rounded Small"
    placeholder="Enter your name"
    rounded="sm"
  />
  <Input
    label="Rounded Default"
    placeholder="Enter your name"
  />
  <Input
    label="Rounded Large"
    placeholder="Enter your name"
    rounded="lg"
  />
  <Input
    label="Rounded pill"
    placeholder="Enter your name"
    rounded="pill"
  />
</Paper>

```tsx
"use client"; 

import { Input } from "rizzui";

export default function App() {
  return (
    <>
      <Input
        label="Rounded Small"
        placeholder="Enter your name"
        variant="active"
        rounded="sm"
      />
      <Input
        label="Rounded Default"
        placeholder="Enter your name"
        variant="active"
      />
      <Input
        label="Rounded Large"
        placeholder="Enter your name"
        variant="active"
        rounded="lg"
      />
      <Input
        label="Rounded None"
        placeholder="Enter your name"
        variant="active"
        rounded="none"
      />
      <Input
        label="Rounded pill"
        placeholder="Enter your name"
        variant="active"
        rounded="pill"
      />
    </>
  );
}
```

<div className="mb-16" />

## Prefix & Suffix

You can add any text or icon to the **Input** component using **prefix**, **suffix** props.

<Paper className="grid grid-cols-1 gap-4 text-gray-950">
  <Input
    label="Url"
    prefix="https://"
    suffix=".com"
    placeholder="mysite"
  />
  <Input
    type="number"
    label="Price"
    prefix={<CurrencyDollarIcon className="w-5" />}
    suffix=".00"
    placeholder="Enter your price"
  />
  <Input
    label="Search"
    prefix={<MagnifyingGlassIcon className="w-4" />}
    suffix={<ArrowRightIcon className="w-4" />}
    placeholder="Icons as prefix and suffix"
  />
</Paper>

```tsx
"use client"; 

import { Input } from "rizzui";
import {
  MagnifyingGlassIcon,
  ArrowRightIcon,
  CurrencyDollarIcon,
} from "@heroicons/react/24/outline";

export default function App() {
  return (
    <>
      <Input
        label="Url"
        prefix="https://"
        suffix=".com"
        placeholder="mysite"
      />
      <Input
        type="number"
        label="Price"
        prefix={<CurrencyDollarIcon className="w-5" />}
        suffix=".00"
        placeholder="Enter your price"
      />
      <Input
        label="Search"
        prefix={<MagnifyingGlassIcon className="w-4" />}
        suffix={<ArrowRightIcon className="w-4" />}
        placeholder="Icons as prefix and suffix"
      />
    </>
  );
}
```

<div className="mb-16" />

## With Quantity Counter

You can create quantity counter with **Input**.

<Paper className="block text-gray-950">
  <InputCounter />
</Paper>

```tsx
"use client"; 

import { useState } from "react";
import { Input } from "rizzui";
import { ChevronUpIcon, ChevronDownIcon } from "@heroicons/react/24/outline";

export default function App() {
  const [state, setState] = useState(0);

  return (
    <Input
      label="Quantity Counter"
      type="number"
      min={0}
      step={1}
      value={state}
      onChange={(e) => setState(Number(e.target.value))}
      suffix={
        <div className="-mr-3.5 grid gap-[2px] p-0.5 rtl:-ml-3.5 rtl:-mr-0">
          <button
            type="button"
            className="rounded-[3px] bg-gray-100 py-0.5 px-1.5 hover:bg-gray-200 focus:bg-gray-200"
            onClick={() => setState((prevState) => prevState + 1)}
          >
            <ChevronUpIcon className="h-3 w-3" />
          </button>
          <button
            type="button"
            className="rounded-[3px] bg-gray-100 py-0.5 px-1.5 hover:bg-gray-200 focus:bg-gray-200"
            onClick={() => setState((prevState) => prevState - 1)}
          >
            <ChevronDownIcon className="h-3 w-3" />
          </button>
        </div>
      }
    />
  );
}
```

<div className="mb-16" />

## With Character Counter

You can create character counter with **Input**.

<Paper className="block text-gray-950">
  <InputCharacterCounter />
</Paper>

```tsx
"use client"; 

import { useState } from "react";
import { Input } from "rizzui";

export default function App() {
  const MAXLENGTH = 24;
  const [state, setState] = React.useState("Chat GPT is awesome!");

  return (
    <Input
      label="Character Counter"
      value={state}
      maxLength={MAXLENGTH}
      onChange={(e) => setState(() => e.target.value)}
      suffix={state.length + `/${MAXLENGTH}`}
      suffixClassName="opacity-70"
    />
  );
}
```

<div className="mb-16" />

## With Clearable Button

You can create clearable **Input** using **clearable** property.

<Paper className="block text-gray-950">
  <InputClearable
    label="Name"
    variant="active"
  />
</Paper>

```tsx
"use client"; 

import { useState } from "react";
import { Input } from "rizzui";

export default function App() {
  const [state, setState] = useState("This is Jhon.");

  return (
    <Input
      type="text"
      label="Name"
      value={state}
      placeholder="clearable ..."
      onChange={(e) => setState(e.target.value)}
      onClear={() => setState("")}
      clearable
    />
  );
}
```

<div className="mb-16" />

## Disabled

You can make disable **Input** using **disabled** property.

<Paper className="block text-gray-950">
  <Input
    type="text"
    label="Name"
    placeholder="Enter your name"
    disabled
  />
</Paper>

```tsx
"use client"; 

import { Input } from "rizzui";

export default function App() {
  return (
    <Input
      type="text"
      label="Name"
      placeholder="Enter your name"
      disabled
    />
  );
}
```

<div className="mb-16" />

## With Helper Text

You can show field helper message to the **Input** using **helperText** property.

<Paper className="block text-gray-950">
  <Input
    type="email"
    label="Email"
    placeholder="Your email"
    helperText="Example: john@doe.io"
  />
</Paper>

```tsx
"use client"; 

import { Input } from "rizzui";

export default function App() {
  return (
    <Input
      type="email"
      label="Email"
      placeholder="Enter your email"
      helperText="Example: john@doe.io"
    />
  );
}
```

<div className="mb-16" />

## With Error Message

You can show the validation error message using **error** property.

<Paper className="block text-gray-950">
  <Input
    label="Name"
    placeholder="Your Name"
    error="This field is required"
  />
</Paper>

```tsx
"use client"; 

import { Input } from "rizzui";

export default function App() {
  return (
    <Input
      label="Name"
      placeholder="Your Name"
      error="This field is required"
    />
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Input Props

Here is the API documentation of the Input component. And the rest of the props are the same as the original html input field.

<div className="overflow-x-auto">

|      Props      |               Type               |                                                                Description                                                                |   Default   |
| :-------------: | :------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :---------: |
|      type       |    [InputTypes](#input-types)    |                                               This Input component only support these types                                               |  `"text"`   |
|      label      |           `ReactNode`            |                                                              Set field label                                                              |    \_\_     |
|   labelWeight   |   [LabelWeight](#label-weight)   |                                                           Set label font weight                                                           | `"medium"`  |
|     variant     | [InputVariants](#input-variants) |                                                    The variants of the component are:                                                     | `"outline"` |
|      size       |    [InputSizes](#input-sizes)    |                                 The size of the component. "sm" is equivalent to the dense input styling.                                 |   `"md"`    |
|     rounded     |  [InputRounded](#input-rounded)  |                                                         The rounded variants are:                                                         |   `"md"`    |
|   placeholder   |             `string`             |                                                        Set input placeholder text                                                         |    \_\_     |
|    disabled     |            `boolean`             |                                                   Whether the input is disabled or not                                                    |    \_\_     |
|    clearable    |            `boolean`             |                                                           Add clearable option                                                            |    \_\_     |
|     onClear     |  [InputOnclear](#input-onclear)  |                                                                clear event                                                                |    \_\_     |
|     prefix      |           `ReactNode`            | The prefix is design for adding any icon or text on the Input field's start (it's a left icon for the `ltr` and right icon for the `rtl`) |    \_\_     |
|     suffix      |           `ReactNode`            |  The suffix is design for adding any icon or text on the Input field's end (it's a right icon for the `ltr` and left icon for the `rtl`)  |    \_\_     |
|   helperText    |           `ReactNode`            |                                         Add helper text. It could be string or a React component                                          |    \_\_     |
|      error      |             `string`             |                                                    Show error message using this prop                                                     |    \_\_     |
| labelClassName  |             `string`             |                                                    Override default CSS style of label                                                    |    \_\_     |
| inputClassName  |             `string`             |                                                    Override default CSS style of input                                                    |    \_\_     |
| prefixClassName |             `string`             |                                                   Override default CSS style of prefix                                                    |    \_\_     |
| suffixClassName |             `string`             |                                                   Override default CSS style of suffix                                                    |    \_\_     |
| helperClassName |             `string`             |                                                 Override default CSS style of helperText                                                  |    \_\_     |
| errorClassName  |             `string`             |                                                Override default CSS style of error message                                                |    \_\_     |
|    className    |             `string`             |                                              Add custom classes to the root of the component                                              |    \_\_     |
|       ref       |     `Ref<HTMLInputElement>`      |                                                                                                                                           |    \_\_     |
|       ...       |      `InputHTMLAttributes`       |                                  native props like **value**, **onChange**, **onFocus**, **onBlur** ...                                   |    \_\_     |

</div>

<div className="mb-10" />

### Input Types

```ts
type InputTypes =
  | "text"
  | "number"
  | "email"
  | "time"
  | "date"
  | "datetime-local"
  | "month"
  | "search"
  | "tel"
  | "url"
  | "week";
```

<div className="mb-10" />

### Label Weight

```ts
type LabelWeight = "normal" | "medium" | "semibold" | "bold";
```

<div className="mb-10" />

### Input Variants

```ts
type InputVariants = "outline" | "flat" | "text";
```

<div className="mb-10" />

### Input Sizes

```ts
type InputSizes = "sm" | "md" | "lg" | "xl";
```

<div className="mb-10" />

### Input Rounded

```ts
type InputRounded = "sm" | "md" | "lg" | "none" | "pill";
```

<div className="mb-10" />

### Input onClear

```ts
type InputOnclear = (event) => void;
```
