Radio Group experimental
Ark UI Radio Group 기반 wrapper입니다. 상호 배타적인 단일 선택 옵션과 radio-group anatomy를 제공합니다.
Preview
알림 범위
<script lang="ts">
import * as RadioGroup from '@odbd/svelte/radio-group'
const notificationScopes = [
{ value: 'all', label: '전체 알림', description: '중요 업데이트와 운영 알림을 모두 받아요.' },
{ value: 'important', label: '중요 알림만', description: '결제, 보안, 장애 알림만 받아요.' },
{ value: 'none', label: '알림 끄기', description: '서비스 화면 안에서만 확인해요.' },
]
</script>
<RadioGroup.Root defaultValue="important" name="notification-scope" style="max-width: 30rem;">
<RadioGroup.Label>알림 범위</RadioGroup.Label>
{#each notificationScopes as scope}
<RadioGroup.Item value={scope.value}>
<RadioGroup.ItemControl />
<RadioGroup.ItemText>
{scope.label}
<span class="radio-group-description">{scope.description}</span>
</RadioGroup.ItemText>
<RadioGroup.ItemHiddenInput />
</RadioGroup.Item>
{/each}
</RadioGroup.Root>
<style>
.radio-group-description {
display: block;
color: var(--odbd-color-muted-foreground);
font-size: var(--odbd-font-size-sm);
font-weight: 400;
}
</style>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import * as RadioGroup from '@odbd/svelte/radio-group' import { RadioGroup } from '@odbd/react/radio-group'