@arterial/radio

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

Name	Type	Description
alignEnd	boolean	Aligns root element on the right side of the label.
checked	boolean	Indicates whether the element is checked.
className	string	Classes to be applied to the root element.
disabled	boolean	Indicates whether the element is disabled.
id	string	Id of the element.
label	string	Text to be displayed next to the root element.
onChange	function	Change event handler.
ripple	boolean	Enables ripple within root element. Defaults to true.
style	object	Styles to be applied to the root element.
value	string	Value of input.