Input

Ready

Single-line text entry.

Installation

$ npx @oratiq-js/ui add input

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import

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

Sizes

States

Every state is reachable from the same base — no separate error component.

default

filled

aria-invalid

disabled

readOnly

shape="pill"

Types

Native pickers follow the browser, not the page

The date field itself themes correctly — color-scheme is declared per theme, so its glyphs and segment highlight match. The calendar popup, however, is browser chrome: on desktop Chrome it renders in the browser's own theme and no site CSS can restyle it. For a fully themed calendar, use Date Picker, which renders its own popover.

Props

Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg" \| "xl"`	`"default"`	Control height and text size.
`shape`	`"rounded" \| "pill"`	`"rounded"`	Corner treatment.
`aria-invalid`	`boolean`	—	Switches to the destructive border and ring.

View source on GitHub → components/ui/input.tsx