체크박스
실험primitive켜고 끄는 선택 상자입니다. 일부만 선택된 '중간' 상태도 나타낼 수 있습니다.
@tissue-ui/layout-react설치
bash
npm install @tissue-ui/layout-reacttsx
import { Checkbox } from "@tissue-ui/layout-react";언제 쓰나
- 개별 항목을 켜고 끌 때(약관 동의, 다중 선택).
플레이그라운드
indeterminate
disabled
error
tsx
<Checkbox label="이용약관에 동의합니다" checked={checked} onChange={setChecked} />예제
선택 · 비활성
전체 선택(중간 상태)
일부만 선택되면 부모 체크박스가 '중간(indeterminate)' 상태가 됩니다.
다중 선택 목록
여러 항목을 켜고 끄는 목록을 만듭니다.
오류
속성
| 속성 | 타입 | 설명 |
|---|---|---|
| label | string | 체크박스 옆 설명입니다. |
| checked | boolean | 선택 여부입니다. |
| onChange | node | 선택이 바뀔 때 실행됩니다. |
| indeterminate | boolean | 일부만 선택된 '중간' 상태입니다. |
| disabled | boolean | 선택을 막습니다. |
| error | boolean | 오류 상태로 빨간 테두리를 표시합니다. |
위 옵션 말고도 className·onClick 같은 일반 HTML 속성을 그대로 넘길 수 있습니다.
상태
defaultdisablederror
data 속성
data-statedata-disableddata-error
이 페이지의 옵션·상태는 실제 코드 정의에서 그대로 가져온 것입니다. 에이전트는 같은 내용을 llms.txt 로 읽습니다.