Radio Group
이름이 있는 선택지 묶음에서 정확히 하나를 고릅니다.
용법
세로 방향
같은 크기 규칙을 유지하면서 세로 방향으로 영역을 조절합니다.
Arrow keys move and check like a native radio group. Form values use hidden native radios.
<!-- Radio Group / Vertical -->
<script setup lang="ts">
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from '@sectile/vue/radio-group'
const items = ['email', 'push', 'sms']
</script>
<template>
<RadioGroupRoot :items="items" default-value="email" name="channel">
<RadioGroupItem v-for="item in items" :key="item" :value="item">{{ item }}<RadioGroupIndicator /></RadioGroupItem>
</RadioGroupRoot>
</template>가로 방향 비활성 항목
활성 라디오 버튼을 따라 가로로 이동합니다.
Arrow keys move and check like a native radio group. Form values use hidden native radios.
<!-- Radio Group / Horizontal Disabled -->
<script setup lang="ts">
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from '@sectile/vue/radio-group'
const items = ['email', 'push', 'sms']
</script>
<template>
<RadioGroupRoot :items="items" default-value="email" name="channel">
<RadioGroupItem v-for="item in items" :key="item" :value="item">{{ item }}<RadioGroupIndicator /></RadioGroupItem>
</RadioGroupRoot>
</template>외부 상태 관리
현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.
Arrow keys move and check like a native radio group. Form values use hidden native radios.
<!-- Radio Group / Controlled -->
<script setup lang="ts">
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from '@sectile/vue/radio-group'
const items = ['email', 'push', 'sms']
</script>
<template>
<RadioGroupRoot :items="items" default-value="email" name="channel">
<RadioGroupItem v-for="item in items" :key="item" :value="item">{{ item }}<RadioGroupIndicator /></RadioGroupItem>
</RadioGroupRoot>
</template>API
Vue 패키지: @sectile/vue/radio-group
RadioGroupRootRadioGroupItemRadioGroupIndicator
Props
RadioGroupRootProps
as이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
defaultValue컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled사용자 조작을 막을지 여부입니다.
disabledItems포커스와 선택 대상에서 제외할 항목 값입니다.
form컨트롤을 연결할 네이티브 form 요소의 ID입니다.
items컴포넌트가 관리할 순서 있는 항목 값입니다.
modelValue부모가 상태를 관리할 때 사용할 현재 값입니다.
name네이티브 폼 제출에 사용할 이름입니다.
orientation배치와 키보드 이동에 사용할 축입니다.
readonly값 확인만 허용하는 읽기 전용 상태 여부입니다.
required제출 전에 올바른 값이 반드시 있어야 하는지 여부입니다.
RadioGroupItemProps
as이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
disabled사용자 조작을 막을지 여부입니다.
value이 계약이 노출하는 현재 값입니다.
RadioGroupIndicatorProps
as이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
슬롯
RadioGroupRootSlotProps
disabled사용자 조작을 막을지 여부입니다.
highlightedValue조작 대상으로 강조된 현재 값입니다.
readonly값 확인만 허용하는 읽기 전용 상태 여부입니다.
value이 계약이 노출하는 현재 값입니다.
RadioGroupItemSlotProps
checked컨트롤이 선택됐는지 여부입니다.
disabled사용자 조작을 막을지 여부입니다.
highlighted조작 대상으로 강조된 항목인지 여부입니다.
value이 계약이 노출하는 현재 값입니다.
이벤트
RadioGroupRoot
highlight강조된 항목이 바뀔 때 발생합니다.
update:modelValue컴포넌트가 외부 제어 값의 변경을 요청할 때 발생합니다.
기타 타입
RadioGroupValueChangeHandler
type RadioGroupValueChangeHandler = (value: string) => voidRadioGroupHighlightHandler
type RadioGroupHighlightHandler = (value: string | null) => void파트
공통 범위: [data-scope="radio-group"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.
| 파트 | 선택자 | 역할 | 추가 속성 |
|---|---|---|---|
root | [data-part="root"] | 컴포넌트 경계와 내부 파트를 묶습니다. | — |
item | [data-part="item"] | 선택하거나 실행할 수 있는 항목 하나입니다. | — |
indicator | [data-part="indicator"] | 주요 콘텐츠와 나란히 상태나 위치를 표시합니다. | — |
키보드 동작
| 키 | 동작 |
|---|---|
| Arrow keys | 보이는 방향에 따라 현재 선택 항목을 이동합니다. |
| Home / End | 선택 가능한 첫 번째 또는 마지막 항목으로 이동합니다. |
| Enter / Space | 현재 항목을 선택하거나 실행합니다. |
| Printable text | 글자 검색을 지원하면 다음 일치 항목으로 이동합니다. |
접근성
묶음과 각 라디오가 선택·강조·비활성 상태를 노출하고 하나의 이동 탭 위치를 사용합니다.
관련 WAI-ARIA 패턴에서 호스트 접근성 규칙을 확인할 수 있습니다.