@leafygreen-ui/radio-group v11.0.1
Radio Group
View on MongoDB.design
Installation
Yarn
yarn add @leafygreen-ui/radio-group
NPM
npm install @leafygreen-ui/radio-group
Example
import { Radio, RadioGroup } from '@leafygreen-ui/radio-group';
<RadioGroup
className="my-radio-group"
variant="default"
onChange={event => console.log('hi')}
value="option-1"
name="name-of-input-group"
>
<Radio className="my-radio" value="option-1">
Label Text Goes Here
</Radio>
</RadioGroup>;
Output HTML
<div
class="leafygreen-ui-16glayc my-radio-group"
role="group"
aria-label="radio-group-660118"
>
<label
for="radio-group-660118-button-0"
class="leafygreen-ui-11wfvmq my-radio"
>
<input
id="radio-group-660118-button-0"
name="name-of-input-group"
type="radio"
class="leafygreen-ui-i6tne my-radio"
aria-checked="true"
aria-disabled="false"
value="option-1"
/>
<span class="leafygreen-ui-1l7rt9l">Label Text Goes Here</span>
</label>
</div>
Properties
Prop | Type | Description | Default |
---|---|---|---|
darkMode | boolean | Determines whether or not the component appears in dark mode | false |
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. | '' |
onChange | function | The event handler function for the 'onchange' event. Receives the associated event object as the first argument. | () => {} |
children | node | Can be any node; however, any <Radio /> components, will be treated as belonging to the <RadioGroup /> compound component, and will receive internal state from <RadioGroup /> | |
size | 'xsmall' , 'small' , 'default' | Sets the size for the Radios. Use of xsmall should be limited to only Charts | default |
Any other properties will be spread on the root element.
Radio
Example
<Radio className="my-radio" value="option-1" disabled={true}>
Label Text Goes Here
</Radio>
Output HTML
<label class="leafygreen-ui-11wfvmq my-radio">
<input
type="radio"
class="leafygreen-ui-i6tne"
aria-checked="false"
aria-disabled="true"
value="option-1"
/>
<span class="leafygreen-ui-1l7rt9l">Label Text Goes Here</span>
</label>
Properties
Prop | Type | Description | Default |
---|---|---|---|
value (Required) | string , number | Every <Radio /> needs a value prop. | |
className | string | Adds a className to the label | '' |
disabled | boolean | Indicates whether or not the radio can be clicked by a user | false |
children | node | Text that appears adjacent to the radio input; label text. | |
default | boolean | If <RadioGroup /> is uncontrolled, the default property makes this Radio checked on the initial render. | |
checked | boolean | Determines if <Radio /> will appear checked | false |
... | native input attributes | Any other props will be spread on the root input element |
24 days ago
1 month ago
2 months ago
3 months ago
7 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
10 months ago
10 months ago
9 months ago
9 months ago
10 months ago
10 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago