Radio

Radio (라디오)

여러 옵션 중에서 하나를 선택하는 컴포넌트예요.

출처: 문서

본문

WARNING label이 value로 작동하는 것은 deprecated되었어요. label은 이제 표시 텍스트로만 사용되며, 이 동작은 3.0.0에서 제거될 예정이에요. 새 API로 전환하는 걸 고려하세요.

TIP 새 API value는 2.6.0에서 추가되었고, 문서의 예제는 모두 value를 사용해요. 2.6.0 미만 버전을 사용한다면 다음을 참조하세요:




    =2.6.0, recommended ✔️ not work when
    Option 1
    =3.0.0 -->
    Option 2

기본 사용법 (Basic usage)

Radio는 옵션이 너무 많으면 안 돼요. 그렇지 않으면 Select 컴포넌트를 대신 사용하세요. 라디오 컴포넌트를 만드는 건 간단해요. Radio의 v-model에 변수를 바인딩하기만 하면 돼요. 선택한 라디오의 value 값과 같아지죠. value의 타입은 String, Number 또는 Boolean이에요.

import { ref } from 'vue'

const radio1 = ref('1')
const radio2 = ref('1')
const radio3 = ref('1')

비활성화 (Disabled)

disabled 속성은 라디오를 비활성화하는 데 사용해요. disabled 속성을 추가하기만 하면 돼요.

라디오 그룹 (Radio Group)

서로 배타적인 옵션에서 선택할 때 적합해요. el-radio-group을 el-radio와 결합해서 라디오 그룹을 표시해요. el-radio-group 요소의 v-model에 변수를 바인딩하고 el-radio에 label 값을 설정해요. 현재 값을 매개변수로 하는 change 이벤트도 제공해요.

테두리 (With borders)

border 속성은 Radio에 테두리를 추가해요.

import { ref } from 'vue'

const radio1 = ref('1')
const radio2 = ref('1')
const radio3 = ref('1')
const radio4 = ref('1')

Options 속성 (Options attribute) 2.11.2

기본 el-radio-group 사용법의 단축형이에요. props 속성으로 옵션의 별칭을 커스터마이징할 수 있어요.

라디오 버튼 (Radio Button)

버튼 그룹 비주얼 효과를 가진 Radio예요. el-radio 요소를 el-radio-button 요소로 바꾸기만 하면 돼요. fill과 text-color를 사용해서 버튼이 활성화되었을 때 스타일을 설정할 수도 있어요.

import { ref } from 'vue'

const radio = ref('New York')

Radio API

Radio Attributes

Name Description Type Default
model-value / v-model 바인딩 값 string / number / boolean —
value 2.6.0 Radio의 값 string / number / boolean —
label Radio의 라벨. value가 없으면 label이 value 역할을 해요 string / number / boolean —
disabled Radio 비활성화 여부 boolean false
border Radio 주위에 테두리를 추가할지 여부 boolean false
size Radio의 크기 enum —
name 네이티브 name 속성 string —

Radio Events

Name Description Type
change 바인딩 값이 변경될 때 트리거 Function

Radio Slots

Name Description
default 기본 내용 커스터마이징

RadioGroup API

RadioGroup Attributes

Name Description Type Default
model-value / v-model 바인딩 값 string / number / boolean —
size 라디오 버튼이나 테두리 라디오의 크기 string default
disabled 중첩 라디오가 비활성화되는지 여부 boolean false
validate-event 폼 검증 트리거 여부 boolean true
text-color 버튼이 활성화될 때 글꼴 색 string #ffffff
fill 버튼이 활성화될 때 테두리와 배경색 string #409eff
aria-label a11y 2.7.2 RadioGroup의 aria-label과 동일 string —
name 네이티브 name 속성 string —
id 네이티브 id 속성 string —
label a11y deprecated RadioGroup의 aria-label과 동일 string —
options 2.11.2 옵션 데이터, value와 label, disabled의 키는 props로 커스터마이징할 수 있어요 array —
props 2.11.2 설정 옵션 object {value: 'value', label: 'label', disabled: 'disabled'}
type 2.11.5 옵션을 렌더링할 컴포넌트 타입 (예: 'button') enum 'radio'

RadioGroup Events

Name Description Type
change 바인딩 값이 변경될 때 트리거 Function

RadioGroup Slots

Name Description Subtags
default 기본 내용 커스터마이징 Radio / RadioButton

RadioButton API

RadioButton Attributes

Name Description Type Default
value 2.6.0 Radio의 값 string / number / boolean —
label Radio의 라벨. value가 없으면 label이 value 역할을 해요 string / number / boolean —
disabled Radio 비활성화 여부 boolean false
name 네이티브 'name' 속성 string —

RadioButton Slots

Name Description
default 기본 내용 커스터마이징

더 알아보기 (Learn more)