v2.1.8
/
Use our Nuxt starter

RadioGroup

A collection of radio buttons to pick a single choice from several options.
GitHub
Demo
Nuxt UI
RadioGroupRadioGroup

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.

{
  "wait": "Loading client-side content..."
}

Items

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

{
  "wait": "Loading client-side content..."
}

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

  • label?: string
  • description?: string
  • value?: string
  • disabled?: boolean
  • class?: any
  • b24ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue }

This is the first option.

This is the second option.

This is the third option.

{
  "wait": "Loading client-side content..."
}
When using objects, you need to reference the value property of the object in the v-model directive or the default-value prop.

Value Key

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

This is the first option.

This is the second option.

This is the third option.

{
  "wait": "Loading client-side content..."
}

Legend

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

Theme
{
  "wait": "Loading client-side content..."
}

Color

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

{
  "wait": "Loading client-side content..."
}

Variant

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

{
  "wait": "Loading client-side content..."
}

Size

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

{
  "wait": "Loading client-side content..."
}

Orientation

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

{
  "wait": "Loading client-side content..."
}

Indicator

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

{
  "wait": "Loading client-side content..."
}

Disabled

Use the disabled prop to disable the RadioGroup.

{
  "wait": "Loading client-side content..."
}

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

legend string
valueKey'value' string | number

When items is an array of objects, select the field to use as the value.

labelKey'label' string | number

When items is an array of objects, select the field to use as the label.

descriptionKey'description' string | number

When items is an array of objects, select the field to use as the description.

items RadioGroupItem[]
modelValueany

The controlled value of the RadioGroup. Can be bind as v-model.

defaultValueany

The value of the RadioGroup when initially rendered. Use when you do not need to control the state of the RadioGroup.

size'md' "xs" | "sm" | "md" | "lg"
variant'list' "card" | "list" | "table"
color'air-primary'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot"
orientation'vertical' "horizontal" | "vertical"

The orientation the radio buttons are laid out.

indicator'start' "start" | "end" | "hidden"

Position of the indicator.

disabledboolean

When true, prevents the user from interacting with radio items.

loopboolean

When true, keyboard navigation will loop from last item to first, and vice versa.

name string

The name of the field. Submitted with its owning form as part of a name/value pair.

requiredboolean

When true, indicates that the user must set the value before the owning form can be submitted.

b24ui { root?: ClassNameValue; fieldset?: ClassNameValue; legend?: ClassNameValue; item?: ClassNameValue; base?: ClassNameValue; indicator?: ClassNameValue; container?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; }

Slots

Slot Type
legend{}
label{ item: { [key: string]: any; label?: string | undefined; description?: string | undefined; disabled?: boolean | undefined; value?: AcceptableValue | undefined; class?: any; b24ui?: Pick<{ root?: ClassNameValue; fieldset?: ClassNameValue; legend?: ClassNameValue; item?: ClassNameValue; base?: ClassNameValue; indicator?: ClassNameValue; container?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; }, "label" | "description" | "indicator" | "item" | "base" | "container" | "wrapper"> | undefined; } & { id: string; }; modelValue?: AcceptableValue | undefined; }
description{ item: { [key: string]: any; label?: string | undefined; description?: string | undefined; disabled?: boolean | undefined; value?: AcceptableValue | undefined; class?: any; b24ui?: Pick<{ root?: ClassNameValue; fieldset?: ClassNameValue; legend?: ClassNameValue; item?: ClassNameValue; base?: ClassNameValue; indicator?: ClassNameValue; container?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; }, "label" | "description" | "indicator" | "item" | "base" | "container" | "wrapper"> | undefined; } & { id: string; }; modelValue?: AcceptableValue | undefined; }

Emits

Event Type
update:modelValue[value: any]
change[event: Event]

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    radioGroup: {
      slots: {
        root: 'relative',
        fieldset: 'flex',
        legend: 'mb-1.5 block text-(--b24ui-typography-label-color)',
        item: 'flex items-start',
        base: 'cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background)',
        indicator: 'flex items-center justify-center size-full rounded-(--ui-border-radius-pill) after:bg-(--b24ui-color) after:rounded-(--ui-border-radius-pill) bg-(--b24ui-background)',
        container: 'flex items-center',
        wrapper: 'font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) w-full',
        label: 'cursor-pointer block text-(--b24ui-typography-label-color)',
        description: 'text-(--b24ui-typography-description-color)'
      },
      variants: {
        color: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          },
          default: {
            root: 'style-old-default'
          },
          danger: {
            root: 'style-old-danger'
          },
          success: {
            root: 'style-old-success'
          },
          warning: {
            root: 'style-old-warning'
          },
          primary: {
            root: 'style-old-primary'
          },
          secondary: {
            root: 'style-old-secondary'
          },
          collab: {
            root: 'style-old-collab'
          },
          ai: {
            root: 'style-old-ai'
          }
        },
        variant: {
          list: {},
          card: {
            item: 'cursor-pointer items-start border border-(--ui-color-design-outline-na-stroke) bg-(--ui-color-design-outline-na-bg) has-data-[state=checked]:border-(--b24ui-border-color)'
          },
          table: {
            item: 'cursor-pointer border border-(--ui-color-design-outline-na-stroke) bg-(--ui-color-design-outline-na-bg) has-data-[state=checked]:bg-(--b24ui-background)/24 has-data-[state=checked]:border-(--b24ui-border-color) has-data-[state=checked]:text-(--b24ui-color) has-data-[state=checked]:z-[1]'
          }
        },
        orientation: {
          horizontal: {
            fieldset: 'flex-row',
            root: 'me-2'
          },
          vertical: {
            fieldset: 'flex-col'
          }
        },
        indicator: {
          start: {
            item: 'flex-row',
            base: 'me-2'
          },
          end: {
            item: 'flex-row-reverse',
            base: 'ms-2'
          },
          hidden: {
            base: 'sr-only',
            wrapper: 'text-center'
          }
        },
        size: {
          xs: {
            fieldset: 'gap-x-[12px] gap-y-[4px]',
            legend: 'text-(length:--ui-font-size-xs)',
            base: 'size-[12px]',
            item: 'text-(length:--ui-font-size-xs)',
            label: 'leading-[11px]',
            container: 'h-[12px]',
            indicator: 'after:size-[4px]'
          },
          sm: {
            fieldset: 'gap-x-[14px] gap-y-[6px]',
            legend: 'text-(length:--ui-font-size-xs)',
            base: 'size-[14px]',
            item: 'text-(length:--ui-font-size-sm)',
            label: 'leading-[14px]',
            container: 'h-[14px]',
            indicator: 'after:size-[6px]'
          },
          md: {
            fieldset: 'gap-x-[16px] gap-y-[8px]',
            legend: 'text-(length:--ui-font-size-sm)',
            base: 'size-[16px]',
            item: 'text-(length:--ui-font-size-lg)',
            label: 'leading-[15px]',
            container: 'h-[16px]',
            indicator: 'after:size-[6px]'
          },
          lg: {
            fieldset: 'gap-x-[16px] gap-y-[8px]',
            legend: 'text-(length:--ui-font-size-sm)',
            base: 'size-[20px]',
            item: 'text-(length:--ui-font-size-xl)',
            label: 'leading-[18px]',
            container: 'h-[20px]',
            indicator: 'after:size-[8px]'
          }
        },
        disabled: {
          true: {
            item: 'opacity-30',
            base: 'cursor-not-allowed',
            label: 'cursor-not-allowed',
            description: 'cursor-not-allowed'
          }
        },
        required: {
          true: {
            label: "after:content-['*'] after:ms-0.5 after:text-(--ui-color-accent-main-alert)"
          }
        }
      },
      compoundVariants: [
        {
          size: 'xs',
          variant: 'card',
          class: {
            item: 'px-[13px] py-[7px] rounded-(--ui-border-radius-xs)'
          }
        },
        {
          size: 'sm',
          variant: 'card',
          class: {
            item: 'px-[13px] py-[9px] rounded-(--ui-border-radius-sm)'
          }
        },
        {
          size: 'md',
          variant: 'card',
          class: {
            item: 'px-[17px] py-[10px] rounded-(--ui-border-radius-md)'
          }
        },
        {
          size: 'lg',
          variant: 'card',
          class: {
            item: 'px-[23px] py-[12px] rounded-(--ui-border-radius-md)'
          }
        },
        {
          size: 'xs',
          variant: 'table',
          class: {
            item: 'px-[13px] py-[7px]'
          }
        },
        {
          size: 'sm',
          variant: 'table',
          class: {
            item: 'px-[13px] py-[9px]'
          }
        },
        {
          size: 'md',
          variant: 'table',
          class: {
            item: 'px-[17px] py-[10px]'
          }
        },
        {
          size: 'lg',
          variant: 'table',
          class: {
            item: 'px-[23px] py-[12px]'
          }
        },
        {
          size: 'xs',
          variant: 'table',
          orientation: 'horizontal',
          class: {
            item: 'first-of-type:rounded-s-(--ui-border-radius-xs) last-of-type:rounded-e-(--ui-border-radius-xs)',
            fieldset: 'gap-0 -space-x-px'
          }
        },
        {
          size: 'xs',
          variant: 'table',
          orientation: 'vertical',
          class: {
            item: 'first-of-type:rounded-t-(--ui-border-radius-xs) last-of-type:rounded-b-(--ui-border-radius-xs)',
            fieldset: 'gap-0 -space-y-px'
          }
        },
        {
          size: 'sm',
          variant: 'table',
          orientation: 'horizontal',
          class: {
            item: 'first-of-type:rounded-s-(--ui-border-radius-sm) last-of-type:rounded-e-(--ui-border-radius-sm)',
            fieldset: 'gap-0 -space-x-px'
          }
        },
        {
          size: 'sm',
          variant: 'table',
          orientation: 'vertical',
          class: {
            item: 'first-of-type:rounded-t-(--ui-border-radius-sm) last-of-type:rounded-b-(--ui-border-radius-sm)',
            fieldset: 'gap-0 -space-y-px'
          }
        },
        {
          size: [
            'lg',
            'md'
          ],
          variant: 'table',
          orientation: 'horizontal',
          class: {
            item: 'first-of-type:rounded-s-(--ui-border-radius-md) last-of-type:rounded-e-(--ui-border-radius-md)',
            fieldset: 'gap-0 -space-x-px'
          }
        },
        {
          size: [
            'lg',
            'md'
          ],
          variant: 'table',
          orientation: 'vertical',
          class: {
            item: 'first-of-type:rounded-t-(--ui-border-radius-md) last-of-type:rounded-b-(--ui-border-radius-md)',
            fieldset: 'gap-0 -space-y-px'
          }
        },
        {
          variant: [
            'card',
            'table'
          ],
          disabled: true,
          class: {
            item: 'cursor-not-allowed'
          }
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        size: 'md',
        variant: 'list',
        orientation: 'vertical',
        indicator: 'start'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        radioGroup: {
          slots: {
            root: 'relative',
            fieldset: 'flex',
            legend: 'mb-1.5 block text-(--b24ui-typography-label-color)',
            item: 'flex items-start',
            base: 'cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background)',
            indicator: 'flex items-center justify-center size-full rounded-(--ui-border-radius-pill) after:bg-(--b24ui-color) after:rounded-(--ui-border-radius-pill) bg-(--b24ui-background)',
            container: 'flex items-center',
            wrapper: 'font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) w-full',
            label: 'cursor-pointer block text-(--b24ui-typography-label-color)',
            description: 'text-(--b24ui-typography-description-color)'
          },
          variants: {
            color: {
              'air-primary': {
                root: 'style-filled'
              },
              'air-primary-success': {
                root: 'style-filled-success'
              },
              'air-primary-alert': {
                root: 'style-filled-alert'
              },
              'air-primary-copilot': {
                root: 'style-filled-copilot'
              },
              'air-primary-warning': {
                root: 'style-filled-warning'
              },
              default: {
                root: 'style-old-default'
              },
              danger: {
                root: 'style-old-danger'
              },
              success: {
                root: 'style-old-success'
              },
              warning: {
                root: 'style-old-warning'
              },
              primary: {
                root: 'style-old-primary'
              },
              secondary: {
                root: 'style-old-secondary'
              },
              collab: {
                root: 'style-old-collab'
              },
              ai: {
                root: 'style-old-ai'
              }
            },
            variant: {
              list: {},
              card: {
                item: 'cursor-pointer items-start border border-(--ui-color-design-outline-na-stroke) bg-(--ui-color-design-outline-na-bg) has-data-[state=checked]:border-(--b24ui-border-color)'
              },
              table: {
                item: 'cursor-pointer border border-(--ui-color-design-outline-na-stroke) bg-(--ui-color-design-outline-na-bg) has-data-[state=checked]:bg-(--b24ui-background)/24 has-data-[state=checked]:border-(--b24ui-border-color) has-data-[state=checked]:text-(--b24ui-color) has-data-[state=checked]:z-[1]'
              }
            },
            orientation: {
              horizontal: {
                fieldset: 'flex-row',
                root: 'me-2'
              },
              vertical: {
                fieldset: 'flex-col'
              }
            },
            indicator: {
              start: {
                item: 'flex-row',
                base: 'me-2'
              },
              end: {
                item: 'flex-row-reverse',
                base: 'ms-2'
              },
              hidden: {
                base: 'sr-only',
                wrapper: 'text-center'
              }
            },
            size: {
              xs: {
                fieldset: 'gap-x-[12px] gap-y-[4px]',
                legend: 'text-(length:--ui-font-size-xs)',
                base: 'size-[12px]',
                item: 'text-(length:--ui-font-size-xs)',
                label: 'leading-[11px]',
                container: 'h-[12px]',
                indicator: 'after:size-[4px]'
              },
              sm: {
                fieldset: 'gap-x-[14px] gap-y-[6px]',
                legend: 'text-(length:--ui-font-size-xs)',
                base: 'size-[14px]',
                item: 'text-(length:--ui-font-size-sm)',
                label: 'leading-[14px]',
                container: 'h-[14px]',
                indicator: 'after:size-[6px]'
              },
              md: {
                fieldset: 'gap-x-[16px] gap-y-[8px]',
                legend: 'text-(length:--ui-font-size-sm)',
                base: 'size-[16px]',
                item: 'text-(length:--ui-font-size-lg)',
                label: 'leading-[15px]',
                container: 'h-[16px]',
                indicator: 'after:size-[6px]'
              },
              lg: {
                fieldset: 'gap-x-[16px] gap-y-[8px]',
                legend: 'text-(length:--ui-font-size-sm)',
                base: 'size-[20px]',
                item: 'text-(length:--ui-font-size-xl)',
                label: 'leading-[18px]',
                container: 'h-[20px]',
                indicator: 'after:size-[8px]'
              }
            },
            disabled: {
              true: {
                item: 'opacity-30',
                base: 'cursor-not-allowed',
                label: 'cursor-not-allowed',
                description: 'cursor-not-allowed'
              }
            },
            required: {
              true: {
                label: "after:content-['*'] after:ms-0.5 after:text-(--ui-color-accent-main-alert)"
              }
            }
          },
          compoundVariants: [
            {
              size: 'xs',
              variant: 'card',
              class: {
                item: 'px-[13px] py-[7px] rounded-(--ui-border-radius-xs)'
              }
            },
            {
              size: 'sm',
              variant: 'card',
              class: {
                item: 'px-[13px] py-[9px] rounded-(--ui-border-radius-sm)'
              }
            },
            {
              size: 'md',
              variant: 'card',
              class: {
                item: 'px-[17px] py-[10px] rounded-(--ui-border-radius-md)'
              }
            },
            {
              size: 'lg',
              variant: 'card',
              class: {
                item: 'px-[23px] py-[12px] rounded-(--ui-border-radius-md)'
              }
            },
            {
              size: 'xs',
              variant: 'table',
              class: {
                item: 'px-[13px] py-[7px]'
              }
            },
            {
              size: 'sm',
              variant: 'table',
              class: {
                item: 'px-[13px] py-[9px]'
              }
            },
            {
              size: 'md',
              variant: 'table',
              class: {
                item: 'px-[17px] py-[10px]'
              }
            },
            {
              size: 'lg',
              variant: 'table',
              class: {
                item: 'px-[23px] py-[12px]'
              }
            },
            {
              size: 'xs',
              variant: 'table',
              orientation: 'horizontal',
              class: {
                item: 'first-of-type:rounded-s-(--ui-border-radius-xs) last-of-type:rounded-e-(--ui-border-radius-xs)',
                fieldset: 'gap-0 -space-x-px'
              }
            },
            {
              size: 'xs',
              variant: 'table',
              orientation: 'vertical',
              class: {
                item: 'first-of-type:rounded-t-(--ui-border-radius-xs) last-of-type:rounded-b-(--ui-border-radius-xs)',
                fieldset: 'gap-0 -space-y-px'
              }
            },
            {
              size: 'sm',
              variant: 'table',
              orientation: 'horizontal',
              class: {
                item: 'first-of-type:rounded-s-(--ui-border-radius-sm) last-of-type:rounded-e-(--ui-border-radius-sm)',
                fieldset: 'gap-0 -space-x-px'
              }
            },
            {
              size: 'sm',
              variant: 'table',
              orientation: 'vertical',
              class: {
                item: 'first-of-type:rounded-t-(--ui-border-radius-sm) last-of-type:rounded-b-(--ui-border-radius-sm)',
                fieldset: 'gap-0 -space-y-px'
              }
            },
            {
              size: [
                'lg',
                'md'
              ],
              variant: 'table',
              orientation: 'horizontal',
              class: {
                item: 'first-of-type:rounded-s-(--ui-border-radius-md) last-of-type:rounded-e-(--ui-border-radius-md)',
                fieldset: 'gap-0 -space-x-px'
              }
            },
            {
              size: [
                'lg',
                'md'
              ],
              variant: 'table',
              orientation: 'vertical',
              class: {
                item: 'first-of-type:rounded-t-(--ui-border-radius-md) last-of-type:rounded-b-(--ui-border-radius-md)',
                fieldset: 'gap-0 -space-y-px'
              }
            },
            {
              variant: [
                'card',
                'table'
              ],
              disabled: true,
              class: {
                item: 'cursor-not-allowed'
              }
            }
          ],
          defaultVariants: {
            color: 'air-primary',
            size: 'md',
            variant: 'list',
            orientation: 'vertical',
            indicator: 'start'
          }
        }
      }
    })
  ]
})

PinInput

A PIN code input component.

Range

A control for selecting a numeric value within a specified range.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24