Erstellen Sie ein Erinnerungsformular nach dem Vorbild von British Columbia mit echten semantischen Tokens, nativen React-Aria-Steuerelementen, bedingten Kontaktfeldern und vollständigem Validierungsverhalten.
Aktuelle Bibliothek und Design-Tokens für B.C. Designsystem und React
Wähle die gepflegte Implementierung
Das aktuelle B.C. Design System stellt React-Komponenten bereit, die auf React Aria aufbauen. In diesem Beispiel sind react-components 0.8.1 und die zugehörige Abhängigkeit design-tokens 5.0.0 festgelegt. Das ältere Repository für B.C. Web Components ist eine separate Legacy-Implementierung; durch seinen Import wird die aktuelle React-Bibliothek nicht nachgebildet. Vergleiche die Implementierung mit der Dokumentation, bevor du ein Beispiel übernimmst.
Die tatsächliche Schriftart einbinden
Die Komponenten erwarten den Familiennamen BC Sans mit Leerzeichen. Version 2.1.2 enthält css/BC_Sans.css; der alte Eintrag BCSans.css ist als veraltet gekennzeichnet und deklariert einen anderen Familiennamen. Ist BC Sans auf dem Entwicklungsrechner installiert, kann das einen fehlenden Schriftimport verschleiern. Dieses Beispiel enthält die veröffentlichte Schriftart, damit das Ergebnis nicht von einer lokalen Installation abhängt.
B.C. Designsystem – Semantische Farb- und Abstandsrollen
Vor der Wahl des Werts die Rolle prüfen
Primäre Schaltflächen verwenden die dunkelblaue Füllfarbe für primäre Schaltflächen; ergänzende Inhalte verwenden typography-color-secondary. Fehlermeldungen verwenden typography-color-danger. Die Tabelle hält die aktuellen Exportnamen von CSS fest. Der Name vermittelt eine stabile Bedeutung, selbst wenn ein zukünftiges Theme den zugrunde liegenden Wert ändert. Verwechsle die Farbe eines inaktiven Steuerelements nicht mit gewöhnlichem ergänzendem Text.
Abstände bewusst gestalten
Das Formular verwendet zwischen den Feldern einen Abstand von 24px und zwischen der Hauptaufgabe und der ergänzenden Erläuterung einen größeren Abstand von 48px. Diese Werte entsprechen dem Rhythmus der Bibliothek, während die zweispaltige Gesamtanordnung speziell für dieses Beispiel gestaltet wurde. Auf Mobilgeräten werden die Spalten zusammengeführt, ohne die Formularbeschriftungen zu verkleinern oder Erläuterungen in Tooltips umzuwandeln.
B.C. Designsystem – Bedingte Felder und beibehaltene Werte
Nur die gewählte Kontaktmethode validieren
Eine native RadioGroup steuert, ob das TextField für die E-Mail-Adresse oder die Telefonnummer angezeigt wird. Beim Wechsel der Methode bleiben beide Werte im Status von React erhalten, doch bei der Prüfung wird nur das ausgewählte Feld validiert. So bleiben nützliche Eingaben erhalten, ohne dass ein unsichtbares Feld die aktuelle Aufgabe blockiert.
Nützliche lokale Fehlermeldungen anzeigen
Das E-Mail-Feld prüft ein einfaches Adressformat; beim Telefonbeispiel sind mindestens zehn Ziffern erforderlich. Dabei handelt es sich ausdrücklich um Beispielregeln und nicht um eine vollständige internationale Kontaktvalidierung. Bei einer ungültigen Prüfung wird isInvalid gesetzt und eine feldspezifische errorMessage angezeigt. Für eine fehlende Zustimmung wird eine sichtbare Meldung ausgegeben; das erste ungültige Steuerelement erhält den Fokus.
B.C. Designsystem – Komponentenverträge von React Aria
Kontrollierte Werte und dokumentierte Handler verwenden
TextField erhält value und onChange; RadioGroup erhält value und onChange; Checkbox verwendet isSelected und onChange. Diese Handler erhalten die dokumentierten Werte und kein Browser-Ereignisobjekt, dessen Wert stets über event.target ausgelesen werden muss. Button verwendet type=submit und das submit-Ereignis des nativen Formulars, sodass die Tastatureingabe denselben Validierungspfad durchläuft.
Rückmeldungen bei der Prüfung synchron halten
B.C. Designsystem – Zugängliche Namen und responsives Layout
Beschriftungen, Beschreibungen und Fehlermeldungen miteinander verknüpfen
Die nativen Komponenten stellen ihre React-Aria-Beziehungen für Beschriftungen, Hilfetexte und Fehlermeldungen bereit. Die Anwendung muss weiterhin aussagekräftige Beschriftungen, eine klare Gruppenbeschreibung und verständliche Validierungstexte bereitstellen. Beim Testen solltest du auf sichtbare Radiobeschriftungen klicken und die Tastatur verwenden; das intern visuell ausgeblendete Eingabeelement ist nicht das sichtbare Ziel.
Ergänzende Hinweise vom Formular abgrenzen
Der danebenstehende Hinweis erläutert den lokalen Ablauf und enthält ein natives Details-Element mit Umsetzungskontext. Bei schmalen Ansichten folgt er in der Lesereihenfolge auf das Formular. Das Informationssymbol ist dekorativ, da die Überschrift die Bedeutung vermittelt. Für die Untersuchung der Komponenten sind weder ein offizielles B.C.-Logo noch ein Anspruch auf einen Regierungsdienst erforderlich.
B.C. Designsystem Vollständige Umsetzung React
Die geprüfte Vorlage nachbilden
Erstellen Sie ein Vite-Projekt React und installieren Sie die festgelegten Komponenten-, Token- und Schriftpakete. Verwenden Sie die bereitgestellten Dateien main.jsx und bc.css sowie ein Root-Mount-Element. Das Bundle umfasst natives Verhalten für Optionsfelder, Eingabefelder, Kontrollkästchen und Schaltflächen sowie die vollständige lokale Validierung und die Zustandsübergänge. Eine private API oder ein Zugangsschlüssel ist nicht erforderlich.
Installieren Sie die festgelegten Pakete und importieren Sie css/BC_Sans.css.
Speichern Sie main.jsx und bc.css und behalten Sie das Root-Mount-Element bei.
Senden Sie ein leeres Formular ab und korrigieren Sie anschließend das angezeigte Feld.
Wechseln Sie die Methode und prüfen Sie, ob der vorherige Wert erhalten bleibt.
Bedingte Validierung an die ausgewählte Methode anpassen
Die onChange-Handler von RadioGroup und TextField erhalten Werte, während Checkbox.onChange den ausgewählten booleschen Wert erhält. Speichern Sie diese Werte direkt, statt auf alle Komponenten einen allgemeinen event.target.value-Handler anzuwenden. Die sichtbaren Beschriftungen bleiben die Interaktionsziele, auch wenn React Aria ein natives Eingabeelement visuell ausblendet.
Wenn sich die Kontaktmethode ändert, behalten Sie beide Entwurfswerte bei, löschen Sie jedoch die alte Rückmeldung und validieren Sie nur die ausgewählte Methode. Verschieben Sie nach dem Absenden den Fokus auf das erste sichtbare ungültige Steuerelement. So kann eine Person die Kontaktoptionen vergleichen, ohne eine E-Mail-Adresse zu verlieren oder durch ein unsichtbares Telefonfeld blockiert zu werden. Die zehnstellige Telefonnummernregel im Beispiel gilt bewusst nur lokal und muss durch die tatsächlichen Anforderungen des Dienstes an internationale Telefonnummern ersetzt werden.
Validiert wird nur das ausgewählte Kontaktfeld.
Beim Bearbeiten einer Auswahl wird die alte Rückmeldung gelöscht.
Das Ergebnis behauptet nicht, dass eine Erinnerung geplant wurde.
B.C. Designsystem Komponentenbeispiele für das Design-System
main.jsx — vollständiges, funktionsfähiges Beispiel
Wählen Sie eine Kontaktpräferenz aus und prüfen Sie sie. Der folgende Quellcode enthält den vollständigen React-Eintrag einschließlich aller Zustände und der Validierung.
jsx
import React, { useState, useRef } from "react";
import { createRoot } from "react-dom/client";
import {
Button,
Radio,
RadioGroup,
TextField,
Checkbox,
} from "@bcgov/design-system-react-components";
import "@bcgov/bc-sans/css/BC_Sans.css";
import "./bc.css";
function App() {
const [method, setMethod] = useState("email"),
[email, setEmail] = useState(""),
[phone, setPhone] = useState(""),
[consent, setConsent] = useState(false),
[submitted, setSubmitted] = useState(false),
[result, setResult] = useState("");
const panel = useRef(null);
const invalidEmail = !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email),
invalidPhone = phone.replace(/\D/g, "").length < 10;
function change(fn, value) {
fn(value);
setResult("");
setSubmitted(false);
}
function review(e) {
e.preventDefault();
setSubmitted(true);
if ((method === "email" ? invalidEmail : invalidPhone) || !consent) {
requestAnimationFrame(() =>
panel.current
.querySelector(
'[aria-invalid="true"] input,input[aria-invalid="true"],input[type=checkbox]:not(:checked)',
)
?.focus(),
);
return;
}
setResult(
`Local preference ready: ${method === "email" ? "Email to " + email : "Phone call to " + phone}. No reminder has been scheduled.`,
);
}
return (
<main>
<header>
<div className="eyebrow">
SERVICE REMINDER / ORIGINAL APPLICATION STUDY
</div>
<h1>Choose how to hear from us</h1>
<p>
Set a sample reminder preference. Use fictional contact details in
this local example.
</p>
</header>
<div className="columns">
<form onSubmit={review} noValidate ref={panel}>
<RadioGroup
label="Contact method"
value={method}
onChange={(v) => change(setMethod, v)}
description="Choose one way to receive a reminder."
>
<Radio value="email">Email</Radio>
<Radio value="phone">Phone call</Radio>
</RadioGroup>
<div className="field">
{method === "email" ? (
<TextField
label="Email address"
type="email"
value={email}
onChange={(v) => change(setEmail, v)}
isRequired
isInvalid={submitted && invalidEmail}
errorMessage="Enter an email address in the format [email protected]."
description="Use a sample address, such as [email protected]."
/>
) : (
<TextField
label="Phone number"
type="tel"
value={phone}
onChange={(v) => change(setPhone, v)}
isRequired
isInvalid={submitted && invalidPhone}
errorMessage="Enter a phone number with at least 10 digits."
description="Sample validation only; a real service needs a jurisdiction-aware phone rule."
/>
)}
</div>
<div className="field">
<Checkbox
isSelected={consent}
onChange={(v) => change(setConsent, v)}
isInvalid={submitted && !consent}
>
I agree to use these details for this sample reminder
</Checkbox>
{submitted && !consent && (
<p className="error" role="alert">
Confirm the reminder preference before continuing.
</p>
)}
</div>
<Button type="submit" variant="primary">
Review preference
</Button>
<p className="result" role="status">
{result}
</p>
</form>
<aside>
<div className="status-mark" aria-hidden="true">
i
</div>
<h2>What happens next</h2>
<ol>
<li>Choose a contact method.</li>
<li>Review the sample details.</li>
<li>Connect a real notification service before scheduling.</li>
</ol>
<p>
This example keeps both fields while switching methods, but only
reviews the selected method.
</p>
<details>
<summary>About this specimen</summary>
<p>
Native B.C. React Aria components with BC Sans. The form is
original and is not an official government service.
</p>
</details>
</aside>
</div>
</main>
);
}
createRoot(document.getElementById("root")).render(<App />);
Speichern Sie die Datei neben main.jsx. Diese benutzerdefinierten Layoutregeln sind von der Token-Referenz der Bibliothek getrennt.
04
B.C. Designsystem Einrichtung des Agenten
Ausgangspunkt für die Implementierung
Das Beispiel mit den festgelegten nativen Komponenten wurde gebündelt und lokal im Browser geprüft. Das Beispiel verwendet ausschließlich den lokalen Anwendungszustand.
sh
npm create vite@latest bc-reminder -- --template react
cd bc-reminder
npm install
npm install @bcgov/[email protected] @bcgov/[email protected] @bcgov/[email protected]
# Replace src/main.jsx and add src/bc.css using the complete examples.
npm run dev
Ein Prompt für dein Projekt
Agenten-Prompt
Erstellen Sie das Erinnerungsformular mit den B.C.-React-Komponenten 0.8.1 und BC Sans 2.1.2. Behalten Sie die bedingte Validierung, erhaltene Eingaben, sichtbare Fehlermeldungen und das Löschen veralteter Ergebnisse bei. Verwenden Sie die aktuellen Token-Namen und den korrekt geschriebenen Schriftnamen mit Leerzeichen. Lassen Sie das Beispiel lokal, bis ein echter Benachrichtigungsvertrag vorliegt.
05
B.C. Designsystem Quellen und Geltungsbereich
Eine Anwendungsstudie zu OpenDesign mit der aktuellen öffentlichen B.C.-React-Bibliothek. Dies ist ein eigens erstelltes lokales Formular, kein offizieller Regierungsdienst. Verwenden Sie fiktive Kontaktdaten.
