Radio 라디오 버튼

LhRadio는 단독 단일 선택 값을 지원하고, LhRadioGroup은 여러 옵션의 단일 선택 그룹을 지원합니다.

단독 사용

남성여성

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhRadio } from '@lh-ui/vue3'

const gender = ref('male')
</script>

<template>
  <LhRadio v-model="gender" value="male" label="남성" />
  <LhRadio v-model="gender" value="female" label="여성" />
</template>

vue

<script>
import { LhRadio } from '@lh-ui/vue3'

export default {
  components: { LhRadio },
  data() {
    return {
      gender: 'male'
    }
  }
}
</script>

<template>
  <LhRadio v-model="gender" value="male" label="남성" />
  <LhRadio v-model="gender" value="female" label="여성" />
</template>

그룹 사용

VueReactSvelte

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhRadio, LhRadioGroup } from '@lh-ui/vue3'

const selectedFramework = ref('vue')
</script>

<template>
  <LhRadioGroup v-model="selectedFramework" name="framework">
    <LhRadio value="vue" label="Vue" />
    <LhRadio value="react" label="React" />
    <LhRadio value="svelte" label="Svelte" />
  </LhRadioGroup>
</template>

vue

<script>
import { LhRadio, LhRadioGroup } from '@lh-ui/vue3'

export default {
  components: { LhRadio, LhRadioGroup },
  data() {
    return {
      selectedFramework: 'vue'
    }
  }
}
</script>

<template>
  <LhRadioGroup v-model="selectedFramework" name="framework">
    <LhRadio value="vue" label="Vue" />
    <LhRadio value="react" label="React" />
    <LhRadio value="svelte" label="Svelte" />
  </LhRadioGroup>
</template>

커스텀 테마

라디오 버튼에 커스텀 테마 색상을 적용합니다.

옵션 1옵션 2옵션 3

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhRadio, LhRadioGroup } from '@lh-ui/vue3'

const selectedTheme = ref('option1')
const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
}
</script>

<template>
  <!-- 청화자 테마 색상 -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhRadioGroup v-model="selectedTheme">
      <LhRadio value="option1" label="옵션 1" />
      <LhRadio value="option2" label="옵션 2" />
      <LhRadio value="option3" label="옵션 3" />
    </LhRadioGroup>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhRadio, LhRadioGroup } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhRadio, LhRadioGroup },
  data() {
    return {
      selectedTheme: 'option1',
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <!-- 청화자 테마 색상 -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhRadioGroup v-model="selectedTheme">
      <LhRadio value="option1" label="옵션 1" />
      <LhRadio value="option2" label="옵션 2" />
      <LhRadio value="option3" label="옵션 3" />
    </LhRadioGroup>
  </LhConfigProvider>
</template>

더 많은 테마는 테마 커스터마이징을 참고하세요.

다국어

라디오 버튼 텍스트는 LhConfigProvider와 언어 팩을 함께 사용해 다국어 전환할 수 있습니다.

Vue框架React框架

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhRadio, LhRadioGroup, zhCN, enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const selected = ref('vue')
</script>

<template>
  <!-- 현재 언어에 맞는 언어 팩을 주입합니다 -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhRadioGroup v-model="selected">
      <!-- 문구가 언어에 따라 전환됩니다 -->
      <LhRadio value="vue" :label="locale === 'zh-CN' ? 'Vue框架' : 'Vue Framework'" />
      <LhRadio value="react" :label="locale === 'zh-CN' ? 'React框架' : 'React Framework'" />
    </LhRadioGroup>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhRadio, LhRadioGroup, zhCN, enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhRadio, LhRadioGroup },
  data() {
    return {
      locale: 'zh-CN',
      selected: 'vue',
      zhCN: zhCN,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- 현재 언어에 맞는 언어 팩을 주입합니다 -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhRadioGroup v-model="selected">
      <!-- 문구가 언어에 따라 전환됩니다 -->
      <LhRadio value="vue" :label="locale === 'zh-CN' ? 'Vue框架' : 'Vue Framework'" />
      <LhRadio value="react" :label="locale === 'zh-CN' ? 'React框架' : 'React Framework'" />
    </LhRadioGroup>
  </LhConfigProvider>
</template>

비활성화와 크기

라디오 버튼은 disabled로 비활성화하고 size로 크기를 조정합니다; 그룹은 disabled로 그룹 전체를 비활성화하고 size로 그룹 내 크기를 통일합니다.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhRadio, LhRadioGroup } from '@lh-ui/vue3'

const demoRadioDisabled = ref('')
const demoRadioDisabled2 = ref('1')
const demoRadioSmall = ref('1')
const demoRadioLarge = ref('1')
const demoRadioGroupDisabled = ref('a')
const demoRadioGroupSize = ref('a')
</script>

<template>
  <!-- 비활성화 -->
  <LhRadio v-model="demoRadioDisabled" value="1" disabled label="비활성화 옵션" />
  <!-- 비활성화 및 선택됨 -->
  <LhRadio v-model="demoRadioDisabled2" value="1" disabled label="비활성화 및 선택됨" />
  <!-- small 크기 -->
  <LhRadio v-model="demoRadioSmall" value="1" size="small" label="small" />
  <!-- large 크기 -->
  <LhRadio v-model="demoRadioLarge" value="1" size="large" label="large" />
  <!-- 그룹 전체 비활성화 -->
  <LhRadioGroup v-model="demoRadioGroupDisabled" disabled>
    <LhRadio value="a" label="옵션 A" />
    <LhRadio value="b" label="옵션 B" />
  </LhRadioGroup>
  <!-- 그룹 내 large 크기로 통일 -->
  <LhRadioGroup v-model="demoRadioGroupSize" size="large">
    <LhRadio value="a" label="옵션 A" />
    <LhRadio value="b" label="옵션 B" />
  </LhRadioGroup>
</template>

vue

<script>
import { LhRadio, LhRadioGroup } from '@lh-ui/vue3'

export default {
  components: { LhRadio, LhRadioGroup },
  data() {
    return {
      demoRadioDisabled: '',
      demoRadioDisabled2: '1',
      demoRadioSmall: '1',
      demoRadioLarge: '1',
      demoRadioGroupDisabled: 'a',
      demoRadioGroupSize: 'a',
    }
  },
}
</script>

<template>
  <!-- 비활성화 -->
  <LhRadio v-model="demoRadioDisabled" value="1" disabled label="비활성화 옵션" />
  <!-- 비활성화 및 선택됨 -->
  <LhRadio v-model="demoRadioDisabled2" value="1" disabled label="비활성화 및 선택됨" />
  <!-- small 크기 -->
  <LhRadio v-model="demoRadioSmall" value="1" size="small" label="small" />
  <!-- large 크기 -->
  <LhRadio v-model="demoRadioLarge" value="1" size="large" label="large" />
  <!-- 그룹 전체 비활성화 -->
  <LhRadioGroup v-model="demoRadioGroupDisabled" disabled>
    <LhRadio value="a" label="옵션 A" />
    <LhRadio value="b" label="옵션 B" />
  </LhRadioGroup>
  <!-- 그룹 내 large 크기로 통일 -->
  <LhRadioGroup v-model="demoRadioGroupSize" size="large">
    <LhRadio value="a" label="옵션 A" />
    <LhRadio value="b" label="옵션 B" />
  </LhRadioGroup>
</template>

Radio API

LhRadio Props

프로퍼티	설명	타입	기본값
modelValue	단독 모드의 선택 값	`unknown`	—
value	제출 값	`unknown`	—
label	라벨 텍스트	`string`	—
disabled	비활성화 여부	`boolean`	`false`
name	네이티브 폼 이름	`string`	—
size	크기	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
sx	sx 빠른 레이아웃 속성	`LhSxProps`	—

LhRadioGroup Props

프로퍼티	설명	타입	기본값
model-value	단독 모드의 선택 값	`unknown`	—
disabled	그룹 전체 비활성화 여부	`boolean`	`false`
name	네이티브 폼 이름	`string`	—
size	그룹 내 라디오 버튼 크기	`'small' \| 'medium' \| 'large'`	`'medium'`

Events

이벤트	설명	매개변수
update:modelValue	값이 변경될 때	`value: unknown`
change	선택이 변경될 때	`value: unknown`

Slots

슬롯	설명
default	커스텀 콘텐츠

타입 정의

이 컴포넌트가 외부로 노출하는 TypeScript 타입 구조는 다음과 같습니다(packages/components/radio/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 클릭하여 전체 정의를 펼쳐 볼 수 있습니다; 프로퍼티 설명은 위쪽 Props 표를 참고하세요):

LhRadioSize

export type LhRadioSize = typeof LH_SIZE_CONST[keyof typeof LH_SIZE_CONST]

LhRadioProps

export interface LhRadioProps {
  modelValue?: unknown
  value?: unknown
  label?: string
  disabled?: boolean
  name?: string
  size?: LhRadioSize
  /** 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhRadioGroupProps

export interface LhRadioGroupProps {
  modelValue?: unknown
  disabled?: boolean
  name?: string
  size?: LhRadioSize
}

Radio 라디오 버튼 ​

단독 사용 ​

그룹 사용 ​

커스텀 테마 ​

다국어 ​

비활성화와 크기 ​

Radio API ​

LhRadio Props ​

LhRadioGroup Props ​

Events ​

Slots ​

타입 정의 ​