Formulaires et retours

Text.js inclut des contrôles de formulaire, des boîtes de dialogue et des notifications toast. Chaque contrôle s’inscrit dans l’ordre de tabulation avec Tab et répond à Space ou 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>

#Contrôles

Tous acceptent autoFocus, focused, id et disabled. Les modes contrôlé et non contrôlé (defaultChecked, defaultValue) fonctionnent tous les deux.

#Boutons

variant vaut primary, secondary, ghost ou danger. Le focus remplit le bouton avec la couleur d’accent sans modifier sa taille.

#<Dialog>

Un <Modal> avec une description et une rangée d’actions.

<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>

Oui ou non. y et n répondent directement ; ← → déplacent le focus entre les boutons. destructive applique un style au bouton de confirmation et place d’abord le focus sur Annuler.

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

#Notifications toast

Affichez un seul <Toaster />, puis appelez useToast() n’importe où dans la même racine.

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",});

Les notifications toast s’affichent au-dessus des fenêtres modales et ne prennent jamais le focus.