Moduli e feedback
<Button>, <Checkbox>, <Switch>, <RadioGroup>, <Slider>, <Dialog>, <Confirm> e notifiche toast.
Text.js include controlli per moduli, finestre di dialogo e notifiche toast. Ogni controllo entra nell’ordine di navigazione con Tab e risponde a Space o 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>Controlli
| Componente | Tasti | Valore |
|---|---|---|
<Button> | ↵ Space | onPress |
<Checkbox> | Space ↵ | checked / onChange |
<Switch> | Space ← → | checked / onChange |
<RadioGroup> | ↑ ↓ (o ← →) | value / onChange |
<Slider> | ← →, Shift ×5, Home End | value / onChange |
Tutti accettano autoFocus, focused, id e disabled. Funzionano sia in modalità controllata sia in modalità non controllata (defaultChecked, defaultValue).
Pulsanti
variant può essere primary, secondary, ghost o danger. Il focus riempie il pulsante con il colore di accento senza modificarne le dimensioni.
<Dialog>
Un <Modal> con una descrizione e una riga di azioni.
<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>
Sì o no. y e n rispondono direttamente; ← → spostano il focus tra i pulsanti. destructive applica uno stile al pulsante di conferma e imposta il focus iniziale su Annulla.
<Confirm open={confirming} destructive title="Delete project?" message="This removes acme-web and all 312 deployments." confirmLabel="Delete" onConfirm={remove} onCancel={() => setConfirming(false)}/>Notifiche toast
Renderizza un solo <Toaster />, poi chiama useToast() in qualsiasi punto della stessa radice.
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",});| Opzione | Descrizione |
|---|---|
duration | Millisecondi (valore predefinito 4000; le notifiche toast di caricamento restano visibili) |
id | Da riutilizzare per aggiornare una notifica toast sul posto |
position | Su <Toaster>: bottom-right (valore predefinito), top-center, … |
max | Su <Toaster>: notifiche visibili contemporaneamente (valore predefinito 3) |
Le notifiche toast sono renderizzate sopra le finestre modali e non prendono mai il focus.