A simple input element that can be used to collect user input.

The Input component can be configured in multiple ways, allowing the developer to customize the look and feel of the component, by specifying properties such as size and radius or by adding side icons.

import { Input } from '@rewind-ui/core';

function App() {
  return (
    <Input />


Import the Input component using the following import statement.

import { Input } from '@rewind-ui/core';


The Input component supports three tones: light, solid and transparent.

  <Input tone="light" placeholder="Light tone" />
  <Input tone="solid" placeholder="Solid tone" />
  <Input tone="transparent" placeholder="Transparent tone" />


The Input component supports the following colors: blue, purple, gray, dark and black.

The color property can be used to specify the color of the border and the ring on the focus state.

  <Input color="blue" placeholder="Blue color" />
  <Input color="purple" placeholder="Purple color" />
  <Input color="gray" placeholder="Gray color" />
  <Input color="dark" placeholder="Dark color" />
  <Input color="black" placeholder="Black color" />


The Input component supports four size options: xs, sm, md and lg.

  <Input size="xs" placeholder="Extra small" />
  <Input size="sm" placeholder="Small" />
  <Input size="md" placeholder="Medium" />
  <Input size="lg" placeholder="Large" />


The Input component supports the following radius options: none, sm, base, md, lg and full.

  <Input radius="none" placeholder="none" />
  <Input radius="sm" placeholder="sm" />
  <Input radius="base" placeholder="base" />
  <Input radius="md" placeholder="md" />
  <Input radius="lg" placeholder="lg" />
  <Input radius="full" placeholder="full" />


The Input component supports the following shadow options: none, sm, base and md.

  <Input shadow="none" placeholder="none" />
  <Input shadow="sm" placeholder="sm" />
  <Input shadow="base" placeholder="base" />
  <Input shadow="md" placeholder="md" />


The Input component supports the following validation options: none, invalid, valid and warning.

  <Input validation="none" placeholder="none" />
  <Input validation="invalid" placeholder="invalid" />
  <Input validation="valid" placeholder="valid" />
  <Input validation="warning" placeholder="warning" />


The Input component supports the following type options: color, datetime-local, date, email, file, number, password, range, search, tel, text and time.

  <Input type="color" placeholder="color" />
  <Input type="datetime-local" placeholder="datetime-local" />
  <Input type="date" placeholder="date" />
  <Input type="email" placeholder="email" />
  <Input type="file" placeholder="file" />
  <Input type="number" placeholder="number" />
  <Input type="password" placeholder="password" />
  <Input type="range" placeholder="range" />
  <Input type="search" placeholder="search" />
  <Input type="text" placeholder="text" />
  <Input type="time" placeholder="time" />
  <Input type="tel" placeholder="tel" />


Input component supports disabled and loading states.

  <Input disabled placeholder="Disabled..." />
  <Input loading placeholder="Loading..." />


You can add a ring to the Input by setting the withRing prop to true.

  <Input withRing={true} placeholder="With ring..." />
  <Input withRing={false} placeholder="Without ring..." />


You can add an icon to the Input by setting the leftIcon or rightIcon prop to a valid React element.

  <Input leftIcon="..." placeholder="Left icon..." />
  <Input rightIcon="..." placeholder="Right icon..." />
  <Input leftIcon="..." rightIcon="..." placeholder="Left and right icon..." />


The Input component supports the ref prop, which allows for obtaining a reference to the associated underlying HTML element.

import { useRef } from 'react';
import { Input } from '@rewind-ui/core';

function App() {
  const ref = useRef<HTMLInputElement>(null);
  return <Input ref={ref} />;

API Reference


colorInputColorSets the border and ring color on focus statedark
disabledbooleanDisables inputfalse
leftIconReactElementAdds the given icon to the left side of the inputundefined
loadingbooleanShows a loading spinner and disables the inputfalse
radiusInputRadiusSets the border radiusmd
rightIconReactElementAdds the given icon to the right side of the inputundefined
shadowInputShadowSets the shadow sizenone
sizeInputSizeSets the input sizemd
toneInputToneSets the input tonelight
typeInputTypeSets the input typetext
validationInputValidationSets the validation statenone
withRingbooleanShows a ring around the input on active statetrue


type InputColor = 'blue' | 'purple' | 'gray' | 'dark' | 'black';
type InputRadius = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'full';
type InputShadow = 'none' | 'sm' | 'base' | 'md';
type InputSize = 'xs' | 'sm' | 'md' | 'lg';
type InputTone = 'light' | 'solid' | 'transparent';
type InputType =
  | 'text'
  | 'number'
  | 'password'
  | 'file'
  | 'date'
  | 'time'
  | 'email'
  | 'tel'
  | 'search'
  | 'range'
  | 'datetime-local'
  | 'color';
type InputValidation = 'none' | 'invalid' | 'valid' | 'warning';