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

  • 1.0.1
  • Source
  • npm
  • Socket score

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

Radio Box Group

Example

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

size

Type: string Default: default Sets the style of the Radio Box Group. Valid sizes are compact, full and default

  • compact adds padding to text, so there is no fixed width amongst a collection of boxes
  • default has a fixed width and text will wrap accordingly
  • full radio boxes will scale depending on available space (will take up 100% of their parent container). All boxes will tbe the same size

name

Type: string Default: '' Sets the name of the input group

value

Type: string or number Default: `` Sets the radio that will apear checked on page load, also makes the component a controlled component

className

Type: string Default: '' Adds a className to the root element

onChange

Type: function Default: () => {} The event handler function for the 'onChange' event. Receives the associated event object as the first argument.

children

Type: node Default: null Content of the component

Any other properties supplied will be spread on the root element.

Rich Radio Input

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

value

Type: required, can be a string or an number Every radio needs a value prop

className

Type: string Default: `` Adds a className to the root element

checked

Type: boolean Default: false Indicates whether or not the box will be checked

disabled

Type: boolean Default: false Indicates whether or not the radio can be clicked by a user

children

Type: node Default: null Content that appears inside the Radio Box component

Any other properties supplied will be spread on the root element.

FAQs

Package last updated on 17 Apr 2019

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