Radio group
Use cases:
- Grouping radio buttons together so that only one can be selected at a time
Example
- Genesis
- React
- Angular
Declaration
<rapid-radio-group>
<rapid-radio value="one">One</rapid-radio>
<rapid-radio value="two">Two</rapid-radio>
<rapid-radio value="three">Three</rapid-radio>
</rapid-radio-group>
Usage
@customElement({
name: 'my-element',
template: html`
<rapid-radio-group
@change="${(x,ctx) => x.selectionChanged(ctx.event)}
value="${sync((x) => x.radioGroupValue)}"
>
<rapid-radio value="one">One</rapid-radio>
<rapid-radio value="two">Two</rapid-radio>
<rapid-radio value="three">Three</rapid-radio>
</rapid-radio-group>
`,
})
export class MyElement extends GenesisElement {
@observable radioGroupValue: string;
selectionChanged() {
const target = event.target as HTMLInputElement;
console.log(target.value);
}
}
Declaration
<rapid-radio-group>
<rapid-radio value="one">One</rapid-radio>
<rapid-radio value="two">Two</rapid-radio>
<rapid-radio value="three">Three</rapid-radio>
</rapid-radio-group>
Usage
export function MyComponent() {
const handleRadioGroupChanged = (event) => {
const target = event.target as HTMLInputElement;
console.log(target.value);
};
return (
<rapid-radio-group onChange={handleRadioGroupChanged}>
<rapid-radio value="one">One</rapid-radio>
<rapid-radio value="two">Two</rapid-radio>
<rapid-radio value="three">Three</rapid-radio>
</rapid-radio-group>
);
}
Declaration
<rapid-radio-group>
<rapid-radio value="one">One</rapid-radio>
<rapid-radio value="two">Two</rapid-radio>
<rapid-radio value="three">Three</rapid-radio>
</rapid-radio-group>
Usage
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
selector: 'my-root',
template: `
<rapid-radio-group
(change)="radioGroupChanged($event)"
>
<rapid-radio value="one">One</rapid-radio>
<rapid-radio value="two">Two</rapid-radio>
<rapid-radio value="three">Three</rapid-radio>
</rapid-radio-group>
`,
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
radioGroupChanged(event: Event) {
const target = event.target as HTMLInputElement;
console.log(target.value);
}
}
API
Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.
Attributes
Name | Type | Description | Example |
---|---|---|---|
readonly | boolean | If true, the user cannot change the value of this checkbox (which is greyed out). |
|
disabled | boolean | Similar to readonly , but with a blur on the component. |
|
name | string | Sets a name for the component. |
|
orientation | "vertical" | "horizontal" | Sets the orientation of the group of radios components. Default: horizontal |
|
value | string | Sets a initial value for the component, so the corresponding radio component gets checked |
|
Properties
This component doesn't have any properties which are not also controlled via attributes.
Slots
Slot | Use |
---|---|
label | The slot for the label |
Parts
Part | Use |
---|---|
positioning-region | The positioning region for laying out the radios |
Events fired
Event | Type | Use | Example |
---|---|---|---|
change | event | Emits a custom change event when the radio group changes its state. Access the value on the event via .target.value . |
|
Events listened to
This component doesn't listen to any events.