@leafygreen-ui/radio-box-group

Radio Box Group

View on Storybook

Installation

Yarn

yarn add @leafygreen-ui/radio-box-group

NPM

npm install @leafygreen-ui/radio-box-group

Peer Dependencies

Package	Version
@leafygreen-ui/leafygreen-provider	^1.1.0

Example

import { RadioBox, RadioBoxGroup } from '@leafygreen-ui/radio-box-group';

<RadioBoxGroup className="radio-box-group-style">
  <RadioBox value="option-1">Radio Box 1</RadioBox>
  <RadioBox value="option-2">Radio Box 2</RadioBox>
</RadioBoxGroup>;

Output HTML

<div
  class="leafygreen-ui-k008qs radio-box-group-style"
  role="group"
  aria-label="radio-box-group-850132"
>
  <label for="radio-box-group-850132-button-0" class="leafygreen-ui-i6e9um">
    <input
      type="radio"
      id="radio-box-group-850132-button-0"
      name="radio-box-group-850132"
      aria-checked="false"
      aria-disabled="false"
      class="leafygreen-ui-10udnlm"
      value="option-1"
    />
    <div class="leafygreen-ui-1rd79mb"></div>
    <div class="leafygreen-ui-1m9u12l leafygreen-ui-tv1yok">Radio Box 1</div>
  </label>
  <label for="radio-box-group-850132-button-1" class="leafygreen-ui-i6e9um">
    <input
      type="radio"
      id="radio-box-group-850132-button-1"
      name="radio-box-group-850132"
      aria-checked="false"
      aria-disabled="false"
      class="leafygreen-ui-10udnlm"
      value="option-2"
    />
    <div class="leafygreen-ui-1rd79mb"></div>
    <div class="leafygreen-ui-1m9u12l leafygreen-ui-tv1yok">Radio Box 2</div>
  </label>
</div>

Properties

Prop	Type	Description	Default
size	'compact', 'default', 'full'	Sets the style of the <RadioBoxGroup />.	'default'
name	string	Sets the name of the input group.
value	string or number	Sets the <Radio /> that will appear checked on page load, also makes the component a controlled component
className	string	Adds a className to the root element
children	node	Content of the component
onChange	function	The event handler function for the 'onChange' event. Receives the associated event object as the first argument.	() => {}

Any other properties supplied will be spread on the root element.

Rich Radio Input

Example

<RadioBox value="option-2">Radio Box 2</RadioBox>

Output HTML

<label for="radio-box-group-746930-button-1" class="leafygreen-ui-i6e9um">
  <input
    type="radio"
    id="radio-box-group-746930-button-1"
    name="radio-box-group-746930"
    aria-checked="false"
    aria-disabled="false"
    class="leafygreen-ui-10udnlm"
    value="option-2"
  />
  <div class="leafygreen-ui-1rd79mb"></div>
  <div class="leafygreen-ui-1m9u12l leafygreen-ui-tv1yok">Radio Box 2</div>
</label>

Properties

Prop	Type	Description	Default
value	Required: string or number	Every <RadioBox /> needs a value prop
className	string	Adds a className to the root element	''
checked	boolean	Indicates whether or not the box will be checked	false
disabled	boolean	Indicates whether or not the radio can be clicked by a user	false
children	node	Content that appears inside of the <RadioBox />
default	boolean	If <RadioBoxGroup /> is uncontrolled, the default property makes this RadioBox checked on the initial render.

Any other properties supplied will be spread on the root element.