Skip to main content

Radio group

Use cases:

  • Grouping radio buttons together so that only one can be selected at a time

Example

OneTwoThree

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);
}
}

API

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

Attributes

NameTypeDescriptionExample
readonlybooleanIf true, the user cannot change the value of this checkbox (which is greyed out).
<rapid-radio-group readonly>
disabledbooleanSimilar to readonly, but with a blur on the component.
<rapid-radio-group disabled>
namestringSets a name for the component.
<rapid-radio-group name="Name">
orientation"vertical" | "horizontal"Sets the orientation of the group of radios components. Default: horizontal
<rapid-radio-group orientation="vertical">
valuestringSets a initial value for the component, so the corresponding radio component gets checked
<rapid-radio-group value=${sync((x) => x.radioGroupValue)}>

Properties

This component doesn't have any properties which are not also controlled via attributes.

Slots

SlotUse
labelThe slot for the label

Parts

PartUse
positioning-regionThe positioning region for laying out the radios

Events fired

EventTypeUseExample
changeeventEmits a custom change event when the radio group changes its state. Access the value on the event via .target.value.
<rapid-radio-group @change="${(x) => x.myChangeHandler(event)}">

Events listened to

This component doesn't listen to any events.