Radio Group

An options-driven radio control — the radio counterpart to Checkbox. It renders native <input type="radio">s sharing one group name, so mutual exclusivity and arrow-key navigation come from the browser rather than from roving-focus code.

Overview

Import the component and drop it into a template.

import { RadioGroupComponent } from '@guildofgleks/ui';

@Component({
  // ...
  imports: [RadioGroupComponent],
})

Basic usage:

Delivery

Standard — 3 to 5 daysExpress — next dayCollect in storeDrone drop (unavailable in your area)

Selected: standard

<gog-radio-group label="Delivery" [options]="deliveryOptions" [(value)]="delivery" />

Options

Each option is a GogRadioOption. value holds the selected option's id rather than the object itself, since a radio group is a single-value control bound straight to a form field.

interface GogRadioOption {
  id: string | number;
  label: string;
  disabled?: boolean;
}

Examples

Orientation

vertical by default; horizontal for two or three short options in a row.

Vertical

MonthlyYearly

Horizontal

MonthlyYearly

<gog-radio-group label="Billing" [options]="planOptions" [(value)]="plan" />

<gog-radio-group
  label="Billing"
  orientation="horizontal"
  [options]="planOptions"
  [(value)]="plan"
/>

Sizes

Five steps, reusing gog-checkbox's scale. Also settable app-wide through GOG_CONFIG.control.size.

@for (sizeOption of sizes; track sizeOption) {
  <gog-radio-group
    [label]="sizeOption"
    [size]="sizeOption"
    orientation="horizontal"
    [options]="planOptions"
    [(value)]="sizeValue"
  />
}

Reactive forms and validation

A ControlValueAccessor, so formControl / formControlName work directly. With errorDisplay="auto" the message appears once the control is invalid and touched — no @if at the call site. Focus the group and tab away to see it.

Shipping

Standard — 3 to 5 daysExpress — next dayCollect in storeDrone drop (unavailable in your area)

<gog-radio-group
  label="Shipping"
  errorDisplay="auto"
  errorMessage="Pick a shipping option"
  [options]="deliveryOptions"
  [formControl]="shipping"
/>

Accessibility

The options are real radio inputs sharing one name, which is what makes the browser treat them as one group: arrow keys move and select, Home/End jump to the ends, and the group takes a single tab stop. That is also why there is no roving-focus code here — the platform already does it. Give the group either a label or an ariaLabel.

API Reference

Inputs

Name	Type	Default	Description
`options`	`GogRadioOption[]`	`[]`	The choices: { id, label, disabled? }. Rendered as native <input type="radio">s.
`value`	`string \| number \| null`	`null`	The selected option’s id. Two-way bindable with [(value)].
`label`	`string`	`''`	The group’s own label, rendered above the options.
`ariaLabel`	`string`	`''`	Accessible name for the group, used when there is no visible label.
`name`	`string`	`auto-generated`	The shared name attribute for the radios. Generated per instance unless you set it — it is what makes the browser enforce mutual exclusivity.
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	How the options are laid out.
`size`	`'xsm' \| 'sm' \| 'md' \| 'lg' \| 'slg'`	`GOG_CONFIG.control.size ?? 'md'`	Circle and label scale. Reuses gog-checkbox’s size steps.
`disabled`	`boolean`	`false`	Disables the whole group. Individual options carry their own optional disabled flag.
`errorMessage`	`string`	`''`	Validation message rendered under the group.
`errorDisplay`	`'manual' \| 'auto'`	`GOG_CONFIG.control.errorDisplay ?? 'manual'`	manual shows errorMessage whenever it is set; auto derives it from the bound form control’s state.
`fullWidth`	`boolean`	`false`	Stretches the group to fill its container.

Outputs

Name	Payload	Description
`valueChange`	`string \| number \| null`	Emitted when the selection changes. Comes from the value model input.

Styling Tokens

Every CSS custom property the radio group paints with. Override any of them — on a single instance, a subtree, or a theme — to restyle it. See the Theming guide for the full token-layering model, or the Theme Generator to tweak these live.

Token	Description
`--gog-radio-bg / -border-color / -border-width / -border-style`	The circle, unchecked.
`--gog-radio-checked-bg / -checked-border / -dot-color / -dot-size-ratio`	The circle and its dot once checked.
`--gog-radio-label-color / -label-line-height / -gap`	Per-option label and the gap to its circle.
`--gog-radio-group-label-color / -group-label-size / -group-gap`	The group’s own label.
`--gog-radio-group-option-gap / -group-option-gap-horizontal`	Gap between options, vertical and horizontal orientation respectively.
`--gog-radio-focus-ring / -focus-ring-width / -focus-ring-offset`	Keyboard focus ring.
`--gog-radio-error-color / -error-font-size / -disabled-opacity`	Validation error message and the disabled state.