DNS Record
Add this record at your provider: parts copied separately, checked with what was found.
- Data
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add dns-recordNo npm packages are needed beyond what Dowel already requires.
import { DnsRecord } from "@/components/ui/dns-record";Default
Checking
Mail
Without Zone
<DnsRecord>
| Prop | Type | Default |
|---|---|---|
name (required)The host, relative or fully qualified. | string | — |
type (required) | string | — |
value (required) | string | — |
checkedAt | Date | — |
foundWhat the check found instead, when it failed. The useful part. | string[] | — |
locale | string | — |
onCheck | () => void | — |
priority | number | — |
purposeWhat the record is for, in the reader's language: "Proves you own acme.com". | string | — |
status | DnsRecordStatus | "pending" |
ttl | number | string | — |
zoneThe zone the record belongs to. Enables the host to be shown both ways. | string | — |
children | ReactNode | — |
Plus every attribute of <section> except children.
The card is a region named by the record's type and purpose. Each part is a definition with its own copy button, named by the part it copies, so five Copy buttons are five different buttons. Verification status is a word in a polite live region, so the answer to a check arrives where it was asked for, and the card is aria-busy while checking. Copy results are announced in a separate region, present from the start, so a copy never replaces a check result mid-sentence; failure is announced with what to do instead. What the check found is a list, not a colour.
8/9
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — fails
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — passes
- No fixed widths — passes