Input

The Input component is a text field used to get input from the user. It uses Ariakit's Input Component internally.

import {
  Input,
  InputBase,
  InputPrefix,
  InputSuffix,
  InputWrapper,
} from "@adaptui/react-tailwind";

💡

A complex component that supports customization as per the composition guide.

Usage

<Input placeholder="Search" />

<Input placeholder="Search" />

Disabled

Invalid

Input Variants

Variants can be set using the variant prop. The default variant is outline. The available variants are: outline subtle underline & ghost

import { Input } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Input placeholder="Search" size="md" variant="outline" />
      <Input placeholder="Search" size="md" variant="subtle" />
      <Input placeholder="Search" size="md" variant="underline" />
      <Input placeholder="Search" size="md" variant="ghost" />
    </div>
  );
};

import { Input } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Input placeholder="Search" size="md" variant="outline" />
      <Input placeholder="Search" size="md" variant="subtle" />
      <Input placeholder="Search" size="md" variant="underline" />
      <Input placeholder="Search" size="md" variant="ghost" />
    </div>
  );
};

Input sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: sm md lg xl

import { Input } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Input placeholder="Search" size="sm" />
      <Input placeholder="Search" size="md" />
      <Input placeholder="Search" size="lg" />
      <Input placeholder="Search" size="xl" />
    </div>
  );
};

import { Input } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Input placeholder="Search" size="sm" />
      <Input placeholder="Search" size="md" />
      <Input placeholder="Search" size="lg" />
      <Input placeholder="Search" size="xl" />
    </div>
  );
};

Input Prefix/Suffix

You can append or prepend any element inside Input. By default we don't give spacing to the elements so you have to add spacing as needed.

Prefix is positioned absolutely within the input.

import { Input } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Input placeholder="Search" prefix={<SlotIcon />} />
      <Input placeholder="Search" suffix={<SlotIcon />} />
      <Input placeholder="Search" prefix={<SlotIcon />} suffix={<SlotIcon />} />
    </div>
  );
};

import { Input } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Input placeholder="Search" prefix={<SlotIcon />} />
      <Input placeholder="Search" suffix={<SlotIcon />} />
      <Input placeholder="Search" prefix={<SlotIcon />} suffix={<SlotIcon />} />
    </div>
  );
};

API Reference

Prop	Type	Default
`size`	`union`	`md`
`variant`	`union`	`outline`
`disabled`	`boolean`	`false`
`invalid`	`boolean`	`false`
`loading`	`boolean`	`false`
`prefix`	`React.ReactNode`	-
`suffix`	`React.ReactNode`	-
`spinner`	`React.ReactNode`	-

Last updated on July 27, 2022

Input

Imports#

Usage#

Input Variants#

Input sizes#

Input Prefix/Suffix#

API Reference#

Imports

Usage

Input Variants

Input sizes

Input Prefix/Suffix

API Reference