Formulare und Feedback
<Button>, <Checkbox>, <Switch>, <RadioGroup>, <Slider>, <Dialog>, <Confirm> und Toasts.
Text.js enthält Formularsteuerelemente, Dialoge und Toasts. Jedes Steuerelement ist Teil der Tab-Reihenfolge und reagiert auf Space oder 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>Steuerelemente
| Komponente | Tasten | Wert |
|---|---|---|
<Button> | ↵ Space | onPress |
<Checkbox> | Space ↵ | checked / onChange |
<Switch> | Space ← → | checked / onChange |
<RadioGroup> | ↑ ↓ (oder ← →) | value / onChange |
<Slider> | ← →, Shift ×5, Home End | value / onChange |
Alle akzeptieren autoFocus, focused, id und disabled. Sowohl kontrollierte als auch unkontrollierte Varianten (defaultChecked, defaultValue) funktionieren.
Buttons
variant ist primary, secondary, ghost oder danger. Bei Fokus füllt die Akzentfarbe den Button, ohne seine Größe zu ändern.
<Dialog>
Ein <Modal> mit einer Beschreibung und einer Aktionszeile.
<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>
Ja oder nein. y und n antworten direkt; ← → wechseln zwischen den Buttons. destructive gestaltet den Bestätigungsbutton und fokussiert zuerst „Abbrechen“.
<Confirm open={confirming} destructive title="Delete project?" message="This removes acme-web and all 312 deployments." confirmLabel="Delete" onConfirm={remove} onCancel={() => setConfirming(false)}/>Toasts
Rendere einen <Toaster /> und rufe dann useToast() an beliebiger Stelle im selben Root auf.
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",});| Option | Beschreibung |
|---|---|
duration | Millisekunden (Standard 4000; Lade-Toasts bleiben sichtbar) |
id | Wiederverwenden, um einen Toast an Ort und Stelle zu aktualisieren |
position | Auf <Toaster>: bottom-right (Standard), top-center, … |
max | Auf <Toaster>: gleichzeitig sichtbar (Standard 3) |
Toasts erscheinen über Modals und übernehmen nie den Fokus.