Input | Pol-ui - A beautiful and functional UI library for React and Next.js

Use the Input component from Pol-ui is a text input field that allows users to enter text. It can be used in forms, modals, and more.

Importation

Import the component from pol-ui to use the Tooltip element:

import { Input } from "pol-ui";

Default Input

import { Input } from "pol-ui";
export const InputComponent = () => {
  return <Input placeholder="pol@ui.com" />;
};

Props

Prop name	Type	Default	Description
color	Colors	"primary"	Optional prop to specify the color of the input.
size	string	"md"	Optional prop to specify the size of the input.
theme	InputTheme		Optional prop to change the theme of the input.
border	bool	false	Optional prop to add a border to the input.
label	string	null	Optional prop to add a label to the input.
labelPosition	string	"top"	Optional prop to specify the position of the label.
labelClassName	string	""	Optional prop to add additional classes to the label.
innerClassName	string	""	Optional prop to add additional classes to the inner input container.
leftComponent	ReactNode	null	Optional prop to add a component to the left of the input. Recommended to icons
rightComponent	ReactNode	null	Optional prop to add a component to the right of the input. Recommended to icons
helperText	ReactNode	null	Optional prop to provide helper text for the input.

💡

You can also provide any prop comming from the HTML input tag.

Examples

With integrated label

You can show a label directly in the Input component by passing the label prop.

Input with label

import { Input } from "pol-ui";
export const InputComponent = () => {
  return <Input placeholder="pol@ui.com" label="Email" />;
};

With label in the left

You can show a label directly in the Input component by setting the labelPosition prop to left.

Input with left label

import { Input } from "pol-ui";
export const InputComponent = () => {
  return <Input placeholder="pol@ui.com" labelPosition="left" />;
};

With left icon

You can show an icon directly in the Input component by setting the leftComponent prop to a JSX.Element.

Input with icon

import { Input } from "pol-ui";
export const InputComponent = () => {
  return (
    <Input placeholder="Username" leftComponent={<TbUser className="ml-1" />} />
  );
};

With a right icon

You can show an icon directly in the Input component by setting the rightComponent prop to a JSX.Element.

Input with icon in the right

import { Input } from "pol-ui";
export const InputComponent = () => {
  return (
    <Input placeholder="Username" leftComponent={<TbUser className="ml-1" />} />
  );
};

With Helper Text

Use the helperText prop to show a helper text below the input.

Input with icon in the right

import { Input } from "pol-ui";
export const InputComponent = () => {
  return <Input placeholder="pol@ui.com" helperText="Email" />;
};

All Colors

The Input component has all the default color options from the design system from Pol-ui specified in the Theme section.

All default color options

import { Input, ColorsEnum, Colors } from "pol-ui";
import {TbAt} from "react-icons/tb";
 
export const InputComponent = () => {
  return(<div className="grid grid-cols-2">
    <div className="flex flex-col gap-4 p-4 bg-secondary-50">
      {Object.keys(ColorsEnum).map(color => (
        <Input key={color} placeholder={color} color={color as Colors} rightComponent={<TbAt />} />
      ))}
    </div>
    <div className="dark flex flex-col gap-4 p-4 rounded-xl bg-secondary-900">
      {Object.keys(ColorsEnum).map(color => (
        <Input key={color} placeholder={color} color={color as Colors} rightComponent={<TbAt />} />
      ))}
    </div>
  </div>)
};

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface InputTheme {
  root: {
    base: string;
    labelPosition: {
      left: string;
      top: string;
    };
  };
  base: string;
  addon: string;
  label: string;
  field: {
    base: string;
    icons: {
      base: string;
      svg: string;
      left: string;
      right: string;
    };
    input: {
      base: string;
      sizes: MainSizesType;
      colors: ColorsType;
      label: {
        base: string;
      };
      border: IBoolean;
      withIcon: IBoolean;
      withRightIcon: IBoolean;
      withAddon: IBoolean;
      multiline: IBoolean;
    };
  };
}