radio-button

import { RadioButton } from "woly";

The RadioButton component lets you add a radio button and assign it to a radio group. Users can select only one radio button at a time within a radio group.

Radio button group.

Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.

Example

Are you a programmer?
import {RadioButton, Heading} from 'ui';

export function Example () {
  const [checked, setChecked] = React.useState('no');

  const handleChange = (e) => {
    setChecked(e.target.value)
  }

  return <Playground direction="vertical">
    <Heading size="3">Are you a programmer?</Heading>
    <div>
      <RadioButton
        name="example-1"
        id="e1-yes"
        checked={checked === 'yes'}
        onChange={handleChange}
        priority="primary"
        text="yes"
        value="yes"
      />
      <RadioButton
        name="example-1"
        id="e1-no"
        checked={checked === 'no'}
        onChange={handleChange}
        priority="primary"
        text="no"
        value="no"
      />
    </div>
  </Playground>;
}

Disabled

Disabled radio button are uneditable. They have less opacity so that they appear less tappable.

import {RadioButton} from 'ui';

export function Example () {
  return <Playground>
    <RadioButton checked disabled priority="primary" text="disabled" onChange={console.log} />
  </Playground>;
}

Priorities

Primary and danger priorities are should be used to focus user attention.

Do you smoke?
import {RadioButton, Heading} from 'ui';

export function Example () {
  const [checked, setChecked] = React.useState('no');

  const handleChange = (e) => {
    setChecked(e.target.value)
  }

  return <Playground direction="vertical">
    <Heading size="3">Do you smoke?</Heading>
    <div>
      <RadioButton
        name="example-2"
        id="e2-yes"
        checked={checked === 'yes'}
        onChange={handleChange}
        priority="danger"
        text="yes"
        value="yes"
      />
      <RadioButton
        name="example-2"
        id="e2-no"
        checked={checked === 'no'}
        onChange={handleChange}
        priority="primary"
        text="no"
        value="no"
      />
    </div>
  </Playground>;
}

Secondary priority should be used as default priority

Sex
import {RadioButton, Heading} from 'ui';

export function Example () {
  const [checked, setChecked] = React.useState('m');

  const handleChange = (e) => {
    setChecked(e.target.value)
  }

  return <Playground direction="vertical">
    <Heading size="3">Sex</Heading>
    <div>
      <RadioButton
        name="example-3"
        id="e3-male"
        checked={checked === 'm'}
        onChange={handleChange}
        text="male"
        value="m"
      />
      <RadioButton
        name="example-3"
        id="e3-female"
        checked={checked === 'f'}
        onChange={handleChange}
        text="female"
        value="f"
      />
    </div>
  </Playground>;
}

Props

NameTypeDefaultDescription
checkedbooleanWhether radio-button is checked or not
disabledbooleanDisable radio-button
idstringHTML id attribute
onChangeReact.ChangeEventHandler<HTMLInputElement>Callback when radio-button is clicked
prioritystring'default'Priority prop to style RadioButton component
...HTMLInputElement{}Other props are inherited from HTMLInputElement