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

Email

Time

Date

Datetime Local

Month

Search

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

Search

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.

Email

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;