Radio button

The radio button component is used to select one option from a set.

´ Loading interactive demo...
<dt-radio-button value="aberfeldy" name="group">Aberfeldy</dt-radio-button> <dt-radio-button value="dalmore" name="group">Dalmore</dt-radio-button> export class NameGroupingRadioExample { } Aberfeldy Dalmore export class NameGroupingRadioExample { }

Radio button on light background

´ Loading interactive demo...
<dt-radio-group name="group0"> <dt-radio-button value="aberfeldy">Aberfeldy</dt-radio-button> <dt-radio-button value="dalmore">Dalmore</dt-radio-button> <dt-radio-button value="jacky" disabled>Jack Daniels</dt-radio-button> <dt-radio-button value="glenlivet">Glenlivet</dt-radio-button> </dt-radio-group> export class DefaultRadioExample { } Aberfeldy Dalmore Jack Daniels Glenlivet export class DefaultRadioExample { }

Radio button on dark background

´ Loading interactive demo...
<div dtTheme=":dark" class="dark"> <dt-radio-group name="group0"> <dt-radio-button value="aberfeldy">Aberfeldy</dt-radio-button> <dt-radio-button value="dalmore">Dalmore</dt-radio-button> <dt-radio-button value="jacky" disabled>Jack Daniels</dt-radio-button> <dt-radio-button value="glenlivet">Glenlivet</dt-radio-button> </dt-radio-group> </div> export class DarkRadioExample { }
Aberfeldy Dalmore Jack Daniels Glenlivet
export class DarkRadioExample { }

Animation

Radio buttons are not animated.

Multiple radio buttons

Radiobuttons underneath each other
x: 20px

Radio

´ Loading interactive demo...
<dt-radio-group name="group0"> <dt-radio-button value="aberfeldy">Aberfeldy</dt-radio-button> <dt-radio-button value="dalmore">Dalmore</dt-radio-button> <dt-radio-button value="jacky" disabled>Jack Daniels</dt-radio-button> <dt-radio-button value="glenlivet">Glenlivet</dt-radio-button> </dt-radio-group> export class DefaultRadioExample { } Aberfeldy Dalmore Jack Daniels Glenlivet export class DefaultRadioExample { }

<dt-radio-button> provides the same functionality as a native enhanced with styling and animations.

Grouping

Radio groups

Radio-buttons should typically be placed inside of an unless the DOM structure would make that impossible. The radio-group has a value property that reflects the currently selected radio-button inside of the group. Individual radio-buttons inside of a radio-group will inherit the name of the group.

Grouping by name

All radio-buttons with the same name comprise a set from which only one may be selected at a time.

´ Loading interactive demo...
<dt-radio-button value="aberfeldy" name="group">Aberfeldy</dt-radio-button> <dt-radio-button value="dalmore" name="group">Dalmore</dt-radio-button> export class NameGroupingRadioExample { } Aberfeldy Dalmore export class NameGroupingRadioExample { }

Angular forms

<dt-radio-group> is compatible with @angular/forms and supports both FormsModule and ReactiveFormsModule.

Accessibility

The <gh-radio-button> uses an internal <input type="radio"> to provide an accessible experience. This internal radio button receives focus and is automatically labelled by the text content of the <gh-radio-button> element.

Radio button groups should be given a meaningful label via aria-label or aria-labelledby.

Dark Example

´ Loading interactive demo...
<div dtTheme=":dark" class="dark"> <dt-radio-group name="group0"> <dt-radio-button value="aberfeldy">Aberfeldy</dt-radio-button> <dt-radio-button value="dalmore">Dalmore</dt-radio-button> <dt-radio-button value="jacky" disabled>Jack Daniels</dt-radio-button> <dt-radio-button value="glenlivet">Glenlivet</dt-radio-button> </dt-radio-group> </div> export class DarkRadioExample { }
Aberfeldy Dalmore Jack Daniels Glenlivet
export class DarkRadioExample { }