Components
Checkbox
네이티브 입력을 감추고 시각만 토큰화한 체크박스.
import { Checkbox } from '@coldsurfers/surf-ui/primitives'import { useState } from 'react'export default function Example() { const [agreed, setAgreed] = useState(true) return ( <div style={{ display: 'grid', gap: 12 }}> <Checkbox checked={agreed} onChange={(e) => setAgreed(e.target.checked)}> 이용약관에 동의합니다 </Checkbox> <Checkbox disabled>마케팅 수신 (비활성)</Checkbox> </div> )}네이티브 <input type="checkbox"> 를 시각적으로만 감춥니다. 접근성·키보드·폼 제출·
react-hook-form 은 전부 네이티브에 그대로 위임하고, 칠하는 것만 가져옵니다.
ref 는 내부 실제 <input> 을 노출합니다 — { focus, blur } 만 노출하면 RHF 의
defaultValues 가 깨집니다.
라벨 텍스트 색은 강제하지 않고 부모에서 상속합니다. 라이트 폼이든 다크 밴드든 감싼 문맥을 따릅니다.
Props
Prop
Type
그 밖의 Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> 속성은 루트 엘리먼트로 그대로 통과한다.