Input

Input is a text input field component with size variants, visual styles, and validation states.

Open in Storybook

Import

import { Input } from "@tosui/react";

Basic Usage

Preview

Code

<Input placeholder="Enter your name" />

Sizes

Preview

Code

<VStack gap={4}>
  <Input size="sm" placeholder="Small input" />
  <Input size="md" placeholder="Medium input (default)" />
  <Input size="lg" placeholder="Large input" />
</VStack>

Variants

Preview

Code

<VStack gap={4}>
  <Input variant="outline" placeholder="Outline variant (default)" />
  <Input variant="filled" placeholder="Filled variant" />
</VStack>

States

Preview

Code

<VStack gap={4}>
  <Input placeholder="Normal input" />
  <Input disabled placeholder="Disabled input" />
  <Input isInvalid placeholder="Invalid input" />
</VStack>

Input Types

Input supports all native HTML input types.

Preview

Code

<VStack gap={4}>
  <Input type="text" placeholder="Text input" />
  <Input type="email" placeholder="Email input" />
  <Input type="password" placeholder="Password input" />
  <Input type="number" placeholder="Number input" />
  <Input type="date" />
</VStack>

With FormField

Use with FormField for labels and validation messages.

<FormField
  label="Email"
  helperText="We'll never share your email"
  isRequired
>
  <Input type="email" placeholder="you@example.com" />
</FormField>

<FormField
  label="Username"
  errorMessage="Username is already taken"
  isInvalid
  isRequired
>
  <Input placeholder="Enter username" />
</FormField>

Props Reference

Prop	Type	Default	Description
size	"sm" | "md" | "lg"	"md"	Input size
variant	"outline" | "filled"	"outline"	Visual variant
disabled	boolean	false	Disable the input
isInvalid	boolean	false	Show invalid state
type	string	"text"	HTML input type
placeholder	string	-	Placeholder text

Input also accepts all native <input> attributes and Box styling props.

TypeScript

import { Input, type InputSize, type InputVariant, type InputProps, type InputOwnProps } from "@tosui/react";