Input

stable

Text input with label, hint, and error states

Data EntryInteractive/Storybook ↗

import { Input } from "@nodus/design-system"

Agent Name

Invalid InputThis field is required

Disabled

Loading demo…

Props

Prop	Type	Default	Description
`label`	`string`	—	Label displayed above the input
`state`	`"default" \| "error" \| "disabled"`	"default"	Visual state of the input
`hint`	`string`	—	Helper text displayed below the input

label

Type stringDefault —

Label displayed above the input

state

Type "default" | "error" | "disabled"Default "default"

Visual state of the input

hint

Type stringDefault —

Helper text displayed below the input

Auto-generates a stable id via useId and links the label with htmlFor — accessible label association is built-in.
When hint is provided it receives an id and is connected to the input via aria-describedby.
Error state sets aria-invalid="true" on the native input — screen readers announce the field as invalid.
Disabled state passes the disabled attribute to the native input, which prevents interaction and announces state to assistive technology.
Always provide a label or aria-label — inputs without a label are inaccessible.

Metadatadefaulterrordisabledsemantic type border input

MobileTouch Target

Inputs are full-width by default — works well on mobile. Font size must be ≥16px to prevent iOS auto-zoom on focus.

Design Rationale

This component was designed to express:

Labeled text field with validation and helper text

Multi-line text input with auto-resize support

Was this helpful?