Radio

Use cases:

• Selecting exactly one from multiple options in the same input

Example

Radio

React

Declaration

<rapid-radio>Radio</rapid-radio>

Usage

@customElement({
  name: 'my-element',
  template: html`
      <rapid-radio
        checked="true"
        @change="${(x) => x.changeRadio()}"
        :value="${sync((x) => x.radioValue)}">
        Radio
      </rapid-radio>
    `,
})
export class MyElement extends GenesisElement {
  @observable radioValue: string;
  changeRadio() {
    console.log(this.radioValue);
  }
}

Genesis

Declaration

<Radio>Radio</Radio>

Usage

import { Radio } from '@genesislcap/rapid-design-system/react';

export function MyComponent() {
  const handleRadioFieldChanged = (event) => {
    const target = event.target as HTMLInputElement;
    console.log(target.value);
  };
  return (
    <Radio onChange={handleRadioFieldChanged}>
      Radio
    </Radio>
  );
}

Angular

Declaration

<rapid-radio>Radio</rapid-radio>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
    <rapid-radio (change)="onRadioFieldChange($event)">
      Radio
    </rapid-radio>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
  onRadioFieldChange(event: Event) {
    const target = event.target as HTMLInputElement;
    console.log(target.value);
  }
}

API

Property and attribute binding examples for Genesis Component syntax.

Name	Type	Description	Example
checked	boolean	Sets or retrieves the current state of the component. Default: false	<rapid-radio checked>
disabled	boolean	Similar to readonly, but with a blur on the component	<rapid-radio disabled>
value	string	Sets a value for the component. Not visible to the user	<rapid-radio value=${sync((x) => x.radioValue)}>
readonly	boolean	If true, the user cannot change the value of this checkbox (which is greyed out)	<rapid-radio readonly>

Properties

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

Slots

Slot	Use
checked-indicator	The checked indicator

Parts

Part	Description
control	The element representing the visual radio control
label	The label
checked-indicator	The checked indicator (requires the default checked-indicator slot to be present)

Events fired

Name	Description
@change	Fires the event when the radio component changes its state

Events listened to

This component doesn't listen to any events.

Further details

This component is an implementation of an HTML radio element.