Checkbox Group
여러 Checkbox를 fieldset 구조로 묶어 관련 옵션을 한 번에 스캔하고 선택하도록 구성합니다.
@odbd/svelte/checkbox 서브패스와 Group export가 없어 Checkbox wrapper와 Fieldset wrapper로 시각적 그룹을 구성합니다.
<script lang="ts">
import { Checkbox } from '@odbd/svelte'
import * as Fieldset from '@odbd/svelte/fieldset'
const options = [
{ label: '제품 업데이트', checked: true },
{ label: '보안 알림', checked: true },
{ label: '월간 리포트', checked: false },
]
</script>
<Fieldset.Root class="examples-checkbox-group">
<Fieldset.Legend>수신 항목</Fieldset.Legend>
<div class="examples-checkbox-group__stack">
{#each options as option}
<Checkbox label={option.label} checked={option.checked} />
{/each}
</div>
<Fieldset.HelperText>필요한 알림만 선택해 메일 빈도를 조정하세요.</Fieldset.HelperText>
</Fieldset.Root>