Skip to content
Try free

FieldStatus

A status line under a field, beside FieldError: success, checking (with a spinner) or a warning, each with its own glyph, colour and hidden prefix, never colour alone.

  • Pro, mobile
  • Version 2.0.0-rc.1
  • APG pattern: Status message (role="status", a polite live region)

Examples

Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.

Default

Success: That username is available
Show the code

Default, code

<FieldStatus status="success">That username is available</FieldStatus>

Statuses

Success: That username is available
Checking: Checking that username
Warning: Similar to a name already in use
Show the code

Statuses, code

<div className="flex flex-col gap-stack-sm">
  <FieldStatus status="success">That username is available</FieldStatus>
  <FieldStatus status="checking">Checking that username</FieldStatus>
  <FieldStatus status="warning">Similar to a name already in use</FieldStatus>
</div>

With a field

Success: That username is available
Show the code

With a field, code

<div className="flex flex-col gap-stack-xs">
  <TextField label="Username" defaultValue="priya.shah" size="lg" aria-describedby="username-status" />
  <FieldStatus status="success" id="username-status">That username is available</FieldStatus>
</div>

Tokens

The 7 design tokens FieldStatus reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.

Show all 7 tokens
Tokens FieldStatus reads
TokenValue nowCSS variable
color.icon.default…--sd-color-icon-default
color.icon.success…--sd-color-icon-success
color.icon.warning…--sd-color-icon-warning
color.text.secondary…--sd-color-text-secondary
color.text.success…--sd-color-text-success
color.text.warning…--sd-color-text-warning
spacing.gap.sm…--sd-spacing-gap-sm

Install

Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.

Add it from the registry (Pro licence key)

npx shadcn@latest add @superduperui/field-status

Then import it

import { FieldStatus } from "@/components/ui/field-status"

Props

FieldStatus props
PropTypeWhat it does
statusrequired'success' | 'checking' | 'warning'success (a tick), checking (a spinner) or warning (a triangle). Errors are FieldError, not a status.
childrenrequiredReactNodeThe message, short and specific ("That username is available").
idstringPut this id in the field's aria-describedby so the status is read with the field.
classNamestring

When to use it

Use it for

  • Live checks while people type, such as a username being available
  • A warning that does not block submitting

Use something else for

  • Errors that block submitting: use FieldError (the field's errorMessage)
  • Messages about the whole page: use Alert

Accessibility

Screen readers announce "Success: That username is available" (announced politely when it changes).

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.3.2, 2.3.3.

Not interactive: density changes spacing only.

What your product still has to do

  • Put the status id in the field's aria-describedby
  • Debounce the check so the status does not change on every keystroke

This release’s test results

Test results for FieldStatus in this release
axe-core (WCAG A, AA, AAA and best practice)80 runs across every story, theme, density and width: 0 violations
Rendered text contrast130 text runs: 0 below 7:1, lowest 8.42:1
Target size2 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)0 focus stops in 0 browser engines: all pass

Manual passes with VoiceOver and NVDA haven’t been done yet.

In Figma

The Figma component is FieldStatus, with Status (Success, Checking, Warning). The Figma library isn’t published yet.

Figma to code: Status → status (Success = "success", Checking = "checking", Warning = "warning"); Message → children.