Forms

Field

Groups a label, control, help text and error.

@codeways/ui/field

Field

Groups a label, control, help text and error - design/04-components/forms.md.

default

Order number

Shown on the invoice under the invoice number.

required

Client name

optional

ReferenceOptional

invalid

Client email

Enter a valid email address.

Usage

import { Field, FieldLabel, FieldDescription, FieldError } from "@codeways/ui/field";
import { Input } from "@codeways/ui/input";

<Field invalid={Boolean(error)}>
  <FieldLabel htmlFor="po" optional>Order number</FieldLabel>
  <Input id="po" placeholder="PO-2291" aria-invalid={Boolean(error)} />
  <FieldDescription>Shown on the invoice under the invoice number.</FieldDescription>
  <FieldError>{error}</FieldError>
</Field>