SmoothUI

Input

Last updated: October 14, 2026

Text input matching the Field control surface, powered by Base UI Input. Works standalone or inside Field.

Installation

npx smoothui-cli add input

Features

  • Same surface as FieldControl: h-9, border-input, 3px focus ring
  • Works standalone, or inside Field for label, description, and error wiring
  • Supports type, disabled, and aria-invalid styling
  • Controlled (value, onValueChange) or uncontrolled (defaultValue)

Input is Base UI only. Radix Primitives has no Input, so there is no Radix twin; the same file ships for every style.

States

Features

Search, disabled, and invalid inputs on their own. Always give a standalone input an aria-label or a visible <label>.

In Field

Inside Field, the label, description, and error are associated automatically (for/id, aria-describedby, aria-invalid).

Accessibility

ARIA Attributes

AttributeElementPurpose
aria-invalidInputMarks the input invalid and applies destructive styling
aria-describedbyInputLinks description and error text when used in Field
disabledInputDisables interaction and dims the control

Props

Powered by

base-ui
SmoothUI

Animated React components with smooth Motion animations. Drop-in shadcn/ui compatible.

© 2026 SmoothUI. Built by Eduardo Calvo.