Components

Input

A text field, and the Field parts that label and describe it. Field wires the association itself, so no id strings are ever typed twice.

Sizes

md is the 28px control height shared with Button. lg is 36px, for a field that is the point of the screen rather than one cell in a dense row. The native size attribute is omitted from the type so dowel's visual scale can take the name.

tsx

import { Input } from "dowel";

<Input placeholder="Search components" />
<Input size="lg" placeholder="Search components" />

Field

A dowel Input inside Field.Root is associated with its label automatically. Field.Label omits htmlFor on purpose: a hand-written one would win over the generated association, which is the exact bug Field exists to remove.

Workspace name

Lowercase letters and dashes only.

tsx

import { Field, Input } from "dowel";

<Field.Root>
  <Field.Label>Workspace name</Field.Label>
  <Input placeholder="karnstack" />
  <Field.Description>
    Lowercase letters and dashes only.
  </Field.Description>
</Field.Root>

Validation

invalid sets aria-invalid and turns the border to the danger tone. It is applied conditionally, so leaving it unset never clobbers an aria-invalid that Field validation computed — add Field.Error with a match to surface the message Field computes.

tsx

<Field.Root>
  <Field.Label>Email</Field.Label>
  <Input invalid defaultValue="not-an-email" />
</Field.Root>

<Input disabled defaultValue="Read only" />