Input

A control for entering and editing a single line of text.

$bunx shadcn@latest add @nx-ui/input
Registry item
Installs withutils
Used byai-web-previewauth-loginauth-recoveryauth-signupcolor-pickerdata-tableewc-selectorinput-grouplocation-selectorsettingssidebartransfer-note

Basic

Pair an Input with a Label using a matching id. Uncontrolled by default.

Types

The native `type` prop is passed straight through — email, number, date and more all inherit the same styling.

With icons

Wrap an InputGroupInput in InputGroup to add leading or trailing icons and buttons.

States

Disabled dims and blocks interaction; aria-invalid draws the destructive ring for validation errors; a trailing spinner signals a pending check.

That permit has expired.

Composition: new movement form

Inputs inside Field/FieldLabel rows, used to capture a waste movement before it's dispatched.

Collecting from Hartfield Composting Site.

API reference

Exported parts and their props, extracted from the component source.

…extends React.ComponentProps<"input">