Radop Group

Single selection among multiple options.

Basic Usage

Bind v-model

<template>
  <HcRadioGroup
    v-model="value"
    label="Label text"
    :items="items"
  />
</template>

<script lang="ts" setup>
import { RadioItemType, HcRadioGroup } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value = ref('');

const items = ref<RadioItemType[]>([
  {
    value: 'option_1',
    label: 'Option 1',
  },
  {
    value: 'option_2',
    label: 'Option 2',
    disabled: true,
  },
  {
    value: 'option_3',
    label: 'Option 3',
  },
  {
    value: 'option_4',
    label: 'Option 4',
  },
  {
    value: 'option_5',
    label: 'Option 5',
  },
]);
</script>

Direction

Change prop direction to determinate radio group align

Label

Option 1

Option 2

Option 3

<template>
  <HcRadioGroup
    v-model="value"
    label="Label"
    :items="items"
    direction="col"
  />
</template>

<script lang="ts" setup>
import { RadioItemType, HcRadioGroup } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value = ref('');

const items = ref<RadioItemType[]>([
  {
    value: 'option_1',
    label: 'Option 1',
  },
  {
    value: 'option_2',
    label: 'Option 2',
  },
  {
    value: 'option_3',
    label: 'Option 3',
  },
]);
</script>

Column amount

Use prop cols together with direction="col" to determinate amount of cols

<template>
  <HcRadioGroup
    v-model="value"
    label="Label"
    :items="items"
    direction="col"
    :cols="3"
  />
</template>

<script lang="ts" setup>
import { RadioItemType, HcRadioGroup } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value = ref('');

const items = ref<RadioItemType[]>([
  {
    value: 'option_1',
    label: 'Option 1',
  },
  {
    value: 'option_2',
    label: 'Option 2',
  },
  {
    value: 'option_3',
    label: 'Option 3',
  },
  {
    value: 'option_4',
    label: 'Option 4',
  },
  {
    value: 'option_5',
    label: 'Option 5',
  },
  {
    value: 'option_6',
    label: 'Option 6',
  },
]);

</script>

Disabled & Readonly

Use prop disabled or readonly to change state

<template>
  <div class="grid grid-cols-2 gap-6">
    <HcRadioGroup
      v-model="value1"
      :items="items"
      label="Disabled"
      direction="col"
      disabled
    />

    <HcRadioGroup
      v-model="value2"
      :items="items"
      label="Readonly"
      direction="col"
      readonly
    />
  </div>
</template>

<script lang="ts" setup>
import { RadioItemType, HcRadioGroup } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref('');
const value2 = ref('');

const items = ref<RadioItemType[]>([
  {
    value: 'option_1',
    label: 'Option 1',
  },
  {
    value: 'option_2',
    label: 'Option 2',
  },
  {
    value: 'option_3',
    label: 'Option 3',
  },
  {
    value: 'option_4',
    label: 'Option 4',
  },
]);

</script>

Error message

Add prop errorMsg for show error message and change state to error

<template>
  <div>
    <HcRadioGroup
      v-model="value"
      label="Label"
      :items="items"
      error-msg="This field is required"
    />
  </div>
</template>

<script lang="ts" setup>
import { RadioItemType, HcRadioGroup } from '@deeepvision/hope-component-kit';

import { ref } from 'vue';

const value = ref('');

const items = ref<RadioItemType[]>([
  {
    value: 'option_1',
    label: 'Option 1',
  },
  {
    value: 'option_2',
    label: 'Option 2',
  },
  {
    value: 'option_3',
    label: 'Option 3',
  },
  {
    value: 'option_4',
    label: 'Option 4',
  },
  {
    value: 'option_5',
    label: 'Option 5',
  },
]);
</script>

Props

Property	Type	Values	Description	Default
modelValue	String	String	binding value
items	RadioItemType[]	RadioItemType[]	items of radio group	[]
label	String	String	label text
name	String	String	native 'name' attribute
direction	String	rowcol	direction of the radio group	row
cols	Number	Number	if direction is col, amount of cols	1
customClass	String	String	custom class for each radio item	1
errorMs	String	String	error message
disabled	Boolean	Boolean	whether component is disabled	false
readonly	Boolean	Boolean	whether component is read only	false

Slots

Property	Type	Values	Description	Default
label-suffix		-	Customize label suffix
default		-	Add your content under radio group items

Events

Property	Type	Values	Description	Default
update:model-value	Function	value - string \| number	triggers when the bound value changes
delete	Function	value - string \| number	triggers when the bound value changes

Radop Group #

Basic Usage #

Direction #

Column amount #

Disabled & Readonly #

Error message #

Props #

Slots #

Events #