フォームとフィードバック
<Button>、<Checkbox>、<Switch>、<RadioGroup>、<Slider>、<Dialog>、<Confirm>、トースト通知。
Text.jsにはフォームコントロール、ダイアログ、トーストが含まれています。すべてのコントロールが Tab の移動順に入り、Space または Enter に反応します。
ライブ72×14 · booting Turbolog…tsx
<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>コントロール
| コンポーネント | キー | 値 |
|---|---|---|
<Button> | ↵ Space | onPress |
<Checkbox> | Space ↵ | checked / onChange |
<Switch> | Space ← → | checked / onChange |
<RadioGroup> | ↑ ↓（または ← →） | value / onChange |
<Slider> | ← →、Shift ×5、Home End | value / onChange |
すべてのコントロールで 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 /> を1つ描画し、同じルート内の任意の場所で 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",});| オプション | 説明 |
|---|---|
duration | ミリ秒（デフォルトは 4000。読み込み中のトーストは表示を維持） |
id | 再利用すると既存のトーストをその場で更新 |
position | <Toaster> に指定：bottom-right（デフォルト）、top-center、… |
max | <Toaster> に指定：同時に表示する数（デフォルトは 3） |
トーストはモーダルの上に描画され、フォーカスを奪いません。