Skip to content
comp0

comp0

Fields

Text Field

A shared field brain that connects a label, one text input, help, and errors.

When to use it: Use it for a one-line text value such as an email or name.

On this page
  1. Example
  2. Anatomy
  3. Step by step
  4. Keyboard
  5. Forms and accessibility
  6. API reference

Example

We only use this for receipts.
Text Field.tsxtsx
import { Description, Input, Label, TextField } from "@comp0/react";

export function Example() {
  return (
    <TextField as="div" className="flex max-w-xs flex-col gap-1.5">
      <Label className="text-base font-medium text-zinc-900 sm:text-sm dark:text-zinc-100">
        Email
      </Label>
      <Input
        className="w-full rounded border border-zinc-950/10 bg-white px-3 py-2.5 text-base text-zinc-950 outline-teal-600 focus-visible:outline-2 sm:py-2 sm:text-sm dark:border-white/10 dark:bg-zinc-900 dark:text-zinc-50 dark:outline-teal-400"
        name="email"
        type="email"
        placeholder="you@example.com"
      />
      <Description className="text-base text-zinc-600 sm:text-sm dark:text-zinc-400">
        We only use this for receipts.
      </Description>
    </TextField>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

A wireframe sketch of the assembled component. Each numbered marker matches a part in the list that follows.

  1. TextField

    Field provider; it owns no DOM unless as is supplied. Does not add a DOM element.

  2. Label

    Native label linked to the control. Owns a DOM element.

  3. Input

    Native single-line control that owns typing and submission. Owns a DOM element.

  4. Description / FieldErrorOptional

    Linked help or error text. Owns a DOM element.

Step by step

  1. 1

    Add the main part

    Start TextField with Label and Input.

  2. 2

    Add the supporting parts

    Add Description for a useful hint and FieldError for validation feedback.

  3. 3

    Make the behavior clear

    Give Input a native name so a form can send its value.

    Exampletsx
    <TextField><Label>Email</Label><Input name="email" /></TextField>

Keyboard

⇥
Moves to and from the native control.

Forms and accessibility

Input submits its native name and value.

Accessibility checklist

  • Use Label so the input has a clear name.
  • Put Description and FieldError near their field.
  • Do not rely on placeholder text as the only label.

API reference

Importtsx
import { Description, FieldError, Input, Label, TextField } from "@comp0/react";

TextField

Context only

Field provider; it owns no DOM unless as is supplied.

PropTypeDescription
valuestringControlled field value.
defaultValuestringInitial field value.
onChange(value: string) => voidReceives the next value.
disabled / invalid / requiredbooleanField-wide states shared with every part.

Label

DOM element

Native label linked to the control.

PropTypeDescription
htmlForstringAuto-wired to the field control; set it only to override.

Input

DOM element

Native single-line control that owns typing and submission.

PropTypeDescription
namestringSubmission name for the value.
typestringNative input type such as "email" or "password".
placeholderstringHint text; never a replacement for Label.
disabled / requiredbooleanOverride the field-wide state for this control.

Description / FieldError

OptionalDOM element

Linked help or error text.

PropTypeDescription
forceMountbooleanFieldError only: keep it rendered while the field is valid.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

[data-invalid]

on Input

The field is invalid.
[data-required]

on Input

The field is required.
[data-disabled]

on Input

The field is disabled.

Keep exploring