Nabbing Pleasant Monads

    @leafygreen-ui/radio-box-group
    TypeScript icon, indicating that this package has built-in type declarations

    9.0.1 • Public • Published

    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

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

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

    Keywords

    none

    Install

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

    DownloadsWeekly Downloads

    3,674

    Version

    9.0.1

    License

    Apache-2.0

    Unpacked Size

    135 kB

    Total Files

    26

    Last publish

    Collaborators

    • shaneeza
    • hswolff
    • dave.mccarthy
    • thesonofthomp