Radio

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. Based on BrConfigProvider for global theming.

Component Features

🎨 Theme Configuration: Based on BrConfigProvider for global theming with colors, radius, shadows tokens.
📏 Multiple Sizes: Supports xs, sm, md (default), lg, xl, 2xl size specs.
❌ Disabled State: Supports disabled prop for individual options or entire group.
📐 Layout Options: Supports orientation prop to control horizontal or vertical arrangement.
🌗 Dark Mode: Automatically adapts to dark mode.
♿️ Accessibility: Built-in ARIA attributes with keyboard navigation support.

Basic Usage

The most basic usage of radio buttons, usually used with BrRadioGroup.

<script setup lang="ts">
import { ref } from 'vue'
import { BrRadio, BrRadioGroup } from '@breezeui/vue'

const value = ref('option-1')
</script>

<template>
  <BrRadioGroup v-model="value">
    <BrRadio id="r1" value="option-1" label="Default" />
    <BrRadio id="r2" value="option-2" label="Comfortable" />
    <BrRadio id="r3" value="option-3" label="Compact" />
  </BrRadioGroup>
</template>

Disabled State

Set the disabled prop to disable the radio button.

<script setup lang="ts">
import { ref } from 'vue'
import { BrRadio, BrRadioGroup } from '@breezeui/vue'

const value = ref('option-2')
</script>

<template>
  <BrRadioGroup v-model="value">
    <BrRadio id="d1" value="option-1" label="Option One" />
    <BrRadio id="d2" value="option-2" label="Option Two (Disabled)" disabled />
    <BrRadio id="d3" value="option-3" label="Option Three" />
  </BrRadioGroup>
</template>

Sizes

We provide a default set of sizes. You can control the size of the radio button via the size prop. Supports xs, sm, md (default), lg, xl, 2xl.

<script setup lang="ts">
import { ref } from 'vue'
import { BrRadio, BrRadioGroup, BrLabel } from '@breezeui/vue'

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

<template>
  <div class="space-y-6">
    <!-- Small Sizes -->
    <div class="space-y-3">
      <div class="flex items-center space-x-2">
        <BrRadioGroup v-model="value" orientation="horizontal">
          <BrRadio id="r-xs" value="xs" size="xs" label="Extra Small (xs)" />
          <BrRadio id="r-sm" value="sm" size="sm" label="Small (sm)" />
        </BrRadioGroup>
      </div>
    </div>

    <!-- Default/Medium Size -->
    <div class="space-y-3">
      <div class="flex items-center space-x-2">
        <BrRadioGroup v-model="value" orientation="horizontal">
           <BrRadio id="r-def" value="default" size="default" label="Default" />
           <BrRadio id="r-md" value="md" size="md" label="Medium (md)" />
        </BrRadioGroup>
      </div>
    </div>

    <!-- Large Sizes -->
    <div class="space-y-3">
      <div class="flex items-center space-x-2">
        <BrRadioGroup v-model="value" orientation="horizontal">
          <BrRadio id="r-lg" value="lg" size="lg" label="Large (lg)" />
          <BrRadio id="r-xl" value="xl" size="xl" label="Extra Large (xl)" />
        </BrRadioGroup>
      </div>
    </div>
    
     <!-- Huge Size -->
    <div class="space-y-3">
      <div class="flex items-center space-x-2">
        <BrRadioGroup v-model="value" orientation="horizontal">
          <BrRadio id="r-2xl" value="2xl" size="2xl" label="2x Large (2xl)" />
        </BrRadioGroup>
      </div>
    </div>
  </div>
</template>

Horizontal Layout

Set the orientation="horizontal" prop to arrange the radio group horizontally.

<script setup lang="ts">
import { ref } from 'vue'
import { BrRadio, BrRadioGroup } from '@breezeui/vue'

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

<template>
  <BrRadioGroup v-model="value" orientation="horizontal">
    <BrRadio id="h1" value="default" label="Default" />
    <BrRadio id="h2" value="comfortable" label="Comfortable" />
    <BrRadio id="h3" value="compact" label="Compact" />
  </BrRadioGroup>
</template>

Theming

Global Customization (BrConfigProvider)

You can override default CSS variables via the theme prop of BrConfigProvider to customize colors, border radius, etc.

<script setup lang="ts">
import { ref } from 'vue'
import { BrRadio, BrRadioGroup, BrConfigProvider } from '@breezeui/vue'

const value = ref('light')

const theme = {
  primary: '262.1 83.3% 57.8%', // Violet
  radius: '0.75rem',
}
</script>

<template>
  <div class="space-y-4">
    <BrConfigProvider :theme="theme">
      <div class="p-4 border rounded-lg bg-card text-card-foreground shadow-sm">
        <h3 class="mb-4 text-sm font-medium leading-none">Custom Theme (Violet)</h3>
        <BrRadioGroup v-model="value">
          <BrRadio id="theme-light" value="light" label="Light Mode" />
          <BrRadio id="theme-dark" value="dark" label="Dark Mode" />
          <BrRadio id="theme-system" value="system" label="System" />
        </BrRadioGroup>
      </div>
    </BrConfigProvider>
  </div>
</template>

Local Customization (TailwindCSS)

You can use TailwindCSS utility classes directly on the component to override styles.

<template>
  <BrRadio class="border-red-500" label="Error State" />
</template>

API

BrRadio

Props

Prop Name	Type	Default	Description
value	`string \| number \| boolean`	-	Required. The value of the radio button
disabled	`boolean`	`false`	Whether the radio is disabled
label	`string`	`undefined`	Label text
id	`string`	`undefined`	Input ID
name	`string`	`undefined`	Input name
required	`boolean`	`false`	Whether it is required
error	`boolean`	`false`	Whether it is in error state
size	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'default'`	`'default'`	Size of the radio

Emits

Event Name	Description	Parameters
update:modelValue	Update binding value	`(value: string \| number \| boolean)`
change	Change event	`(value: string \| number \| boolean)`

Slots

Slot Name	Description
default	Label content

BrRadioGroup

Props

Prop Name	Type	Default	Description
modelValue	`string \| number \| boolean`	`undefined`	Binding value
disabled	`boolean`	`false`	Whether to disable the entire group
orientation	`'horizontal' \| 'vertical'`	`'vertical'`	Layout orientation
size	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'default'`	`'default'`	Size of all radios in the group
name	`string`	`undefined`	Name attribute for all radios
required	`boolean`	`false`	Whether it is required
loop	`boolean`	`true`	Whether to loop keyboard navigation

Emits

Event Name	Description	Parameters
update:modelValue	Update binding value	`(value: string \| number \| boolean)`
change	Change event	`(value: string \| number \| boolean)`

#Radio

#Component Features

#Basic Usage

#Disabled State

#Sizes

#Horizontal Layout

#Theming

#Global Customization (BrConfigProvider)

#Local Customization (TailwindCSS)

#API

#BrRadio

#Props

#Emits

#Slots

#BrRadioGroup

#Props

#Emits

Radio

Component Features

Basic Usage

Disabled State

Sizes

Horizontal Layout

Theming

Global Customization (BrConfigProvider)

Local Customization (TailwindCSS)

API

BrRadio

Props

Emits

Slots

BrRadioGroup

Props

Emits