TextField

MoleculeThrive, no shadcn equivalent

A single-line input with its label and one line of help or error.

components/molecules/text-field.tsx — Label + Input
Use it for
Every single-line field on a form.
Not for
Long text (TextAreaField) or a choice from a fixed list (Select, RadioGroup).

States

Default

This is how your name will show up in the system.

Required, with help
Focused

Enter a full email address.

Error
Disabled

Shown on your Kudo cards.

Filled

Shown on your Kudo cards.

Standard

Enter a full email address.

Small, error

Usage

import { TextField } from '@/components/molecules/text-field';

<TextField
  label="Full Name"
  name="fullName"
  autoComplete="name"
  required
  value={fullName}
  onChange={(event) => setFullName(event.target.value)}
  errorMessage={errors.fullName}
/>

Props

TextField props
PropTypeDefaultDescription
labelstring—Visible label, and the accessible name. Required.
helperTextstring—One line of help under the control, read with it.
errorMessagestring—Replaces the helper text, turns it red and marks the control aria-invalid.
requiredbooleanfalseAdds the asterisk and the native required state.
variant'outlined' | 'filled' | 'standard''outlined'Outlined draws a border; filled sits on a light tint; standard on a solid grey.
size'sm' | 'md''md'md is a 44px control, sm a 32px one with smaller type.
...restComponentProps<'input'> (no id)—value/onChange, name, type, placeholder, autoComplete… The id is generated.

Accessibility

  • The label is a real <label>; clicking it focuses the input.
  • Helper or error text is linked with aria-describedby, so it is read with the field.
  • The asterisk is hidden from screen readers; “required” is announced instead.