Input

A basic widget for getting the user input.

import { Input } from "rizzui";

Default

The default style of Input component.

Name

import { Input } from "rizzui";

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

Types

You can change the type of Input using type property.

Number

Name

Time

Date

Datetime Local

Month

Tel

Url

Week

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" />
    </>
  );
}

Variants

You can change the style of Input using variant property.

Outline

Flat

Text

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" />
    </>
  );
}

Sizes

You can change the sizes of Input using size property.

Small

Default

Large

Extra Large

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"
      />
    </>
  );
}

Rounded

You can change the border radius of Input using rounded property.

Rounded None

Rounded Small

Rounded Default

Rounded Large

Rounded pill

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"
      />
    </>
  );
}

Prefix & Suffix

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

Urlhttps://.com

Price.00

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"
      />
    </>
  );
}

With Quantity Counter

You can create quantity counter with Input.

Quantity Counter

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>
      }
    />
  );
}

With Character Counter

You can create character counter with Input.

Character Counter20/24

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"
    />
  );
}

With Clearable Button

You can create clearable Input using clearable property.

Name

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
    />
  );
}

Disabled

You can make disable Input using disabled property.

Name

import { Input } from "rizzui";

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

With Helper Text

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

Example: john@doe.io

import { Input } from "rizzui";

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

With Error Message

You can show the validation error message using error property.

Name

This field is required

import { Input } from "rizzui";

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

API Reference

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.

Props	Type	Description	Default
type	InputTypes	This Input component only support these types	`"text"`
label	`ReactNode`	Set field label	__
labelWeight	LabelWeight	Set label font weight	`"medium"`
variant	InputVariants	The variants of the component are:	`"outline"`
size	InputSizes	The size of the component. "sm" is equivalent to the dense input styling.	`"md"`
rounded	InputRounded	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	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 ...	__

Input Types

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

Label Weight

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

Input Variants

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

Input Sizes

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

Input Rounded

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

Input onClear

type InputOnclear = (event) => void;

Input

Default​

Types​

Variants​

Sizes​

Rounded​

Prefix & Suffix​

With Quantity Counter​

With Character Counter​

With Clearable Button​

Disabled​

With Helper Text​

With Error Message​

API Reference​

Input Props​

Input Types​

Label Weight​

Input Variants​

Input Sizes​

Input Rounded​

Input onClear​

Default

Types

Variants

Sizes

Rounded

Prefix & Suffix

With Quantity Counter

With Character Counter

With Clearable Button

Disabled

With Helper Text

With Error Message

API Reference

Input Props

Input Types

Label Weight

Input Variants

Input Sizes

Input Rounded

Input onClear