@arterial/radio v3.0.0

Arterial Radio

Another React Material Radio

Installation

npm install @arterial/radio

Usage

Styles

Sass

@use "@material/radio/radio.scss" as radio;
@include radio.core-styles;

CSS

import '@material/radio/dist/mdc.radio.css';

JSX

import {Radio} from '@arterial/radio';

Basic Radio

function Basic() {
  const [value, setValue] = useState('yes');
  return (
    <>
      <Radio
        checked={value === 'yes'}
        id="radio-yes"
        name="radios"
        value="yes"
        onChange={e => setValue(e.target.value)}
      />
      <Radio
        checked={value === 'no'}
        id="radio-no"
        name="radios"
        value="no"
        onChange={e => setValue(e.target.value)}
      />
    </>
  );
}

Other Variants

Label

function Label() {
  const [value, setValue] = useState('yes');
  return (
    <>
      <Radio
        checked={value === 'yes'}
        id="radio-label-yes"
        label="Yes"
        name="radios-label"
        value="yes"
        onChange={e => setValue(e.target.value)}
      />
      <Radio
        checked={value === 'no'}
        id="radio-label-no"
        label="No"
        name="radios-label"
        value="no"
        onChange={e => setValue(e.target.value)}
      />
    </>
  );
}

Align End

function AlignEnd() {
  const [value, setValue] = useState('yes');
  return (
    <>
      <Radio
        alignEnd
        checked={value === 'yes'}
        id="radio-align-end-yes"
        label="Yes"
        name="radios-align-end"
        value="yes"
        onChange={e => setValue(e.target.value)}
      />
      <Radio
        alignEnd
        checked={value === 'no'}
        id="radio-align-end-no"
        label="No"
        name="radios-align-end"
        value="no"
        onChange={e => setValue(e.target.value)}
      />
    </>
  );
}

Disabled

function Disabled() {
  const [value, setValue] = useState('yes');
  return (
    <>
      <Radio
        checked={value === 'yes'}
        disabled
        id="radio-disabled-yes"
        label="Yes"
        name="radios-disabled"
        value="yes"
        onChange={e => setValue(e.target.value)}
      />
      <Radio
        checked={value === 'no'}
        disabled
        id="radio-disabled-no"
        label="No"
        name="radios-disabled"
        value="no"
        onChange={e => setValue(e.target.value)}
      />
    </>
  );
}

Props

Radio