Form

Radio button

One choice out of a few — native radios in a group, with arrow-key navigation.

Features10

API

Theming

Group

tx-radio-group holds the value and is the radiogroup. Tab moves into the group, arrow keys change the choice.

Standard — 3 to 5 days

Express — next day

Pick up in store

Value: standard

6 lines

<tx-radio-group [formControl]="delivery" ariaLabel="Delivery">  <tx-radio-button value="standard" label="Standard — 3 to 5 days" />  <tx-radio-button value="express" label="Express — next day" />  <tx-radio-button value="pickup" label="Pick up in store" /></tx-radio-group><p class="hint">Value: {{ delivery.value }}</p>

Horizontal

orientation="horizontal" puts the options in a row.

Monthly

Yearly

4 lines

<tx-radio-group orientation="horizontal" ariaLabel="Billing period" [(ngModel)]="period">  <tx-radio-button value="month" label="Monthly" />  <tx-radio-button value="year" label="Yearly" /></tx-radio-group>

Description

description adds a muted line under the label, read as the option's description.

PublicAnyone with the link can view.

TeamOnly members of your workspace.

PrivateOnly you and people you invite.

9 lines

<tx-radio-group ariaLabel="Visibility" [(ngModel)]="visibility">  <tx-radio-button value="public" label="Public" description="Anyone with the link can view." />  <tx-radio-button value="team" label="Team" description="Only members of your workspace." />  <tx-radio-button    value="private"    label="Private"    description="Only you and people you invite."  /></tx-radio-group>

Tiles

tile turns the options into cards — for plans and other choices that need more room.

Free$0 / month

Team$12 / seat

ScaleTalk to us

10 lines

<tx-radio-group class="plans" orientation="horizontal" ariaLabel="Plan" [(ngModel)]="plan">  @for (option of plans; track option.value) {    <tx-radio-button      [value]="option.value"      [label]="option.label"      [description]="option.price"      [tile]="true"    />  }</tx-radio-group>

Standalone

Without a group, each radio binds the same control and is checked when the control equals its value. Give them one name so the arrow keys work.

Light

Dark

System

5 lines

<div class="row" role="radiogroup" aria-label="Theme">  <tx-radio-button name="theme" value="light" label="Light" [(ngModel)]="theme" />  <tx-radio-button name="theme" value="dark" label="Dark" [(ngModel)]="theme" />  <tx-radio-button name="theme" value="system" label="System" [(ngModel)]="theme" /></div>

Sizes

small, medium and large — set on the group or on one option.

14 lines

<div class="list">  <tx-radio-group size="small" orientation="horizontal" ariaLabel="Small">    <tx-radio-button value="a" label="Small" />    <tx-radio-button value="b" label="Small" />  </tx-radio-group>  <tx-radio-group orientation="horizontal" ariaLabel="Medium">    <tx-radio-button value="a" label="Medium" />    <tx-radio-button value="b" label="Medium" />  </tx-radio-group>  <tx-radio-group size="large" orientation="horizontal" ariaLabel="Large">    <tx-radio-button value="a" label="Large" />    <tx-radio-button value="b" label="Large" />  </tx-radio-group></div>

Variants

filled gives the empty circle the filled field background.

Filled

4 lines

<tx-radio-group variant="filled" orientation="horizontal" ariaLabel="Filled">  <tx-radio-button value="a" label="Filled" />  <tx-radio-button value="b" label="Filled" /></tx-radio-group>

States

A disabled option, a disabled group, readonly and invalid.

22 lines

<div class="list">  <tx-radio-group orientation="horizontal" ariaLabel="One disabled" [ngModel]="'a'">    <tx-radio-button value="a" label="Available" />    <tx-radio-button value="b" label="Sold out" [disabled]="true" />  </tx-radio-group>  <tx-radio-group    orientation="horizontal"    ariaLabel="Disabled group"    [disabled]="true"    [ngModel]="'a'"  >    <tx-radio-button value="a" label="Disabled, checked" />    <tx-radio-button value="b" label="Disabled" />  </tx-radio-group>  <tx-radio-group orientation="horizontal" ariaLabel="Invalid" [invalid]="true">    <tx-radio-button value="a" label="Invalid" />    <tx-radio-button value="b" label="Invalid" />  </tx-radio-group>  <div class="row">    <tx-radio-button value="a" label="Read only" [readonly]="true" [ngModel]="'a'" />  </div></div>

Form

Validators.required on the group inside tx-field: the error shows after submit and the circles turn red.

How did you hear about us?

Search engine

A friend

Social media

10 lines

<div class="form">  <tx-field label="How did you hear about us?" [required]="true">    <tx-radio-group [formControl]="source">      <tx-radio-button value="search" label="Search engine" />      <tx-radio-button value="friend" label="A friend" />      <tx-radio-button value="social" label="Social media" />    </tx-radio-group>  </tx-field>  <button txButton (click)="source.markAsTouched()">Continue</button></div>

Design tokens

[dt] changes the radioButton tokens — here a ring instead of a filled circle.

Ring

9 lines

<tx-radio-group  orientation="horizontal"  ariaLabel="Ring style"  [dt]="tokens"  [(ngModel)]="value">  <tx-radio-button value="a" label="Ring" />  <tx-radio-button value="b" label="Ring" /></tx-radio-group>