Input

Input is a primitive single-line text input component that accepts standard HTML attributes and let users enter and edit text.

Source

View source code

Issues

Report an issue

Package

@rootui/input

Reference

React Aria docs

Preview

variant

size

placeholder

isDisabled

1<m placeholder="type here..." />

1<Input />

Package

Shadcn CLI

Manual

Note

Please ensure your local environment is fully configured as instructed in the getting started guide.

npm

yarn

pnpm

bun

npm install @rootui/input

1import { Input } from "@rootui/input";
2
3export default function Page() {
4  return (
5    <Input />
6  )
7}

See the React Aria documentation for more information.

Prop	Type	Default
`variant`	`'filled' \| 'outlined' \| 'transparent'`	`'filled'`

`size`	`'sm' \| 'md' \| 'lg'`	`'md'`

`enterKeyHint`	`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`	`-`
An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards.
`type`	`'text' \| 'search' \| 'url' \| 'tel' \| 'email' \| 'password' \| string & {}`	`'text'`
The type of input to render.
`inputMode`	`'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search'`	`-`
Hints at the type of data that might be entered by the user while editing the element or its contents.
`autoCorrect`	`string`	`-`
An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide.
`spellCheck`	`string`	`-`
An enumerated attribute that defines whether the element may be checked for spelling errors.
`isDisabled`	`boolean`	`false`
Whether the button is disabled.
`value`	`string`	`-`
The current value (controlled).
`defaultValue`	`string`	`-`
The default value (uncontrolled).
`onChange`	`(value: T) => void`	`-`
Handler that is called when the value changes.

Attribute	Description
`data-disabled`	Whether the input is disabled.
`data-invalid`	Whether the value is invalid.
`data-readonly`	Whether the input is read only.
`data-required`	Whether the input is required.