Skip to content

Field

Base UI

Underline inputs with a mono label row for a counter or requirement. Errors say how to fix the problem.

10/32

Required

Keys are at least 12 characters. Paste the full key.

Install

$ npx shadcn@latest add https://spotcheckui.com/r/field.json

Also installs @base-ui/react.

Usage

import { Field, Input, Textarea } from "@/components/spotcheck/field"

<Field label="Dataset name" hint={`${name.length}/32`}>
  <Input value={name} maxLength={32} onChange={(event) => setName(event.target.value)} />
</Field>

<Field label="API key" hint="Required" error="Keys are at least 12 characters. Paste the full key.">
  <Input value={key} onChange={(event) => setKey(event.target.value)} />
</Field>

Setting error marks the field invalid and connects the message to the input for screen readers. Field also works around Select and Combobox.

Props

  • label * RequiredstringDefault —
  • hintReactNodeDefault —Printed opposite the label, for a counter or a requirement.
  • errorstringDefault —Says how to fix the problem. Setting it marks the field invalid.
  • children * RequiredReactNodeDefault —One Input, Textarea or Select.
  • classNamestringDefault —

Keyboard

Nothing to operate: this component displays information.

Reduced motion

Nothing here animates.