13.0.2 • Published 11 months ago

@leafygreen-ui/radio-box-group v13.0.2

Weekly downloads
276
License
Apache-2.0
Repository
github
Last release
11 months ago

Radio Box Group

npm (scoped)

View on MongoDB.design

Installation

Yarn

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

NPM

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

Peer Dependencies

PackageVersion
@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

PropTypeDescriptionDefault
size'compact', 'default', 'full'Sets the style of the <RadioBoxGroup />.'default'
namestringSets the name of the input group.
valuestring, numberSets the <Radio /> that will appear checked on page load, also makes the component a controlled component
classNamestringAdds a className to the root element
childrennodeContent of the component
onChangefunctionThe event handler function for the 'onChange' event. Receives the associated event object as the first argument.() => {}
...native div attributesAny other props will be spread on the root div element

Radio Box

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

PropTypeDescriptionDefault
value (Required)string, numberEvery <RadioBox /> needs a value prop
classNamestringAdds a className to the root element''
checkedbooleanIndicates whether or not the box will be checkedfalse
disabledbooleanIndicates whether or not the radio can be clicked by a userfalse
childrennodeContent that appears inside of the <RadioBox />
defaultbooleanIf <RadioBoxGroup /> is uncontrolled, the default property makes this RadioBox checked on the initial render.
...native input attributesAny other props will be spread on the root input element
13.0.2

11 months ago

13.0.1

12 months ago

13.0.0

1 year ago

12.0.16

2 years ago

12.0.13

2 years ago

12.0.12

2 years ago

12.0.15

2 years ago

12.0.14

2 years ago

12.0.11

2 years ago

12.0.10

2 years ago

13.0.0-alpha.1

2 years ago

13.0.0-alpha.0

2 years ago

12.0.7

2 years ago

12.0.8

2 years ago

12.0.9

2 years ago

12.0.6

2 years ago

12.0.8-next.4

2 years ago

12.0.8-next.3

2 years ago

12.0.8-next.6

2 years ago

12.0.8-next.5

2 years ago

12.0.8-next.7

2 years ago

12.0.8-next.0

2 years ago

12.0.8-next.2

2 years ago

12.0.8-next.1

2 years ago

12.0.4

2 years ago

12.0.5

2 years ago

12.0.3

2 years ago

12.0.0

3 years ago

12.0.1

3 years ago

12.0.2

3 years ago

10.0.0

3 years ago

9.1.1

3 years ago

9.1.0

3 years ago

11.0.0

3 years ago

9.0.3

3 years ago

9.1.0-test.0

3 years ago

9.1.0-next.2

3 years ago

9.1.0-next.0

3 years ago

9.1.0-next.1

3 years ago

9.0.2

3 years ago

9.0.1

3 years ago

9.0.0

3 years ago

8.0.1

3 years ago

8.0.2

3 years ago

8.0.0

3 years ago

7.0.0

3 years ago

6.1.5

4 years ago

6.1.4

4 years ago

6.1.3

4 years ago

6.1.2

4 years ago

6.1.1

4 years ago

6.1.0

4 years ago

6.0.0

4 years ago

5.0.3

4 years ago

5.0.2

4 years ago

5.0.1

5 years ago

5.0.0

5 years ago

4.1.0

5 years ago

4.0.1

5 years ago

4.0.0

5 years ago

3.0.3

5 years ago

3.0.2

5 years ago

3.0.1

5 years ago

3.0.0

5 years ago

2.0.0

6 years ago

1.3.1

6 years ago

1.3.0

6 years ago

1.2.3

6 years ago

1.2.2

6 years ago

1.2.1

6 years ago

1.2.0

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago