TextField

Labeled text input built on React Aria's TextField. Unlike the compound components, this one is a single element: label, description, and errorMessage are props, and the component handles associating them with the input.

import { TextField } from "@pockets-ui/components"

Basic

description is help text shown under the input and referenced by aria-describedby, so screen readers announce it with the field.

EmailWe'll never share your email.

Code

import { TextField } from "@pockets-ui/components"

export default function TextFieldBasic() {
  return (
    <TextField
      label="Email"
      description="We'll never share your email."
      placeholder="you@example.com"
    />
  )
}

Invalid

isInvalid swaps the description for errorMessage. Keep both props — the field shows help text until validation fails, then the error.

EmailPlease enter a valid email address.

Code

import { TextField } from "@pockets-ui/components"

export default function TextFieldInvalid() {
  return (
    <TextField
      label="Email"
      isInvalid
      errorMessage="Please enter a valid email address."
      defaultValue="not-an-email"
    />
  )
}

Disabled

Code

import { TextField } from "@pockets-ui/components"

export default function TextFieldDisabled() {
  return (
    <TextField label="Email" isDisabled defaultValue="locked@example.com" />
  )
}

Sizes

Small

Medium

Large

Code

import { TextField } from "@pockets-ui/components"

export default function TextFieldSizes() {
  return (
    <>
      <TextField size="sm" label="Small" placeholder="sm" />
      <TextField size="md" label="Medium" placeholder="md" />
      <TextField size="lg" label="Large" placeholder="lg" />
    </>
  )
}