Input — Design System

Examples

Basic entry

A named single-line value with a native input type.

Basic Input

import { Input } from "@phuctech/ui/components/input";

export function Example() {
  return <Input aria-label="Workspace name" placeholder="PhucTech workspace" />;
}

Density

Use sm, default, or lg to match the surrounding form rhythm.

Input size comparison

import { Input } from "@phuctech/ui/components/input";

export function Example() {
  return <Input aria-label="Workspace name" placeholder="PhucTech workspace" />;
}

Controlled value

Feature state owns the value when validation or submission needs it.

Type to test the controlled value.

Controlled Input value

import { Input } from "@phuctech/ui/components/input";

export function Example() {
  return <Input aria-label="Workspace name" placeholder="PhucTech workspace" />;
}

Uncontrolled value

Use defaultValue for a local native form value that does not need mirrored state.

Uncontrolled Input with default value

import { Input } from "@phuctech/ui/components/input";

export function Example() {
  return <Input aria-label="Workspace name" placeholder="PhucTech workspace" />;
}

Disabled, read-only, and invalid

State styling stays paired with a readable label and explanation.

Invalid, read-only, and disabled Input states

import { Input } from "@phuctech/ui/components/input";

export function Example() {
  return <Input aria-label="Workspace name" placeholder="PhucTech workspace" />;
}

When to use

Use Input for short values such as names, URLs, search terms, and identifiers. Use a textarea for multi-line text, a select for a constrained choice, and a specialized control only when the interaction requires it.

Usage

import { Input } from "@phuctech/ui/components/input";

export function Example() {
  return <Input aria-label="Workspace name" placeholder="PhucTech workspace" />;
}

For a form, wrap Input in Field. Use a controlled value when the surrounding feature needs to validate or submit it; use defaultValue for an uncontrolled form field.

States

Input states and guidance
State	Guidance
`disabled`	Use when the control cannot be changed in the current context; explain unexpected unavailability.
`readOnly`	Keep the value focusable and selectable when people may need to copy it.
`aria-invalid`	Set when validation has failed and connect the error through `aria-describedby`.
`size`	Use `sm`, `md`, or `lg` to match density; this is the visual size, not the native character-count hint.

API

Component API
Prop	Type	Default	Description	Constraints
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Visual control height and radius.	Choose the shared density; use Field for labels and errors.
`type`	`HTMLInputTypeAttribute`	`"text"`	Native input type.	Use the native type that matches the value.
`value / defaultValue`	`string \| number`	`—`	Controlled or uncontrolled value model.	Do not switch models after mount.
`disabled`	`boolean`	`false`	Prevents editing and interaction.	Do not use it to hide validation or required instructions.
`readOnly`	`boolean`	`false`	Prevents edits while keeping the value available.	Pair with a clear label.
`aria-invalid`	`boolean \| "true" \| "false"`	`—`	Communicates validation failure.	Connect the explanation with aria-describedby.

Tokens

Component tokens
Token	Role	Effective value	Usage
`--size-control-*`	Control height	`sm / md / lg`	The size prop maps to shared input density.
`--radius-*`	Boundary geometry	`md / lg`	Keeps inputs aligned with Button and other controls.
`--color-border-default`	Default boundary	`semantic border`	Provides the quiet boundary in both themes.
`--focus-ring-*`	Keyboard focus	`3px / 2px / semantic focus`	Makes focus visible without changing layout.

Accessibility

Every Input needs a visible label or an explicit accessible name.
Use native input types, autocomplete hints, and spellcheck settings when they improve completion.
Do not communicate an error through border color alone; provide text and connect it with aria-describedby.

Do and don’t

Use Field for the label and error, then keep the Input responsible for value and native control behavior.

Don’t

Use placeholder text as the only label, switch controlled/uncontrolled models, or hide the error message.

Field supplies the label, description, and error relationship.
Button handles submit and cancel actions around a form.
Accessibility documents the focus and validation contract.