상호작용 컴포넌트
<Input>, <Textarea>, <Select>와 <Tabs>: 포커스, 단축키와 페이지에 포커스가 없을 때 텍스트 복사.
이 입력 컴포넌트들은 키보드로 작동하며 포커스를 직접 관리해요.
실시간Tab next field · Enter submittsx
<Box className="flex-col gap-1 p-1"> <Input placeholder="my-text-app" autoFocus /> <Select options={regions} value={region} onChange={setRegion} /> <Tabs tabs={plans} activeTab={plan} onChange={setPlan} variant="pill" /></Box>포커스
Tab과 Shift+Tab으로 포커스를 순환해요. autoFocus는 마운트 시 포커스를 가져와요.
const { isFocused } = useFocus({ autoFocus: true });useFocusManager().focus("search");포커스된 편집기가 키 입력을 처리하므로 1을 입력해도 전역 단축키가 실행되지 않아요.
<Input>
readline 스타일 편집을 지원하는 한 줄 입력이에요.
| 속성 | 설명 |
|---|---|
value / onChange | 제어되는 값 |
onSubmit | Enter 입력 시 호출 |
placeholder | 비어 있을 때 표시 |
mask | 비밀 정보를 가리는 문자 |
<Textarea>
여러 줄 입력 편집기예요. Enter로 제출하고, Shift+Enter로 줄바꿈을 추가해요.
<Textarea placeholder="Ask anything…" maxRows={6} onSubmit={send} /><Select>
퍼지 검색을 선택적으로 지원하는 키보드 옵션 목록이에요.
| 속성 | 설명 |
|---|---|
options | { value, label, hint?, badge? }[] |
onChange | Enter 입력 시 호출 |
searchable | 입력한 내용으로 옵션 필터링 |
<Tabs>
<Tabs tabs={[{ id: "home", label: "Home", shortcut: "1" }]} activeTab={tab} onChange={setTab} />포커스가 없을 때의 커서
페이지가 포커스를 잃으면 커서와 프레임이 멈추므로 콘솔 텍스트를 선택하고 복사할 수 있어요.