---
metaTitle: Radio component | AwesCode UI
meta:
  - name: description
    content: The <AwRadio /> component is used to render Radio - UI Vue component for AwesCode UI.
title: Radio
---

# Radio

**Category:** Atom | **Import:** Global

The `AwRadio` component is a styled radio button input with label support and error handling.

## Overview

`AwRadio` provides a radio button input with consistent styling, label support, and error states. It's designed for radio button groups where only one option can be selected.

## Usage

### Basic Example

```markup
<AwRadio v-model="selected" value="option1" label="Option 1" />
<AwRadio v-model="selected" value="option2" label="Option 2" />
```

### Radio Group

```markup
<template>
    <div>
        <AwRadio 
            v-model="choice" 
            value="yes" 
            label="Yes" 
        />
        <AwRadio 
            v-model="choice" 
            value="no" 
            label="No" 
        />
        <AwRadio 
            v-model="choice" 
            value="maybe" 
            label="Maybe" 
        />
    </div>
</template>

<script>
export default {
    data() {
        return {
            choice: 'yes'
        }
    }
}
</script>
```

### With Error

```markup
<AwRadio 
    v-model="selected" 
    value="option1" 
    label="Required option"
    :error="errorMessage"
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| value | Radio button value | `String` / `Number` / `Boolean` | `false` | `'on'` |
| checked | Currently selected value (for v-model) | `String` / `Number` / `Boolean` | `false` | - |

All standard HTML radio attributes are supported via `$attrs` (e.g., `disabled`, `required`).

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| label | Custom label content | `{ label, value, isChecked }` | Label text |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| change | `value` | Emitted when radio is selected |

## Component Behavior

### Radio Group Logic

- Radio buttons work as a group when they share the same `v-model` binding
- Only one radio in a group can be selected at a time
- When a radio is selected, its `value` is emitted via the `change` event
- The `checked` prop (v-model binding) is compared to each radio's `value` to determine selection
- Selection is determined by strict equality: `checked === value`

### Value Types

The component supports three value types:
- **String:** Most common, e.g., `value="option1"`
- **Number:** For numeric choices, e.g., `:value="1"` (use `:value` binding)
- **Boolean:** For yes/no choices, e.g., `:value="true"` (use `:value` binding)

**Important:** When using number or boolean values, use the `:value` binding syntax (v-bind) instead of plain `value` attribute.

### Model Binding

- Uses `v-model` with custom model definition
- Model prop: `checked` - The currently selected value
- Model event: `change` - Emitted when selection changes
- Usage: `v-model="selectedValue"`

### Label Rendering

- Label is optional but recommended for accessibility
- If `label` prop is provided, renders a `<label>` element linked to the radio input
- Label slot receives: `{ label, value, isChecked }`
- Clicking the label toggles the radio (native browser behavior)

### Error Handling

The component extends the ErrorMixin:
- Supports `error` prop for error messages
- Shows error tooltip on hover when error is present
- Automatically clears error on selection change
- Error state adds visual styling via `has-error` class

### Field Attributes

Extends FieldMixin for consistent field behavior:
- Supports standard HTML radio attributes via `$attrs`
- Common attributes: `disabled`, `required`, `name`
- Auto-generates unique ID if not provided
- Links label to input via `for`/`id` attributes

### Accessibility

- Proper label-input association via `id` and `for` attributes
- Error messages linked via `aria-describedby`
- Supports all native radio button keyboard navigation
- Disabled state properly communicated to screen readers

### Structure

```
<div class="aw-switch-field is-radio" :class="{ 'has-error': hasError }">
  <input
    type="radio"
    class="aw-switch-field__element"
    :id="id"
    :value="value"
    :checked="isChecked"
  />
  <label class="aw-switch-field__label" :for="id">
    <slot name="label">{{ label }}</slot>
  </label>
</div>
```

## Related Components

- `AwCheckbox` - Checkbox component
- `AwSwitcher` - Toggle switch component
- `AwInput` - Text input component

## Notes

- **Import Method:** Global - Available as atom component
- Uses v-model with `checked` prop and `change` event
- Only one radio in a group can be selected at a time
- Extends field and error mixins for label and error handling
- Value can be string, number, or boolean
- Radio buttons in the same group should share the same v-model binding