Accessibility: Partial

Translations: Not Needed

Migration Guide: Full

Radio Group

Group of radios for multiple selections

Default

 

Option 1

 

Option 2

 

Option 3

Vue

<template>
  <HLRadioGroup id="radio-group-default" v-model:value="value">
    <HLSpace id="radio-space-default" size="md">
      <HLRadio id="radio-default-1" value="option1">Option 1</HLRadio>
      <HLRadio id="radio-default-2" value="option2">Option 2</HLRadio>
      <HLRadio id="radio-default-3" value="option3">Option 3</HLRadio>
    </HLSpace>
  </HLRadioGroup>
</template>
<script setup lang="ts">
  import { HLRadioGroup, HLRadio, HLSpace } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const value = ref('option1')
</script>

Different Sizes

LG Size

 

Option 1

 

Option 2

 

Option 3

MD Size

 

Option 1

 

Option 2

 

Option 3

SM Size

 

Option 1

 

Option 2

 

Option 3

XS Size

 

Option 1

 

Option 2

 

Option 3

2XS Size

 

Option 1

 

Option 2

 

Option 3

3XS Size

 

Option 1

 

Option 2

 

Option 3

Vue

<template>
  <HLRadioGroup v-model:value="value">
    <HLSpace size="size">
      <HLRadio value="option1">Option 1</HLRadio>
      <HLRadio value="option2">Option 2</HLRadio>
      <HLRadio value="option3">Option 3</HLRadio>
    </HLSpace>
  </HLRadioGroup>
</template>
<script setup lang="ts">
  import { HLRadioGroup, HLRadio, HLSpace } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const value = ref('option1')
</script>

Vertical Layout

LG Size

 

Option 1

 

Option 2

 

Option 3

MD Size

 

Option 1

 

Option 2

 

Option 3

SM Size

 

Option 1

 

Option 2

 

Option 3

XS Size

 

Option 1

 

Option 2

 

Option 3

2XS Size

 

Option 1

 

Option 2

 

Option 3

3XS Size

 

Option 1

 

Option 2

 

Option 3

Vue

<template>
  <HLRadioGroup id="radio-group" v-model:value="value" size="size">
    <HLSpace id="radio-space" vertical>
      <HLRadio id="radio-1" value="lg1">Option 1</HLRadio>
      <HLRadio id="radio-2" value="lg2">Option 2</HLRadio>
      <HLRadio id="radio-3" value="lg3">Option 3</HLRadio>
    </HLSpace>
  </HLRadioGroup>
</template>
<script setup lang="ts">
  import { HLRadioGroup, HLRadio, HLSpace } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const value = ref('option1')
</script>

Disabled States

 

Option 1

 

Option 2

 

Option 3

Vue

<template>
  <HLRadioGroup v-model:value="disabledValue" disabled>
    <HLSpace>
      <HLRadio value="option1">Option 1</HLRadio>
      <HLRadio value="option2">Option 2</HLRadio>
      <HLRadio value="option3">Option 3</HLRadio>
    </HLSpace>
  </HLRadioGroup>
</template>
<script setup lang="ts">
  import { HLRadioGroup, HLRadio, HLSpace } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const disabledValue = ref('option1')
</script>

Error States

LG Size

 

Option 1

 

Option 2

 

Option 3

MD Size

 

Option 1

 

Option 2

 

Option 3

SM Size

 

Option 1

 

Option 2

 

Option 3

XS Size

 

Option 1

 

Option 2

 

Option 3

2XS Size

 

Option 1

 

Option 2

 

Option 3

3XS Size

 

Option 1

 

Option 2

 

Option 3

Vue

<template>
  <HLFormItem id="radio-form-error-3xs" validation-status="error">
    <HLRadioGroup id="radio-group-error-3xs" v-model:value="value" size="3xs">
      <HLSpace id="radio-space-error-3xs">
        <HLRadio id="radio-error-3xs-1" value="option1">Option 1</HLRadio>
        <HLRadio id="radio-error-3xs-2" value="option2">Option 2</HLRadio>
        <HLRadio id="radio-error-3xs-3" value="option3">Option 3</HLRadio>
      </HLSpace>
    </HLRadioGroup>
  </HLFormItem>
</template>
<script setup lang="ts">
  import { HLRadioGroup, HLRadio, HLSpace, HLFormItem } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const value = ref('option1')
</script>

Imports

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

Props

Name	Type	Default	Description
id *	string | undefined	undefined	The id of the element
value	Array	[]	The selected values (v-model binding)
disabled	boolean	false	Whether to disable all radios in the group
size	'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'	'md'	Size of all radios in the group
name	string | undefined	undefined	Name attribute for the radio group

Emits

Name	Parameters	Description
@update:value	(value: Array) => void	When the selection changes
@change	(value: Array) => void	When the selection changes

Slots

Name	Parameters	Description
default	()	The content slot for radio items