Text Input

Text fields. Free, MIT · Forms and input › Text

Single-line text field. className and style go to the field wrapper, every other prop (including ref, id, aria-*) to the native <input>. type="password" adds a show/hide toggle.

Installation

npx valyro-cli@latest add text-input

npx shadcn@latest add https://valyro.xyz/r/text-input.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { TextInput } from 'valyro-ui';

Props

Prop	Type	Default
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Field height and text size.
`leftIcon`	`ReactNode`		Icon inside the field, before the text.
`rightIcon`	`ReactNode`		Icon inside the field, after the text and the clear/password buttons.
`prefix`	`ReactNode`		Attached text before the input, e.g. "https://".
`suffix`	`ReactNode`		Attached text after the input, e.g. ".vercel.app".
`invalid`	`boolean`	`false`	Error border and aria-invalid on the input (an explicit `aria-invalid` wins).
`clearable`	`boolean`	`false`	Shows a clear button while the input has a value.
`labels`	`Partial<TextInputLabels>`		Accessible names of the clear and show/hide password buttons.

Related components

Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Select — Pick one option from a list
Multi Select — Pick several options
Combobox — Searchable select
Listbox — Option list on the page: one or several, Shift ranges
Chip Group — Chip group with icons: one or several options
Checkbox Tree — Checkbox tree: cascading, indeterminate state, keyboard
Checkbox — Checkboxes
Checkbox Group — Checkboxes under one label, hint, error and requirement

Previous: Tour · Next: Textarea · All Forms and input