Формы и обратная связь

Text.js включает элементы управления формами, диалоги и всплывающие уведомления. Каждый элемент управления включается в порядок обхода по Tab и реагирует на Space или 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>

#Элементы управления

Все они принимают autoFocus, focused, id и disabled. Поддерживаются как управляемый, так и неуправляемый (defaultChecked, defaultValue) режимы.

#Кнопки

variant принимает значения primary, secondary, ghost или danger. При фокусе кнопка заполняется акцентным цветом без изменения размера.

#<Dialog>

Компонент <Modal> с описанием и строкой действий.

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

Да или нет. y и n отвечают напрямую; ← → перемещают фокус между кнопками. destructive задаёт оформление кнопки подтверждения и сначала устанавливает фокус на кнопку «Отмена».

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

#Всплывающие уведомления

Отрендерите один <Toaster />, затем вызывайте useToast() в любом месте того же корня.

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

Всплывающие уведомления отображаются поверх модальных окон и никогда не забирают фокус.