Radio

LhRadio allows selecting a single option from a set.

Basic Usage

Basic Usage

Option OneOption TwoOption Three

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

const selected = ref('one')
</script>

<template>
  <LhRadio v-model="selected" value="one">Option One</LhRadio>
  <LhRadio v-model="selected" value="two">Option Two</LhRadio>
  <LhRadio v-model="selected" value="three">Option Three</LhRadio>
</template>

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

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

<template>
  <LhRadio v-model="selected" value="one">Option One</LhRadio>
  <LhRadio v-model="selected" value="two">Option Two</LhRadio>
  <LhRadio v-model="selected" value="three">Option Three</LhRadio>
</template>

Disabled

Disabled

DisabledEnabled

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

const selected2 = ref('two')
</script>

<template>
  <LhRadio v-model="selected2" value="one" disabled>Disabled</LhRadio>
  <LhRadio v-model="selected2" value="two">Enabled</LhRadio>
</template>

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

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

<template>
  <LhRadio v-model="selected2" value="one" disabled>Disabled</LhRadio>
  <LhRadio v-model="selected2" value="two">Enabled</LhRadio>
</template>

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/radio/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

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
}

Label, Name, Size & Group

Use the label prop instead of the default slot, set the native form name, and adjust size. LhRadioGroup supports name and size too.

Label, Name, Size & Group

Label propname=plan

smalllarge

VueReact

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

const enRadioLabel = ref('one')
const enRadioName = ref('one')
const enRadioSmall = ref('one')
const enRadioLarge = ref('one')
const enRadioGroupName = ref('vue')
</script>

<template>
  <!-- label prop instead of default slot -->
  <LhRadio v-model="enRadioLabel" value="one" label="Label prop" />
  <!-- native form name -->
  <LhRadio v-model="enRadioName" value="one" name="plan" label="name=plan" />
  <!-- small size -->
  <LhRadio v-model="enRadioSmall" value="one" size="small" label="small" />
  <!-- large size -->
  <LhRadio v-model="enRadioLarge" value="one" size="large" label="large" />
  <!-- group with native name and unified size -->
  <LhRadioGroup v-model="enRadioGroupName" name="framework" size="large">
    <LhRadio value="vue" label="Vue" />
    <LhRadio value="react" label="React" />
  </LhRadioGroup>
</template>

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

export default {
  components: { LhRadio, LhRadioGroup },
  data() {
    return {
      enRadioLabel: 'one',
      enRadioName: 'one',
      enRadioSmall: 'one',
      enRadioLarge: 'one',
      enRadioGroupName: 'vue',
    }
  },
}
</script>

<template>
  <!-- label prop instead of default slot -->
  <LhRadio v-model="enRadioLabel" value="one" label="Label prop" />
  <!-- native form name -->
  <LhRadio v-model="enRadioName" value="one" name="plan" label="name=plan" />
  <!-- small size -->
  <LhRadio v-model="enRadioSmall" value="one" size="small" label="small" />
  <!-- large size -->
  <LhRadio v-model="enRadioLarge" value="one" size="large" label="large" />
  <!-- group with native name and unified size -->
  <LhRadioGroup v-model="enRadioGroupName" name="framework" size="large">
    <LhRadio value="vue" label="Vue" />
    <LhRadio value="react" label="React" />
  </LhRadioGroup>
</template>

Props

Prop	Description	Type	Default
modelValue	Bound value	unknown	—
value	Radio value	unknown	—
label	—	string	—
disabled	Disabled	boolean	false
name	—	string	—
size	Size	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
sx	sx quick-layout props	LhSxProps	—

Events

Event	Description	Callback
update:modelValue	Value change	(value: unknown) => void
change	Selection changed	(value: unknown) => void

Slots

Slot	Description
default	Radio content