Radio Box Group

View on MongoDB.design

Installation

PNPM

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

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>;

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, 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. | () => {} | | ... | native div attributes | Any other props will be spread on the root div element | |

Radio Box

Example

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

Properties

| Prop | Type | Description | Default | | ------------------ | ------------------------- | --------------------------------------------------------------------------------------------------------------- | ------- | | value (Required) | string, 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. | | | ... | native input attributes | Any other props will be spread on the root input element | |