Skip to main content

Input

A basic widget for getting the user input.

import { Input } from "rizzui";

Default

The default style of Input component.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

PropsTypeDescriptionDefault
typeInputTypesThis Input component only support 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"
roundedInputRoundedThe rounded variants are:"md"
placeholderstringSet input placeholder text__
disabledbooleanWhether the input is disabled or not__
clearablebooleanAdd clearable option__
onClearInputOnclearclear event__
prefixReactNodeThe 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)__
suffixReactNodeThe 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)__
helperTextReactNodeAdd helper text. It could be 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" | "xl";

Input Rounded

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

Input onClear

type InputOnclear = (event) => void;