RadioGroup

A collection of radio buttons to pick a single choice from several options.

RadioGroup

Nuxt UI

Git

Demo

Usage

Use the v-model directive to control the value of the RadioGroup or the default-value prop to set the initial value when you do not need to control its state.

Items

Use the items prop as an array of strings or numbers:

Details

<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['Payment', 'Delivery', 'Scripts'])
const value = ref('Delivery')
</script>

<template>
  <B24RadioGroup
    v-model="value"
    :items="items"
  />
</template>

You can also pass an array of objects with the following properties:

• label?: string
• description?: string
• value?: string
• disabled?: boolean

DANGER

When using objects, you need to reference the value property of the object in the v-model directive or the default-value prop.

Details

<script setup lang="ts">
import { ref } from 'vue'

const items = ref([
  {
    label: 'CRM settings',
    description: 'Configure your CRM system.\n',
    value: 'settings'
  },
  {
    label: 'My company details',
    description: 'Access and update your company\'s information and profile.\n',
    value: 'my_company_details'
  },
  {
    label: 'Access permissions',
    description: 'Manage and configure user access levels and permissions within the system.',
    value: 'access_permissions'
  }
])
const value = ref('my_company_details')
</script>

<template>
  <B24RadioGroup
    v-model="value"
    :items="items"
  />
</template>

Value Key

You can change the property that is used to set the value by using the value-key prop. Defaults to value.

Details

<script setup lang="ts">
import { ref } from 'vue'

const items = ref([
  {
    label: 'CRM settings',
    description: 'Configure your CRM system.\n',
    id: 'settings'
  },
  {
    label: 'My company details',
    description: 'Access and update your company\'s information and profile.\n',
    id: 'my_company_details'
  },
  {
    label: 'Access permissions',
    description: 'Manage and configure user access levels and permissions within the system.',
    id: 'access_permissions'
  }
])
const value = ref('access_permissions')
</script>

<template>
  <B24RadioGroup
    v-model="value"
    value-key="id"
    :items="items"
  />
</template>

Legend

Use the legend prop to set the legend of the RadioGroup.

Details

<script setup lang="ts">
import { ref } from 'vue'

export interface ExampleProps {
  legend?: string
}

withDefaults(defineProps<ExampleProps>(), {
  legend: 'You need to choose'
})

const items = ref(['Payment', 'Delivery', 'Scripts'])
const value = ref('Delivery')
</script>

<template>
  <B24RadioGroup
    v-model="value"
    :items="items"
    :legend="legend"
  />
</template>

Color

Use the color prop to change the color of the RadioGroup.

Details

<script setup lang="ts">
import { ref } from 'vue'

export interface ExampleProps {
  color?: any
}

withDefaults(defineProps<ExampleProps>(), {
  color: 'default'
})

const items = ref(['Payment', 'Delivery', 'Scripts'])
const value = ref('Delivery')
</script>

<template>
  <B24RadioGroup
    v-model="value"
    :items="items"
    :color="color"
  />
</template>

Variant

Use the variant prop to change the variant of the RadioGroup.

Details

<script setup lang="ts">
import { ref } from 'vue'

export interface ExampleProps {
  color?: any
  variant?: any
}

withDefaults(defineProps<ExampleProps>(), {
  color: 'default',
  variant: 'list'
})

const items = ref(['Payment', 'Delivery', 'Scripts'])
const value = ref('Delivery')
</script>

<template>
  <B24RadioGroup
    v-model="value"
    :items="items"
    :color="color"
    :variant="variant"
  />
</template>

Size

Use the size prop to change the size of the RadioGroup.

Details

<script setup lang="ts">
import { ref } from 'vue'

export interface ExampleProps {
  size?: any
  variant?: any
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'md',
  variant: 'list'
})

const items = ref(['Payment', 'Delivery', 'Scripts'])
const value = ref('Delivery')
</script>

<template>
  <B24RadioGroup
    v-model="value"
    :items="items"
    :size="size"
    :variant="variant"
  />
</template>

Orientation

Use the orientation prop to change the orientation of the RadioGroup. Defaults to vertical.

Details

<script setup lang="ts">
import { ref } from 'vue'

export interface ExampleProps {
  orientation?: any
  variant?: any
}

withDefaults(defineProps<ExampleProps>(), {
  orientation: 'horizontal',
  variant: 'list'
})

const items = ref(['Payment', 'Delivery', 'Scripts'])
const value = ref('Delivery')
</script>

<template>
  <B24RadioGroup
    v-model="value"
    :items="items"
    :orientation="orientation"
    :variant="variant"
  />
</template>

Indicator

Use the indicator prop to change the position or hide the indicator. Defaults to start.

Details

<script setup lang="ts">
import { ref } from 'vue'

export interface ExampleProps {
  indicator?: any
  variant?: any
}

withDefaults(defineProps<ExampleProps>(), {
  indicator: 'start',
  variant: 'list'
})

const items = ref(['Payment', 'Delivery', 'Scripts'])
const value = ref('Delivery')
</script>

<template>
  <B24RadioGroup
    v-model="value"
    :items="items"
    :indicator="indicator"
    :variant="variant"
  />
</template>

Disabled

Use the disabled prop to disable the RadioGroup.

Details

<script setup lang="ts">
import { ref } from 'vue'

export interface ExampleProps {
  isDisabled?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  isDisabled: true
})

const items = ref(['Payment', 'Delivery', 'Scripts'])
const value = ref('Delivery')
</script>

<template>
  <B24RadioGroup
    v-model="value"
    :items="items"
    :disabled="isDisabled"
  />
</template>

API

Props

Prop	Default	Type
as	'div'	any The element or component this component should render as.
legend		string
valueKey	"value"	string When `items` is an array of objects, select the field to use as the value.
labelKey	"label"	string When `items` is an array of objects, select the field to use as the label.
descriptionKey	"description"	string When `items` is an array of objects, select the field to use as the description.
items		RadioGroupItem[]
size	'md'	"lg" | "md" | "xs" | "sm"
variant	'list'	"table" | "list" | "card"
color	'primary'	"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
orientation	"vertical"	"vertical" | "horizontal" The orientation the radio buttons are laid out.
indicator	'start'	"start" | "end" | "hidden" Position of the indicator.
b24ui		{ root?: ClassNameValue; fieldset?: ClassNameValue; legend?: ClassNameValue; item?: ClassNameValue; base?: ClassNameValue; ... 4 more ...; description?: ClassNameValue; }
disabled		boolean When `true`, prevents the user from interacting with radio items.
modelValue		null | string | number | Record<string, any> The controlled value of the radio item to check. Can be binded as `v-model`.
defaultValue		null | string | number | Record<string, any> The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.
required		boolean When `true`, indicates that the user must set the value before the owning form can be submitted.
name		string The name of the field. Submitted with its owning form as part of a name/value pair.
loop		boolean When `true`, keyboard navigation will loop from last item to first, and vice versa.

Slots

Slot	Type
legend	{}
label	{ item: RadioGroupItem & { id: string; }; modelValue?: AcceptableValue; }
description	{ item: RadioGroupItem & { id: string; }; modelValue?: AcceptableValue; }

Emits

Event	Type