@leafygreen-ui/radio-group
leafyGreen UI Kit RadioGroup
Last updated a month ago by brookescarlett .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/radio-group 
SYNC missed versions from official npm registry.

Radio Group

npm (scoped)

View on Storybook

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"
    disabled="true"
    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

Current Tags

  • 7.0.1                                ...           latest (a month ago)

30 Versions

  • 7.0.1                                ...           a month ago
  • 7.0.0                                ...           a month ago
  • 6.0.3                                ...           2 months ago
  • 6.0.2                                ...           2 months ago
  • 6.0.1                                ...           3 months ago
  • 6.0.0                                ...           3 months ago
  • 5.1.0                                ...           4 months ago
  • 5.0.0                                ...           4 months ago
  • 4.0.3                                ...           5 months ago
  • 4.0.2                                ...           5 months ago
  • 4.0.1                                ...           5 months ago
  • 4.0.0                                ...           5 months ago
  • 3.0.1                                ...           6 months ago
  • 3.0.0                                ...           7 months ago
  • 2.0.1                                ...           9 months ago
  • 2.0.0                                ...           a year ago
  • 1.3.4                                ...           a year ago
  • 1.3.3                                ...           a year ago
  • 1.3.2                                ...           a year ago
  • 1.3.1                                ...           a year ago
  • 1.3.0                                ...           a year ago
  • 1.2.2                                ...           2 years ago
  • 1.2.1                                ...           2 years ago
  • 1.2.0                                ...           2 years ago
  • 1.1.7                                ...           2 years ago
  • 1.1.6                                ...           2 years ago
  • 1.1.5                                ...           2 years ago
  • 1.1.4                                ...           2 years ago
  • 1.1.3                                ...           2 years ago
  • 1.1.2                                ...           2 years ago
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 0
Last Month 63
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |