Radio

Components and their props

Radio
- checked true/false
  This makes the Radio button checked.
- disabled true/false
  This makes the Radio button disabled.

Sample code

import {h, Component} from 'preact';
import Radio from 'preact-material-components/Radio';
import FormField from 'preact-material-components/FormField';
import 'preact-material-components/FormField/style.css';
import 'preact-material-components/List/style.css';

export default class ListPage extends Component {
  render(){
    return (
      <div>
        <FormField>
          <Radio id="r1" name='opts'></Radio>
          <label for="r1">Radio 1</label>
        </FormField>
      </div>
    );
  }
}

Original documentation

This component encapsulates mdc-radio, you can refer to its documentation here.

Demo

Basic radio group

Radio 1

Radio 2

Radio 3

// name must match accross all elements to logically group them
<div>
  <Formfield>
    <Radio id="radio-1" name="Basic Options" />
    <label for="radio-1">Radio 1</label>
  </Formfield>
  <Formfield>
    <Radio id="radio-2" name="Basic Options" />
    <label for="radio-2">Radio 2</label>
  </Formfield>
  <Formfield>
    <Radio id="radio-3" name="Basic Options" />
    <label for="radio-3">Radio 3</label>
  </Formfield>
</div>

Radio group with disabled option

Disabled

Radio 2

Radio 3

<div>
  <Formfield>
    <Radio 
      disabled={true} 
      id="radio-1" 
      name="Disabled Options" 
    />
    <label for="radio-1">Disabled</label>
  </Formfield>
  <Formfield>
    <Radio id="radio-2" name="Disabled Options" />
    <label for="radio-2">Radio 2</label>
  </Formfield>
  <Formfield>
    <Radio id="radio-3" name="Disabled Options" />
    <label for="radio-3">Radio 3</label>
  </Formfield>
</div>

Controlled radio group

Radio 1

Radio 2

Radio 3

<div>
  <Formfield>
    <Radio id="radio-1" name="Controlled Options" />
    <label for="radio-1">Radio 1</label>
  </Formfield>
  <Formfield>
    <Radio 
      checked={true} 
      id="radio-2" 
      name="Controlled Options" 
    />
    <label for="radio-2">Radio 2</label>
  </Formfield>
  <Formfield>
    <Radio id="radio-3" name="Controlled Options" />
    <label for="radio-3">Radio 3</label>
  </Formfield>
</div>

Advanced controlled radio group

This is a possible example of controlling the values of a group of radio buttons in component state.

import { Component } from "preact";
import Radio from "preact-material-components/Radio";
import FormField from "preact-material-components/FormField";
import "preact-material-components/FormField/style.css";
import "preact-material-components/List/style.css";

export default class ControlledRadioExample extends Component {
  constructor() {
    super();
    this.state = {
      options: [
        { name: "Radio 1", checked: false },
        { name: "Radio 2", checked: false },
        { name: "Radio 3", checked: false }
      ]
    };
  }

  onChange = selectedIndex => {
    var updatedOptions = this.state.options.slice().map((option, index) => {
      option.checked = index === selectedIndex ? true : false;
      return option;
    });

    this.setState({
      options: updatedOptions
    });
  };

  render() {
    var controlledRadioElements = this.state.options.map((option, i) => {
      return (
        <FormField>
          <Radio
            id={`radio-${i}`}
            name="Controlled Options"
            checked={option.checked}
            onChange={this.onChange.bind(undefined, i)}
          />
          <label for={`radio-${i}`}>{option.name}</label>
        </FormField>
      );
    });

    return <div>{controlledRadioElements}</div>;
  }
}