Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Radio

Atomic radio element

Unchecked

 

Radio Label

 

Radio Label

 

Radio Label

 

Radio Label

 

Radio Label

 

Radio Label

Vue

<template>
  <HLSpace justify="flex-start" align="center">
    <HLRadio id="radio-unchecked" v-model="uncheckedValue" value="unchecked">Radio Label</HLRadio>
  </HLSpace>
</template>

<script setup>
  import { ref } from 'vue'
  const uncheckedValue = ref(false)
</script>

Checked

 

Radio Label

 

Radio Label

 

Radio Label

 

Radio Label

 

Radio Label

 

Radio Label

Vue

<template>
  <HLSpace justify="flex-start" align="center">
    <HLRadio id="radio-checked" v-model="checkedValue" value="checked" checked>Radio Label</HLRadio>
  </HLSpace>
</template>

<script setup>
  import { ref } from 'vue'
  const checkedValue = ref(true)
</script>

Disabled - Unchecked

 

Radio Label

 

Radio Label

 

Radio Label

 

Radio Label

 

Radio Label

 

Radio Label

Vue

<template>
  <HLSpace justify="flex-start" align="center">
    <HLRadio id="radio-disabled" disabled v-model="disabledValue" value="disabled">Radio Label</HLRadio>
  </HLSpace>
</template>

<script setup>
  import { ref } from 'vue'
  const disabledValue = ref(false)
</script>

Disabled - Checked

 

Radio Label

 

Radio Label

 

Radio Label

 

Radio Label

 

Radio Label

 

Radio Label

Vue

<template>
  <HLSpace justify="flex-start" align="center">
    <HLRadio id="radio-disabled-checked" disabled v-model="disabledCheckedValue" value="disabled-checked" checked>Radio Label</HLRadio>
  </HLSpace>
</template>

<script setup>
  import { ref } from 'vue'
  const disabledCheckedValue = ref(true)
</script>

Error state

 

Remember me

 

Remember me

 

Remember me

 

Remember me

 

Remember me

 

Remember me

Vue

<template>
  <HLFormItem validation-status="error">
    <HLRadio id="radio-error" v-model="errorValue" value="error">Remember me</HLRadio>
  </HLFormItem>
</template>

<script setup>
  import { ref } from 'vue'
  const errorValue = ref(false)
</script>

Only Icon

 

 

 

 

 

 

Vue

<template>
  <HLSpace justify="flex-start" align="center">
    <HLRadio id="radio-icon" v-model="onlyIconValue" value="icon" onlyIcon></HLRadio>
  </HLSpace>
</template>

<script setup>
  import { ref } from 'vue'
  const onlyIconValue = ref(false)
</script>

Imports

import { HLRadio } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id *	string | undefined	undefined	The unique identifier for the radio
checked	boolean	false	Whether the radio is checked
disabled	boolean	false	Whether the radio is disabled
size	'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'	'md'	The size of the radio
value	string | number | boolean | undefined	undefined	Value of the radio
name	string | undefined	undefined	The name of the radio
onlyIcon	boolean	false	Shows only the radio button without label spacing

Emits

Name	Parameters	Description
@update:checked	(value: boolean) => void	Callback when checked value changes
@change	(event: Event) => void	When radio state changes

Slots

Name	Parameters	Description
default	()	The default content slot