FieldError

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

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

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

<input type="email" required aria-describedby={handle.id} />
<FieldError hidden={!errors.email}>{errors.email}</FieldError>

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">.