폼과 피드백
<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 />를 하나 렌더링한 다음, 같은 루트 안 어디서든 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) |
토스트는 모달 위에 렌더링되며 포커스를 가져가지 않아요.