@gpters-internal/ui

Checkbox

선택 또는 선택 해제할 수 있는 체크박스 컴포넌트

Basic Usage

기본 체크박스입니다.

tsx
<Checkbox id="basic" />
<Label htmlFor="basic">Accept terms</Label>

States

체크박스의 다양한 상태입니다.

tsx
<Checkbox id="unchecked" />
<Checkbox id="checked" defaultChecked />
<Checkbox id="disabled" disabled />
<Checkbox id="disabled-checked" disabled defaultChecked />

Controlled

checked와 onCheckedChange를 사용하여 제어합니다.

tsx
const [checked, setChecked] = useState(false);

<Checkbox
  id="controlled"
  checked={checked}
  onCheckedChange={setChecked}
/>
<Label htmlFor="controlled">
  {checked ? 'Checked' : 'Unchecked'}
</Label>

With Form

폼에서 체크박스를 사용하는 예시입니다.

You agree to our Terms of Service and Privacy Policy.

Receive updates about new features and promotions.

tsx
<div className="flex items-start gap-2">
  <Checkbox id="terms" className="mt-0.5" />
  <div className="grid gap-1.5 leading-none">
    <Label htmlFor="terms">Accept terms and conditions</Label>
    <p className="text-sm text-muted-foreground">
      You agree to our Terms of Service and Privacy Policy.
    </p>
  </div>
</div>

Usage

tsx
import { Checkbox } from '@gpters-internal/ui';

function Example() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="example" />
      <label htmlFor="example">Check me</label>
    </div>
  );
}