Radio Button Component

Figma

The glu-radio component is an accessible radio button that supports both left and right labels, error messaging, and helper text. It is designed to integrate with radio groups for single selection behavior and provides proper ARIA attributes and keyboard interactions. The component emits a glChange event when its state changes.

Basic Radio Button

A simple radio button with a left label and default unchecked state.

HTML

Result

Loading...

Live Editor

<glu-radio leftLabel="Option 1" name="example"></glu-radio>

React

Result

Loading...

Live Editor

<GluRadio leftLabel="Option 1" name="example" />

Vue

<glu-radio leftLabel="Option 1" name="example"></glu-radio>

<script setup>
import { GluRadio } from '@gelato-ui/vue';
</script>

Angular

<glu-radio leftLabel="Option 1" name="example"></glu-radio>

import { Component } from '@angular/core';
import { GluRadio } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluRadio],
  template: `<glu-radio leftLabel="Option 1" name="example"></glu-radio>`
})
export class MyComponent {}

---

Radio with Right Label

Display a radio button with a right-aligned label.

HTML

Result

Loading...

Live Editor

<glu-radio rightLabel="Option A" name="example"></glu-radio>

React

Result

Loading...

Live Editor

<GluRadio rightLabel="Option A" name="example" />

Vue

<glu-radio rightLabel="Option A" name="example"></glu-radio>

<script setup>
import { GluRadio } from '@gelato-ui/vue';
</script>

Angular

<glu-radio rightLabel="Option A" name="example"></glu-radio>

import { Component } from '@angular/core';
import { GluRadio } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluRadio],
  template: `<glu-radio rightLabel="Option A" name="example"></glu-radio>`
})
export class MyComponent {}

---

Radio with Both Left and Right Labels

Combine both left and right labels to provide additional context.

HTML

Result

Loading...

Live Editor

<glu-radio leftLabel="Select" rightLabel="Option B" name="example"></glu-radio>

React

Result

Loading...

Live Editor

<GluRadio leftLabel="Select" rightLabel="Option B" name="example" />

Vue

<glu-radio leftLabel="Select" rightLabel="Option B" name="example"></glu-radio>

<script setup>
import { GluRadio } from '@gelato-ui/vue';
</script>

Angular

<glu-radio leftLabel="Select" rightLabel="Option B" name="example"></glu-radio>

import { Component } from '@angular/core';
import { GluRadio } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluRadio],
  template: `<glu-radio leftLabel="Select" rightLabel="Option B" name="example"></glu-radio>`
})
export class MyComponent {}

---

Radio with Error and Helper Text

Display error messaging and supplemental helper text when validation fails.

HTML

Result

Loading...

Live Editor

<glu-radio
  leftLabel="Option 2"
  error="Selection required"
  helperText="Please select an option"
  helperIcon="error-icon"
  name="example"
></glu-radio>

React

Result

Loading...

Live Editor

<GluRadio
  leftLabel="Option 2"
  error="Selection required"
  helperText="Please select an option"
  helperIcon="error-icon"
  name="example"
/>

Vue

<glu-radio
  leftLabel="Option 2"
  error="Selection required"
  helperText="Please select an option"
  helperIcon="error-icon"
  name="example"
></glu-radio>

<script setup>
import { GluRadio } from '@gelato-ui/vue';
</script>

Angular

<glu-radio
  leftLabel="Option 2"
  error="Selection required"
  helperText="Please select an option"
  helperIcon="error-icon"
  name="example"
></glu-radio>

import { Component } from '@angular/core';
import { GluRadio } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluRadio],
  template: `
    <glu-radio
      leftLabel="Option 2"
      error="Selection required"
      helperText="Please select an option"
      helperIcon="error-icon"
      name="example"
    ></glu-radio>
  `
})
export class MyComponent {}

---

Disabled Radio Button

Prevent user interaction by disabling the radio button.

HTML

Result

Loading...

Live Editor

<glu-radio leftLabel="Option 3" disabled name="example"></glu-radio>

React

Result

Loading...

Live Editor

<GluRadio leftLabel="Option 3" disabled name="example" />

Vue

<glu-radio leftLabel="Option 3" disabled name="example"></glu-radio>

<script setup>
import { GluRadio } from '@gelato-ui/vue';
</script>

Angular

<glu-radio leftLabel="Option 3" disabled name="example"></glu-radio>

import { Component } from '@angular/core';
import { GluRadio } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluRadio],
  template: `<glu-radio leftLabel="Option 3" disabled name="example"></glu-radio>`
})
export class MyComponent {}

---

Example: Multiple Options Radio Buttons

Below is an example of a radio button group for selecting a favorite color. All radio buttons share the same name attribute so they behave as a group. Only one option can be selected at a time.

HTML

Result

Loading...

Live Editor

<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
  <glu-radio leftLabel="Red" name="favoriteColor"></glu-radio>
  <glu-radio leftLabel="Green" name="favoriteColor" checked></glu-radio>
  <glu-radio leftLabel="Blue" name="favoriteColor"></glu-radio>
</div>

React

Result

Loading...

Live Editor

<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
  <GluRadio
    leftLabel="Red"
    name="favoriteColor"
  />
  <GluRadio
    leftLabel="Green"
    name="favoriteColor"
    checked
  />
  <GluRadio
    leftLabel="Blue"
    name="favoriteColor"
  />
</div>

Vue

<template>
  <div>
    <glu-radio
      leftLabel="Red"
      name="favoriteColor"
      :checked="selected === 'Red'"
      @glChange="select('Red')"
    ></glu-radio>
    <glu-radio
      leftLabel="Green"
      name="favoriteColor"
      :checked="selected === 'Green'"
      @glChange="select('Green')"
    ></glu-radio>
    <glu-radio
      leftLabel="Blue"
      name="favoriteColor"
      :checked="selected === 'Blue'"
      @glChange="select('Blue')"
    ></glu-radio>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { GluRadio } from '@gelato-ui/vue';

const selected = ref('Red');
const select = (color) => {
  selected.value = color;
};
</script>

Angular

<glu-radio
  leftLabel="Red"
  name="favoriteColor"
  [checked]="selected === 'Red'"
  (glChange)="select('Red')"
></glu-radio>
<glu-radio
  leftLabel="Green"
  name="favoriteColor"
  [checked]="selected === 'Green'"
  (glChange)="select('Green')"
></glu-radio>
<glu-radio
  leftLabel="Blue"
  name="favoriteColor"
  [checked]="selected === 'Blue'"
  (glChange)="select('Blue')"
></glu-radio>

import { Component } from '@angular/core';
import { GluRadio } from '@gelato-ui/angular';

@Component({
  selector: 'app-favorite-color',
  standalone: true,
  imports: [GluRadio],
  template: `
    <glu-radio
      leftLabel="Red"
      name="favoriteColor"
      [checked]="selected === 'Red'"
      (glChange)="select('Red')"
    ></glu-radio>
    <glu-radio
      leftLabel="Green"
      name="favoriteColor"
      [checked]="selected === 'Green'"
      (glChange)="select('Green')"
    ></glu-radio>
    <glu-radio
      leftLabel="Blue"
      name="favoriteColor"
      [checked]="selected === 'Blue'"
      (glChange)="select('Blue')"
    ></glu-radio>
  `
})
export class FavoriteColorComponent {
  selected = 'Red';
  select(color: string) {
    this.selected = color;
  }
}

---

Properties

Property	Attribute	Description	Type	Default
checked	checked	Whether the radio is currently selected	boolean	false
disabled	disabled	Disables the radio button	boolean	false
error	error	The error message to display.	string	undefined
helperIcon	helper-icon	Helper icon name	string	undefined
helperIconVariant	helper-icon-variant	Helper icon variant	"outline" | "solid"	'outline'
helperText	helper-text	Supplemental helper text	string	undefined
leftLabel	left-label	Optional left label text displayed adjacent to the radio.	string	undefined
name	name	Name attribute for radio group association	string	undefined
rightLabel	right-label	Optional right label text displayed adjacent to the radio.	string	undefined

Events

Event	Description	Type
glChange	Emitted when the radio is selected	CustomEvent<{ value: boolean; event: Event; }>

Dependencies

Depends on

• glu-label
• glu-helper-text

Graph

---

Built with StencilJS