Components

Input

Single-line text field built on React Aria for full accessibility. Sizes and demo sections are driven from config/design-system.config.ts.

Component Playground

Live instance - the controls read their options from the same config that drives the Variants section below.

Email address

This is a hint text to help user.

md

Controls

Size

Label

Placeholder

Hint

Default

Label, placeholder, and hint text - the anatomy of a complete input field.

Default

Email address

This is a hint text to help user.

States

All states: default, focused (click into it), disabled, error with hint text, and required.

Default / disabled / error / required

Default

Hint text.

Disabled

Hint text.

Error

This is an error message.

Required*

Hint text.

With icons

Pass any @untitledui/icons component as the icon prop to add a leading icon.

Leading icon

Password

Pass type="password" and a built-in show/hide toggle appears automatically - no extra prop needed.

Password

Must be at least 8 characters.

With tooltip

Use the tooltip prop to show a help tooltip on the trailing icon.

Tooltip

Company name

With shortcut

Use the shortcut prop to display a keyboard shortcut hint inside the field.

Shortcut

API key

Sizes

Size affects padding, font-size, and icon sizing.

Small / Medium / Large

Small

size='sm'

Medium

size='md'

Large

size='lg'

Input group

Attach prefix text or addon elements (dropdowns, buttons) to create compound inputs.

Prefix / leading addon

Website

https://

Include the full URL.

Company

Date input

A segmented date field - each part (day/month/year) is independently focusable and typeable, built on React Aria's DateField.

Date field

Date of birth

mmddyyyy

DD / MM / YYYY

Number input

Increment/decrement controls in two layouts: stacked vertical (default) or split horizontal.

Vertical / horizontal

Quantity

orientation='vertical' - default

Seats

orientation='horizontal'

Payment input

Auto-formats digits into groups of four and swaps the leading icon to match the detected card network (Visa, Mastercard, Amex, Discover, UnionPay).

Card number

We accept all major cards.

Tag input

Type and press Enter to add a tag; Backspace on an empty field to focus the last tag. Two layouts: tags inline with the field, or in a separate row beneath it.

Inline / outer

Skills (inline)

Design

Engineering

Press Enter to add.

Skills (outer)

File upload

Combines an InputGroup read-only field with a trailing Upload button that opens the native file picker.

File picker

Resume

PDF, DOC up to 10MB.

PIN input

One-time-passcode style entry - each digit is its own slot, auto-advancing focus as the user types.

4-digit code

Verification code

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Enter the 4-digit code sent to your phone.

API

Prop	Type	Default
`label`	`string`	`-`
`hint`	`ReactNode`	`-`
`placeholder`	`string`	`-`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`icon`	`ComponentType`	`-`
`tooltip`	`string`	`-`
`shortcut`	`string \| boolean`	`false`
`isInvalid`	`boolean`	`false`
`isDisabled`	`boolean`	`false`
`isRequired`	`boolean`	`false`
`hideRequiredIndicator`	`boolean`	`false`
`onClear`	`() => void`	`-`
`clearLabel`	`string`	`"Clear"`
`type`	`HTMLInputTypeAttribute`	`"text"`

Token anatomy

The visual decisions Untitled UI encodes into the input. All values come from DEW tokens in globals.css.

State	Ring token	Value
Default	`ring-primary`	`gray-300 (#D2D0CE)`
Focused	`ring-brand`	`brand-500 (#2A667C)`
Error	`ring-error_subtle`	`error-300 (#FDA29B)`
Error + focused	`ring-error`	`error-500 (#F04438)`
Disabled	`ring-primary + opacity-50`	`same, dimmed`

Usage

import { Input } from "@/components/base/input/input";

<Input
  label="Email address"
  placeholder="olivia@untitledui.com"
  hint="This is a hint text to help user."
/>

Figma

No linked Figma file yet - this component was pulled in via the Untitled UI CLI, not designed in Figma first.