Formularios y avisos

Text.js incluye controles de formulario, diálogos y notificaciones emergentes. Cada control se incorpora al orden de Tab y responde 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>

#Controles

Todos aceptan autoFocus, focused, id y disabled. Funcionan tanto en modo controlado como no controlado (defaultChecked, defaultValue).

#Botones

variant puede ser primary, secondary, ghost o danger. El foco rellena el botón con el color de acento sin cambiar su tamaño.

#<Dialog>

Un <Modal> con una descripción y una fila de acciones.

<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 y n responden directamente; ← → permiten moverse entre botones. destructive aplica estilos al botón de confirmación y sitúa el foco primero en Cancelar.

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

#Notificaciones emergentes

Renderiza un <Toaster /> y luego llama a useToast() desde cualquier lugar de la misma raíz.

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

Las notificaciones emergentes se renderizan por encima de los modales y nunca reciben el foco.