Radio

When a user can choose only one of the options provided

The radio button state can be controlled through the checked property. If the checked prop is not set then the radio button will manage its own state.

You can listen to the radio button events through the onClick or the onChange props.

Usage

import { Radio } from 'nr1'

Examples

Basic

<div className="nr1-Docs-prettify">
  <Radio onChange={(event) => alert('Foo')} label="Foo" />
  <Radio checked label="Bar" />
  <Radio checked disabled label="Baz" />
</div>

With info

<Radio onChange={(event) => alert('Foo')} info="Info value" label="Foo" />

With description

<Radio
  onChange={(event) => alert('Foo')}
  description="Description value"
  label="Foo"
/>

With invalid message

<Radio
  onChange={(event) => alert('Foo')}
  invalid="Invalid message value"
  label="Foo"
/>

Controlled component

class MyNerdlet extends React.PureComponent {
  constructor(props) {
    super(props);


    this.state = {
      isChecked: false,
    };


    this.onClick = this.onClick.bind(this);
  }


  onClick(event) {
    this.setState((state) => {
      return { isChecked: !state.isChecked };
    });
  }


  render() {
    return (
      <Radio
        checked={this.state.isChecked}
        onClick={this.onClick}
        label="Radio button"
      />
    );
  }
}

Props

`checked` boolean	If `true`, the radio button is checked.If defined, it turns the input into a controlled component.
`className` string	Appends class names to the component.Should be used only for positioning and spacing purposes.
`description` string	Message with instructions on how to fill the form field.
`disabled` boolean	If `true`, the radio button is not available for interaction.
`info` string	Additional information can be displayed in an info tooltip next to the Label.
`invalid` boolean\|string	When true, sets the field in an invalid state, in order to notify the user attention is needed over this particular field. This property can be a `boolean` field or a `string`. When it is a `string`, as well as the invalid state being shown, the text will be shown below.
`label` string	Text to display as label.
`onChange` function	Callback fired any time the selected state of the radio button changes. `function (event: React.ChangeEvent, Event source of the callback. value: any The value of the radio button. )`
`onClick` function	Callback fired any time the radio button is clicked. `function (event: React.MouseEvent Event source of the callback. )`
`spacingType` enum[]	Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like `margin` or `padding`. To omit a value, use `SPACING_TYPE.OMIT`. `<Array of<One ofRadio.SPACING_TYPE.EXTRA_LARGE, Radio.SPACING_TYPE.LARGE, Radio.SPACING_TYPE.MEDIUM, Radio.SPACING_TYPE.NONE, Radio.SPACING_TYPE.OMIT, Radio.SPACING_TYPE.SMALL > >`
`style` object	Inline style for custom styling.Should be used only for positioning and spacing purposes.
`testId` string	Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, `my-nerdpack.some-element`. Note: You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass a `e2e-test` query parameter to the URL.
`value` string	The value of the component. Used by the `<RadioGroup/>` to identify the selected radio button.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Basic

With info

With description

With invalid message

Controlled component

Props

boolean

string

string

boolean

string

boolean|string

string

function

function

enum[]

object

string

string

Usage