Input and Textarea

A single line of text and a block of text that grows with its content, with the shared look of every text control.

Input is a text field of one line, Textarea one of several lines. Both take every attribute of their element (type, value, maxLength, autoComplete) and add only the look that every text control of the package shares: the fill, the border, focus and the error state. Put each in a Field, which gives it a label, a description and an error.

Single line, states, file and a growing textareaClient

Full source examples/ui/input.tsx

// apps/docs/examples/ui/input.tsx'use client';
import {useState} from 'react';
import {  Field,  FieldDescription,  FieldError,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';import {Input} from '@workspace/active-ui/components/primitives/input';import {Textarea} from '@workspace/active-ui/components/primitives/textarea';
const LIMIT = 280;
/** * Text input in its common forms, each inside a `Field` that labels it: a * single line, a disabled one, one in the error state, a file picker, and a * textarea that grows with its content up to the height you allow it. */export default function InputExample() {  const [note, setNote] = useState('');  return (    <div className="grid w-full max-w-md gap-6">      <Field>        <FieldLabel htmlFor="input-name">Scheme name</FieldLabel>        <Input id="input-name" placeholder="Pension scheme 2026" />      </Field>      <Field data-disabled>        <FieldLabel htmlFor="input-code">Scheme code</FieldLabel>        <Input id="input-code" defaultValue="PS-2026" disabled />        <FieldDescription>          Assigned when the scheme is created.        </FieldDescription>      </Field>      <Field data-invalid>        <FieldLabel htmlFor="input-email">Contact email</FieldLabel>        <Input          id="input-email"          type="email"          defaultValue="contact@"          aria-invalid          aria-describedby="input-email-error"        />        <FieldError id="input-email-error">          Enter a complete email address.        </FieldError>      </Field>      <Field>        <FieldLabel htmlFor="input-file">Attachment</FieldLabel>        <Input id="input-file" type="file" />      </Field>      <Field>        <FieldLabel htmlFor="input-note">Note</FieldLabel>        <Textarea          id="input-note"          value={note}          maxLength={LIMIT}          className="max-h-40"          onChange={(event) => setNote(event.target.value)}          aria-describedby="input-note-count"        />        <FieldDescription id="input-note-count">          {note.length} of {LIMIT} characters        </FieldDescription>      </Field>    </div>  );}

Usage#

TSX

import {  Field,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';import {Input} from '@workspace/active-ui/components/primitives/input';import {Textarea} from '@workspace/active-ui/components/primitives/textarea';
<Field>  <FieldLabel htmlFor="name">Name</FieldLabel>  <Input id="name" autoComplete="name" /></Field>;
<Textarea id="note" className="max-h-40" />;

States#

Error: aria-invalid on the control gives it the error border; a Field with data-invalid colours the label and shows the FieldError. Point aria-describedby at the error so that it is read with the field.
Disabled: disabled dims the control and removes it from the tab order and from pointer input. data-disabled on the Field dims the label as well.
Read-only: readOnly keeps the value selectable and in the tab order, for a value the reader may copy but not change.

Input types#

Input renders Base UI's Input, a native <input>: every type works. type="file" styles the file button to match. For a number or an amount, use NumberField, which reads the reader's notation; for a password, PasswordInput.

Textarea#

Textarea grows with its content (field-sizing: content) from a minimum height of 4rem. Limit the growth with a max-h-* class: past it, the text scrolls. Browsers without field-sizing keep the minimum height and let the reader resize it.

What your application provides#

A label for every control: a FieldLabel with htmlFor, or aria-label.
The value and its validation; the control only shows the state you pass.
autoComplete for personal data (name, email, street-address), so browsers can fill it.

Accessibility and keyboard#

Native controls: the browser handles typing, selection and the clipboard.
The focus ring appears on keyboard focus; the error border keeps its colour in focus.
The font size is 16px on small screens, so mobile browsers do not zoom in when the field is focused.

API#

Parts that take only their element’s attributes

Input: the attributes of a <input>, with className and ref.

Parts that take only their element’s attributes

Textarea: the attributes of a <textarea>, with className and ref.

Based on shadcn/ui

This page adapts the Input and Textarea documentation of shadcn/ui (MIT licence) to this package; see Third-party notices.