Formulários e feedback

Text.js inclui controles de formulário, caixas de diálogo e toasts. Todos os controles entram na ordem de Tab e respondem a 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>

#Controles

Todos aceitam autoFocus, focused, id e disabled. Tanto o modo controlado quanto o não controlado (defaultChecked, defaultValue) funcionam.

#Botões

variant pode ser primary, secondary, ghost ou danger. O foco preenche o botão com a cor de destaque sem alterar seu tamanho.

#<Dialog>

Um <Modal> com uma descrição e uma linha de ações.

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

Sim ou não. y e n respondem diretamente; ← → movem o foco entre os botões. destructive estiliza o botão de confirmação e coloca o foco em Cancelar primeiro.

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

#Toasts

Renderize um <Toaster /> e depois chame useToast() em qualquer lugar da mesma raiz.

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

Toasts aparecem acima dos modais e nunca recebem o foco.