Checkbox experimental
Ark UI Checkbox 기반 wrapper입니다. control, indicator, label anatomy를 제공합니다.
Preview
선택한 채널: email
<script lang="ts">
import { Checkbox, CheckboxGroup } from '@odbd/svelte'
let value = $state(['email'])
</script>
<div class="preview-stack">
<Checkbox label="Receive updates" />
<Checkbox label="Enabled by default" checked />
<CheckboxGroup {value} onValueChange={(next: string[]) => (value = next)}>
<Checkbox value="email" label="이메일 알림" />
<Checkbox value="sms" label="SMS 알림" />
<Checkbox value="push" label="푸시 알림" />
</CheckboxGroup>
<p class="preview-note">선택한 채널: {value.join(', ') || '없음'}</p>
</div>
<style>
.preview-note {
margin: 0;
color: var(--odbd-color-muted-foreground);
font-size: var(--odbd-font-size-sm);
}
</style>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import { Checkbox } from '@odbd/svelte' import { Checkbox } from '@odbd/react/checkbox'