Skip to main content

Input

A basic widget for getting the user input.

import { Input } from 'rizzui/input';

Default​

The default style of Input component.

import { Input } from 'rizzui/input';

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

Types​

You can change the type of Input using type property.

import { Input } from 'rizzui/input';

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.

import { Input } from 'rizzui/input';

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.

import { Input } from 'rizzui/input';

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

Prefix & Suffix​

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

import { Input } from 'rizzui/input';
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.

'use client';

import { useState } from 'react';
import { Input } from 'rizzui/input';
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.

'use client';

import { useState } from 'react';
import { Input } from 'rizzui/input';

export default function App() {
  const MAXLENGTH = 24;
  const [state, setState] = 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.

'use client';

import { useState } from 'react';
import { Input } from 'rizzui/input';

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 disabled Input using disabled property.

import { Input } from 'rizzui/input';

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/input';

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.

import { Input } from 'rizzui/input';

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.

PropsTypeDescriptionDefault
typeInputTypesThis Input component only supports these types"text"
labelReactNodeSet field label__
labelWeightLabelWeightSet label font weight"medium"
variantInputVariantsThe variants of the component are:"outline"
sizeInputSizesThe size of the component. "sm" is equivalent to the dense input styling."md"
placeholderstringSet input placeholder text__
disabledbooleanWhether the input is disabled or not__
clearablebooleanAdd clearable option__
onClearInputOnClearCallback function called when the clear button is clicked__
prefixReactNodeThe prefix is designed 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)__
suffixReactNodeThe suffix is designed 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)__
helperTextReactNodeAdd helper text. Can be a string or a React component__
errorstringShow error message using this prop__
labelClassNamestringOverride default CSS style of label__
inputClassNamestringOverride default CSS style of input__
prefixClassNamestringOverride default CSS style of prefix__
suffixClassNamestringOverride default CSS style of suffix__
helperClassNamestringOverride default CSS style of helperText__
errorClassNamestringOverride default CSS style of error message__
classNamestringAdd custom classes to the root of the component__
refRef<HTMLInputElement>__
...InputHTMLAttributesnative 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';

Input onClear​

type InputOnClear = (event) => void;