Crie um formulário de preferências de lembrete no estilo B.C., com tokens semânticos reais, controles Aria nativos de React, campos de contato condicionais e comportamento completo de validação.
Biblioteca e tokens atuais de sistema de design B.C. React
Escolha a implementação mantida
A versão atual de B.C. Design System oferece componentes React criados com base em React Aria. Este exemplo fixa react-components 0.8.1 e sua dependência design-tokens 5.0.0. O antigo repositório B.C. Web Components é uma implementação legada independente; importá-lo não reproduz a biblioteca React atual. Confira se a implementação corresponde à documentação antes de copiar um exemplo.
Importe a fonte correta
Os componentes esperam o nome de família BC Sans, com espaço. A versão 2.1.2 fornece css/BC_Sans.css; a entrada antiga BCSans.css está marcada como obsoleta e declara um nome de família diferente. Ter BC Sans instalada na máquina de desenvolvimento pode ocultar a falta de uma importação da fonte. O exemplo inclui a fonte publicada para que o resultado não dependa de uma instalação local.
Sistema de design B.C. Papéis semânticos de cor e espaçamento
Consulte o papel antes de escolher o valor
Os botões primários usam o preenchimento azul-escuro de botão primário, enquanto o conteúdo complementar usa typography-color-secondary. As mensagens de erro usam typography-color-danger. A tabela registra os nomes de exportação atuais de CSS; o nome expressa uma intenção estável, mesmo que um tema futuro altere o valor subjacente. Não confunda a cor de um controle inativo com a de um texto complementar comum.
Defina a geometria com intenção
O formulário usa um espaçamento de 24px entre campos e uma distância maior, de 48px, entre a tarefa principal e a explicação complementar. Esses valores correspondem ao ritmo da biblioteca, enquanto a composição geral em duas colunas foi criada especificamente para este exemplo. No layout para dispositivos móveis, as colunas se empilham sem reduzir os rótulos do formulário nem transformar o texto explicativo em uma dica de ferramenta.
Sistema de design B.C. Campos condicionais e valores preservados
Valide somente o método de contato escolhido
Um RadioGroup nativo controla se o TextField de endereço de e-mail ou o de número de telefone fica visível. Os dois valores permanecem no estado de React quando o método muda, mas somente o campo selecionado participa da validação da revisão. Assim, os dados úteis são preservados e um campo invisível não impede a conclusão da tarefa atual.
Exiba erros locais úteis
O campo de e-mail verifica um formato básico de endereço, e o exemplo de telefone exige pelo menos dez dígitos. Essas são regras ilustrativas, não um validador internacional completo de contatos. Ao revisar dados inválidos, defina isInvalid e forneça um errorMessage específico para o campo. A falta de consentimento exibe uma mensagem visível; o foco vai para o primeiro controle inválido.
Sistema de design B.C. Contratos dos componentes React Aria
Use valores controlados e manipuladores documentados
TextField recebe value e onChange; RadioGroup recebe value e onChange; Checkbox usa isSelected e onChange. Esses manipuladores recebem os valores documentados, não um objeto de evento do navegador que sempre precise ser lido por meio de event.target. Button usa type=submit e o evento de envio do formulário nativo, para que o envio pelo teclado siga o mesmo fluxo de validação.
Mantenha o feedback da revisão sincronizado
Sistema de design B.C. Nomes acessíveis e composição responsiva
Mantenha rótulos, descrições e erros associados
Os componentes nativos fornecem as relações de React Aria entre rótulos, textos de ajuda e mensagens de erro. Ainda cabe à aplicação fornecer rótulos claros, uma descrição compreensível do grupo e mensagens de validação fáceis de entender. Nos testes, clique nos rótulos visíveis dos botões de opção e use o teclado; a entrada interna, visualmente oculta, não é o alvo visível.
Separe as orientações complementares do formulário
O painel adjacente explica o fluxo de trabalho local e inclui um elemento details nativo com contexto de implementação. Em telas estreitas, ele aparece depois do formulário na ordem de leitura. O símbolo de informação é decorativo, pois o título já transmite o significado. Não é necessário usar um logotipo oficial da B.C. nem alegar que se trata de um serviço governamental para estudar os componentes.
Sistema de design B.C. Implementação completa de React
Reproduza a implementação verificada
Crie um projeto Vite React e instale os pacotes fixados de componentes, tokens e fontes. Use os arquivos main.jsx e bc.css fornecidos com um elemento raiz de montagem. O pacote inclui o comportamento nativo de botões de opção, campos, caixas de seleção e botões, além de toda a validação local e das transições de estado. Não é necessário ter um API privado nem credenciais.
Instale os pacotes fixados e importe css/BC_Sans.css.
Salve main.jsx e bc.css, mantendo o elemento raiz de montagem.
Envie o formulário vazio e, em seguida, corrija o campo visível.
Alterne os métodos e confirme que o valor anterior foi preservado.
Mantenha a validação condicional alinhada ao método selecionado
Os manipuladores onChange de RadioGroup e TextField recebem valores, enquanto o onChange de Checkbox recebe o valor booleano selecionado. Armazene esses valores diretamente, em vez de aplicar a todos os componentes um manipulador genérico que use event.target.value. Os rótulos visíveis continuam sendo os alvos de interação, mesmo quando React Aria oculta visualmente uma entrada nativa.
Quando o método de contato mudar, mantenha os dois valores em rascunho, mas limpe a revisão anterior e valide apenas o método escolhido. Após o envio, mova o foco para o primeiro controle visível inválido. Assim, a pessoa pode comparar as opções de contato sem perder um endereço de e-mail nem ser impedida por um campo de telefone invisível. A regra de telefone com dez dígitos deste exemplo é intencionalmente local e deve ser substituída pelos requisitos internacionais reais do serviço.
Somente o campo de contato selecionado é validado.
Alterar qualquer opção limpa as mensagens de revisão anteriores.
O resultado não afirma que um lembrete foi agendado.
Exemplos de componentes do sistema de design sistema de design B.C.
main.jsx — exemplo funcional completo
Escolha e revise uma preferência de contato. O código-fonte abaixo é a entrada completa de React, incluindo todo o estado e a validação.
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 />);
Salve junto de main.jsx. Estas regras de composição personalizadas são distintas da referência de tokens da biblioteca.
04
Configuração do agente de IA sistema de design B.C.
Ponto de partida para implementação
O exemplo nativo com versões fixadas foi empacotado e verificado localmente no navegador. O exemplo usa apenas o estado local da aplicação.
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
Um prompt para seu projeto
Prompt para agente de IA
Crie o formulário de lembrete com os componentes B.C. React 0.8.1 e BC Sans 2.1.2. Preserve a validação condicional, os dados mantidos, os erros visíveis e a limpeza de resultados desatualizados. Use os nomes atuais dos tokens e o nome correto da família tipográfica, com espaços. Mantenha o exemplo local até que exista um contrato de notificação real.
05
Fontes e escopo de sistema de design B.C.
Um estudo de aplicação de OpenDesign que usa a biblioteca pública atual B.C. React. Este é um formulário local original, não um serviço oficial do governo; use dados de contato fictícios.
