Formularze i komunikaty

Text.js zawiera kontrolki formularzy, okna dialogowe i powiadomienia. Każda kontrolka jest uwzględniana w kolejności nawigacji klawiszem Tab i reaguje na Space lub Enter.

<Checkbox label="Web Analytics" description="privacy-friendly" defaultChecked /><Switch label="Edge runtime" defaultChecked /><RadioGroup orientation="horizontal" value={plan} onChange={setPlan} options={plans} /><Slider label="Concurrency" defaultValue={40} width={20} /><Button variant="primary" onPress={deploy}>Deploy</Button>

#Kontrolki

Wszystkie przyjmują autoFocus, focused, id i disabled. Działają zarówno w trybie kontrolowanym, jak i niekontrolowanym (defaultChecked, defaultValue).

#Przyciski

variant ma wartość primary, secondary, ghost lub danger. Fokus wypełnia przycisk kolorem akcentu bez zmiany jego rozmiaru.

#<Dialog>

Komponent <Modal> z opisem i wierszem akcji.

<Dialog  open={open}  title="Invite teammate"  description="They'll get an email with a link."  onClose={close}  actions={<Button variant="primary" onPress={send}>Send</Button>}>  <Input autoFocus placeholder="email" /></Dialog>

#<Confirm>

Tak lub nie. y i n odpowiadają bezpośrednio; ← → przenoszą fokus między przyciskami. destructive nadaje styl przyciskowi potwierdzenia i ustawia początkowy fokus na przycisku „Anuluj”.

<Confirm  open={confirming}  destructive  title="Delete project?"  message="This removes acme-web and all 312 deployments."  confirmLabel="Delete"  onConfirm={remove}  onCancel={() => setConfirming(false)}/>

#Powiadomienia

Wyrenderuj jeden komponent <Toaster />, a następnie wywołaj useToast() w dowolnym miejscu w obrębie tego samego korzenia.

const toast = useToast();toast("Copied");toast.success("Deployed", { description: "dpl_8f2k is live on iad1." });toast.error("Build failed");await toast.promise(deploy(), {  loading: "Deploying…",  success: (d) => `Deployed ${d.id}`,  error: "Deploy failed",});

Powiadomienia renderują się nad oknami modalnymi i nigdy nie przejmują fokusu.