Radio

Examples

Radio

Lorem Ipsum

Code

<Radio
  id="choice-1"
  name="options-1"
  value="dolor"
>
  Lorem Ipsum
</Radio>

Radio, disabled

View standalone

Lorem Ipsum

Code

<Radio
  disabled
  id="choice-1-disabled"
  name="options-1"
  value="dolor"
>
  Lorem Ipsum
</Radio>

Checked

View standalone

Lorem Ipsum

Code

<Radio
  defaultChecked
  id="choice-2"
  name="options-2"
  value="dolor"
>
  Lorem Ipsum
</Radio>

Checked, disabled

View standalone

Lorem Ipsum

Code

<Radio
  defaultChecked
  disabled
  id="choice-2-disabled"
  name="options-2-disabled"
  value="dolor"
>
  Lorem Ipsum
</Radio>

onChange Handler

View standalone

Lorem Ipsum

Code

<Radio
  id="choice-3"
  name="options-3"
  onChange={function noRefCheck() {}}
  value="dolor"
>
  Lorem Ipsum
</Radio>

Radio Group

View standalone

Radios

Lorem IpsumSolorDit Amet

Code

<FormGroup title="Radios">
  <Radio
    id="choice-4-1"
    name="list-1"
    value="dolor"
  >
    Lorem Ipsum
  </Radio>
  <Radio
    id="choice-4-2"
    name="list-1"
    value="massa"
  >
    Solor
  </Radio>
  <Radio
    id="choice-4-3"
    name="list-1"
    value="gravida"
  >
    Dit Amet
  </Radio>
</FormGroup>

Props

`atoms`

Applies permitted design system styles. See styling documentation for more.

`className`

string

The className property sets the value of the class attribute of the element.

`size`

TextSize

Renders content at the size of the passed value.

`rightAlign`

boolean