Data input

Radio

Themed radio group for accessible single-selection forms input with label forwarding.

Import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjRadioGroupComponent } from '@kouji-ui/components';

Loading editor

Playground

#playground

Small

Medium

Large

orientation

items

selected

disable middle item

<kj-radio-group
  [(value)]="selected"
  orientation="vertical"
  ariaLabel="Size"
>
  <kj-radio [value]="'s'">Small</kj-radio>
  <kj-radio [value]="'m'">Medium</kj-radio>
  <kj-radio [value]="'l'">Large</kj-radio>
</kj-radio-group>