Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@leafygreen-ui/radio-box-group

Package Overview
Dependencies
Maintainers
4
Versions
80
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@leafygreen-ui/radio-box-group

leafyGreen UI Kit RadioBoxGroup

  • 9.0.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
105K
increased by147.29%
Maintainers
4
Weekly downloads
 
Created
Source

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

FAQs

Package last updated on 29 Jun 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc