Loading…

Input

A single-line text field with size variants and native validation styling.

Forms
2 files
1 npm package
Accessibility notes

Playground

Project name

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add input

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
Sizes
Invalid
Disabled
Types
Floating Label
Floating Label States

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Input>

Prop	Type	Default
`inputSize`	`"sm" \| "md" \| "lg"`	`"md"`

Plus every attribute of <input>.

Accessibility

Always pair with a Label via htmlFor/id. Error state is driven by aria-invalid so assistive technology and styling stay in sync; describe the error with aria-describedby. FloatingLabelInput keeps a real <label for> as the accessible name whether resting or floated, and floats it with CSS alone.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.