Radio ラジオボタン

LhRadio は単独のラジオ値に対応し、LhRadioGroup は複数の選択肢から 1 つを選ぶラジオグループに対応します。

単独使用

男性女性

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 クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhRadioGroupProps

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

Radio ラジオボタン ​

単独使用 ​

グループ使用 ​

カスタムテーマ ​

国際化 ​

無効化とサイズ ​

Radio API ​

LhRadio Props ​

LhRadioGroup Props ​

Events ​

Slots ​

型定義 ​