[ @sdxc/ui ]

FieldError

A native form field's validation message, styled at a small size in the danger foreground color.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

View code

<form>
	<Label htmlFor="domain">Custom domain</Label>
	<Input
		id="domain"
		name="domain"
		defaultValue="https://app.acme"
		required
		aria-describedby="domain-hint domain-error"
		mix={[validate(CustomDomain)]}
	/>
	<Description id="domain-hint">
		Point a CNAME at edge.acme-hosting.com before you save this.
	</Description>
	<FieldError id="domain-error" hidden />

	<Label htmlFor="subdomain">Workspace subdomain</Label>
	<Input
		id="subdomain"
		name="subdomain"
		defaultValue="acme"
		aria-invalid="true"
		aria-describedby="subdomain-error"
	/>
	<FieldError id="subdomain-error">That subdomain is already taken.</FieldError>

	<Button type="submit">Save domains</Button>
</form>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui remix

import "@sdxc/ui/theme.css";

Usage

import { FieldError } from "@sdxc/ui";

Renders a field's validation message. id falls back to handle.id so a sibling aria-describedby can target it via data-field-error; pass hidden to keep it out of layout until the field is invalid.

Examples

From a submission's errors

Work emailEnter a full address, like sergio@acme.com.

View code

let errors = { email: "Enter a full address, like sergio@acme.com." };

<div mix={[vstack({ gap: 2, align: "stretch" })]}>
	<Label htmlFor="email">Work email</Label>
	<Input
		id="email"
		name="email"
		type="email"
		defaultValue="sergio@acme"
		required
		aria-invalid={errors.email ? "true" : undefined}
		aria-describedby="email-error"
	/>
	<FieldError id="email-error" hidden={!errors.email}>
		{errors.email}
	</FieldError>
</div>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Also accepts everything in TagProps<"span">.