@kit-ng-ui/radio

Radio components for Kit UI. Mirrors ant-design's Radio + RadioGroup, including the segmented button style (optionType="button").

Install

pnpm add @kit-ng-ui/radio @kit-ng-ui/core

Styles

@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/radio/styles' as radio;

Use

import { Component, signal } from '@angular/core';
import { KitRadioComponent, KitRadioGroupComponent } from '@kit-ng-ui/radio';

@Component({
  standalone: true,
  imports: [KitRadioComponent, KitRadioGroupComponent],
  template: `
    <kit-radio-group [(value)]="picked">
      <kit-radio [value]="'a'">Apple</kit-radio>
      <kit-radio [value]="'b'">Banana</kit-radio>
      <kit-radio [value]="'c'">Cherry</kit-radio>
    </kit-radio-group>

    <kit-radio-group optionStyle="button" solid [(value)]="layout">
      <kit-radio [value]="'list'">List</kit-radio>
      <kit-radio [value]="'grid'">Grid</kit-radio>
    </kit-radio-group>

    <kit-radio-group [options]="opts" [(value)]="picked" />
  `,
})
export class RadioDemo {
  picked = signal<unknown>('a');
  layout = signal('list');
  opts = [
    { label: 'A', value: 'a' },
    { label: 'B', value: 'b' },
  ];
}

API

<kit-radio>

| Input | Type | Default | Description | | ------------- | ---------------- | ------- | -------------------------------------------- | | value | unknown | null | Identifier used by the parent group | | checked | boolean | false | Standalone checked state (ignored in group) | | disabled | boolean | false | Disable the radio | | autofocus | boolean | false | Native autofocus | | name | string \| null | null | Native name (inherits from group otherwise) |

Outputs: (checkedChange).

<kit-radio-group>

| Input | Type | Default | | ------------- | ------------------------------------------ | ----------- | | options | KitRadioOption[] \| null | null | | value | unknown | null | | disabled | boolean | false | | name | string \| null (auto-generated) | null | | size | 'sm' \| 'md' \| 'lg' | 'md' | | optionStyle | 'default' \| 'button' \| 'solid' | 'default' | | solid | boolean (only with optionStyle="button") | false |

Outputs: (valueChange).

Both components implement ControlValueAccessor.

Behavior notes

• A child <kit-radio> placed inside <kit-radio-group> defers selection to the group. Standalone radios (no group) coordinate via shared name.
• The group auto-generates a name if you don't pass one — needed for native radio grouping semantics.
• optionStyle="button" switches to a segmented control where each child renders as a fused button. Pair with solid for the filled brand-color look.