Radio button is used to select one of many given choices. Radio buttons are shown in radio groups to show a set of related options, only one of which can be selected.
Default radio example below.
<ply-radio-group class="flex gap-4 mb-4 flex-col">
<ply-radio-button color="primary" name="test">
Default radio
</ply-radio-button>
<ply-radio-button color="primary" checked="true" name="test">
Default radio checked
</ply-radio-button>
</ply-radio-group>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add radio
@Component({
selector: 'app-radio-example',
imports: [],
template: `...`
})
export class RadioExampleComponent {}Install
npx ply-ui-cli add radio
Add disabled="true" to the <ply-checkbox> if need to disable the checkbox
<ply-radio-group class="flex gap-4 mb-4 flex-col">
<ply-radio-button color="primary" name="test" disabled="true">
Default radio
</ply-radio-button>
<ply-radio-button color="primary" checked="true" name="test" disabled="true">
Default radio checked
</ply-radio-button>
</ply-radio-group>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add radio
@Component({
selector: 'app-radio-example',
imports: [],
template: `...`
})
export class RadioExampleComponent {}Install
npx ply-ui-cli add radio
Radio with helper text example below.
<ply-radio-group class="flex gap-4 mb-4 flex-col">
<ply-radio-button color="primary" name="test2">
Radio with some info
<p class="text-xs text-slate-500! !font-light">
Some info text for example
</p>
</ply-radio-button>
<ply-radio-button
color="primary"
checked="true"
name="test2"
disabled="true"
>
Disabled radio checked with some info
<p class="text-xs !font-light">
Some info text for example
</p>
</ply-radio-button>
</ply-radio-group>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add radio
@Component({
selector: 'app-radio-example',
imports: [],
template: `...`
})
export class RadioExampleComponent {}Install
npx ply-ui-cli add radio
Use color="" attribute to define radio button color. Supported colors are "primary", "success", "danger", "warning" and "accent"
<ply-radio-group
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
>
<ply-radio-button color="primary" name="test4">
Radio Primary
</ply-radio-button>
<ply-radio-button color="success" checked="true" name="test4">
Radio Success
</ply-radio-button>
<ply-radio-button color="danger" name="test4">
Radio Danger
</ply-radio-button>
<ply-radio-button color="warning" name="test4">
Radio Warning
</ply-radio-button>
<ply-radio-button color="accent" name="test4">
Radio Accent
</ply-radio-button>
</ply-radio-group>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add radio
@Component({
selector: 'app-radio-example',
imports: [],
template: `...`
})
export class RadioExampleComponent {}Install
npx ply-ui-cli add radio
Run the following command to add this component to your project:
npx ply-ui-cli add radio
API reference data could not be loaded. Run npm run generate:api-reference.
Content