loom muslin

Field Group

Label, control, hint, and error message in one consistent rhythm. The official home of the invalid state.

Previewlive — edit controls below

As printed on the invoice

Content

Labeled input with a hint

import { FieldGroup, Input } from "@loom/muslin-react";

<FieldGroup label="Customer" htmlFor="customer" hint="As printed on the invoice">
  <Input id="customer" placeholder="Jane Cooper" />
</FieldGroup>

Invalid with a message

import { FieldGroup, Input } from "@loom/muslin-react";

<FieldGroup label="Email" htmlFor="email" error="Enter a valid work email">
  <Input id="email" invalid defaultValue="not-an-email" />
</FieldGroup>