AngularLynx

    Radio Group

    A list of options where tapping one selects it and clears the others.

    ui-radio-groupsrc/app/app.ts

    Installation

    npx @blotch/dolan add radio-group
    import { UiRadioGroup, UiRadioGroupItem } from '../components/ui/radio-group';

    Usage

    src/app/app.ts
    import { Component, signal } from '@angular/core';
import { UiRadioGroup, UiRadioGroupItem } from '../components/ui/radio-group';

@Component({
  selector: 'app-root',
  imports: [UiRadioGroup, UiRadioGroupItem],
  template: `
    <ui-radio-group [(value)]="plan">
      <ui-radio-group-item value="free">Free</ui-radio-group-item>
      <ui-radio-group-item value="pro">Pro, $9 a month</ui-radio-group-item>
    </ui-radio-group>
  `,
})
export class App {
  protected readonly plan = signal('free');
}
    • Each item shows a circle and its label. Tapping anywhere on the row selects it.
    • Items wrap their content in <text>, so pass plain text.
    • Once an option is selected, tapping it again keeps it selected. Start with '' for no selection.

    Disabled

    <ui-radio-group value="us" [disabled]="true">
  <ui-radio-group-item value="us">United States</ui-radio-group-item>
  <ui-radio-group-item value="eu">Europe</ui-radio-group-item>
</ui-radio-group>

    Disabling the group dims every item and ignores taps. There's no per-item disabled.

    API

    UiRadioGroup

    InputTypeDefaultDescription
    valuestring''The selected item's value. Supports [(value)].
    disabledbooleanfalseDims every item and ignores taps.
    classstring''Extra Tailwind classes for the column of items.
    OutputTypeDescription
    changedstringEmits the value of the item the user tapped.
    valueChangestringEmits the new value, for [(value)].

    UiRadioGroupItem

    InputTypeDefaultDescription
    valuestringRequiredThe value this item selects.
    classstring''Extra Tailwind classes for the row.

    No outputs.

    • Select: pick one option from a bottom sheet
    • Checkbox: choose several independent options
    • Toggle: a single-select toggle group