Radio Group

Neobrutalist-styled radio group built on reka-ui's RadioGroup primitive, used for single selection.

Demo

Preview

默认

次要

危险

自定义 aria-label

默认

舒适

紧凑

Installation

pnpm dlx brutx-vue@latest add radio-group

Usage

<script setup>
import { ref } from 'vue'
import { RadioGroup, RadioGroupItem, Label } from 'brutx-ui-vue'

const selected = ref('comfortable')
</script>

<template>
    <RadioGroup v-model="selected">
        <div class="flex items-center gap-3">
            <RadioGroupItem value="default" />
            <Label for="default">Default</Label>
        </div>
        <div class="flex items-center gap-3">
            <RadioGroupItem value="comfortable" />
            <Label for="comfortable">Comfortable</Label>
        </div>
        <div class="flex items-center gap-3">
            <RadioGroupItem value="compact" />
            <Label for="compact">Compact</Label>
        </div>
    </RadioGroup>
</template>

Accessibility Label

Provide a readable name for the radio group via ariaLabel, making it easier for screen readers to identify the group's purpose. This is especially useful when there is no visible group heading (such as a Label or fieldset legend).

<script setup>
import { ref } from 'vue'
import { RadioGroup, RadioGroupItem } from 'brutx-ui-vue'

const density = ref('comfortable')
</script>

<template>
    <RadioGroup v-model="density" aria-label="Layout density">
        <div class="flex items-center gap-3">
            <RadioGroupItem value="default" />
            <span class="text-sm font-bold">Default</span>
        </div>
        <div class="flex items-center gap-3">
            <RadioGroupItem value="comfortable" />
            <span class="text-sm font-bold">Comfortable</span>
        </div>
        <div class="flex items-center gap-3">
            <RadioGroupItem value="compact" />
            <span class="text-sm font-bold">Compact</span>
        </div>
    </RadioGroup>
</template>

Variants

Variant	Description
default	Default style, uses Primary (coral) background when selected
secondary	Uses Secondary background when selected
accent	Uses Accent background when selected
success	Uses Success background when selected
danger	Uses Danger background when selected

<template>
    <RadioGroupItem value="option" variant="danger" />
</template>

Sizes

Size	Description
sm	Small (20 x 20)
default	Default (24 x 24)
lg	Large (28 x 28)

Sub-components

Component	Description
RadioGroup	Root container, manages selected state and keyboard navigation
RadioGroupItem	Radio option, each option corresponds to a selectable value

API Reference

RadioGroup

RadioGroup — Props

Name	Type	Default	Description
modelValue	string | undefined	—	The currently selected string value, synchronized through a controlled v-model.
Details Declared type string | undefined Default value details Not declared — Source RadioGroup.vue:7 packages/ui/src/components/radio-group/RadioGroup.vue
name	string | undefined	—	The form field name passed to the radio-group primitive.
Details Declared type string | undefined Default value details Not declared — Source RadioGroup.vue:8 packages/ui/src/components/radio-group/RadioGroup.vue
disabled	boolean | undefined	—	Disables every radio item in the group.
Details Declared type boolean | undefined Literal values false true Default value details Not declared — Source RadioGroup.vue:9 packages/ui/src/components/radio-group/RadioGroup.vue
orientation	"vertical" | "horizontal" | undefined	—	Sets item layout: vertical stacks items, while horizontal lays them out with wrapping; vertical is the default.
Details Declared type "vertical" | "horizontal" | undefined Literal values "horizontal" "vertical" Default value details Not declared — Source RadioGroup.vue:10 packages/ui/src/components/radio-group/RadioGroup.vue
class	string | undefined	—	Additional CSS classes applied to the radio-group root container.
Details Declared type string | undefined Default value details Not declared — Source RadioGroup.vue:11 packages/ui/src/components/radio-group/RadioGroup.vue
ariaLabel	string | undefined	—	Provides an accessible name for the whole radio group.
Details Declared type string | undefined Default value details Not declared — Source RadioGroup.vue:13 packages/ui/src/components/radio-group/RadioGroup.vue

RadioGroup — Events

Name	Signature or type	Description
@update:modelValue	[value: string]	Emits the new string value when the selection changes so v-model can be synchronized.
Details Declared type [value: string] Source RadioGroup.vue packages/ui/src/components/radio-group/RadioGroup.vue

RadioGroup — Slots

Name	Signature or type	Description
#default	{}	Contains the RadioGroupItem options belonging to this group.
Details Declared type {} Source RadioGroup.vue packages/ui/src/components/radio-group/RadioGroup.vue

RadioGroupItem

RadioGroupItem — Props

Name	Type	Default	Description
value Required	string	—	The string value represented by this option; when selected, it becomes the RadioGroup modelValue.
Details Declared type string Default value details Not declared — Source RadioGroupItem.vue:12 packages/ui/src/components/radio-group/RadioGroupItem.vue
disabled	boolean | undefined	false	Disables this option while leaving other enabled options in the group interactive.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/radio-group/RadioGroupItem.vue Resolved value false Source RadioGroupItem.vue:13 packages/ui/src/components/radio-group/RadioGroupItem.vue
class	string | undefined	undefined	Additional CSS classes applied to the radio option button.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/radio-group/RadioGroupItem.vue Resolved value undefined Source RadioGroupItem.vue:14 packages/ui/src/components/radio-group/RadioGroupItem.vue
variant	"accent" | "danger" | "default" | "secondary" | "success" | undefined	"default"	Sets the color variant of the radio option and its selected indicator.
Details Declared type NonNullable<"default" | "secondary" | "success" | "danger" | "accent" | null | undefined> | undefined Literal values "accent" "danger" "default" "secondary" "success" Default value details Declaration 'default' Source: packages/ui/src/components/radio-group/RadioGroupItem.vue Resolved value "default" Source RadioGroupItem.vue:15 packages/ui/src/components/radio-group/RadioGroupItem.vue
size	"default" | "lg" | "sm" | undefined	"default"	Sets the size of the radio button and selected indicator icon.
Details Declared type NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values "default" "lg" "sm" Default value details Declaration 'default' Source: packages/ui/src/components/radio-group/RadioGroupItem.vue Resolved value "default" Source RadioGroupItem.vue:16 packages/ui/src/components/radio-group/RadioGroupItem.vue

Accessibility

• Keyboard: Arrow keys navigate between radio options, Space key selects the currently focused option
• ARIA attributes: Selected option uses aria-checked="true", supports providing a readable group name via ariaLabel
• Focus management: Tab key focuses the selected option or the first option, arrow keys cycle focus between options