PlumUI

Field

Wires a label, control, description and error together — ids and aria attributes included. Errors slide in, never jump.

Inputs

This is your public display name.

Playground

Tweak the props, the preview and the code follow.

This is your public display name.

Props
<Field>
  <FieldLabel>Username</FieldLabel>
  <FieldControl>
    <Input />
  </FieldControl>
  <FieldDescription>This is your public display name.</FieldDescription>
  <FieldError>This username is already taken.</FieldError>
</Field>

Installation

npx @plumsydev/plum-ui add field

Also pulls in label automatically.

Usage

import {
  Field,
  FieldControl,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
<Field invalid={!!error}>
  <FieldLabel>Email</FieldLabel>
  <FieldControl>
    <Input type="email" />
  </FieldControl>
  <FieldDescription>We’ll never share it.</FieldDescription>
  <FieldError>{error}</FieldError>
</Field>

Examples

Validation

Set invalid on the field and the error animates its height in. Try submitting empty.

We’ll send a magic link here.

Horizontal

Use orientation="horizontal" for settings rows.

Get a digest of activity every morning.

Product updates and launches.

API Reference

Field

The context provider. Generates ids for its parts.

PropTypeDefault
invalid

Marks the control as invalid and reveals FieldError.

booleanfalse
disabled

Disables the control and dims the field.

booleanfalse
orientation

Stack or row layout.

"vertical" | "horizontal""vertical"
id

Override the generated control id.

string—

FieldControl

A Slot that passes id, aria-describedby, aria-invalid and disabled to its child.

FieldError

Renders only when the field is invalid and it has children. Announced with role="alert".

FieldSet / FieldLegend / FieldGroup / FieldContent

Layout helpers for grouping fields.

PreviousExpandableNextFile Upload