You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

@leafygreen-ui/checkbox

Package Overview
Dependencies
Maintainers
3
Versions
107
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@leafygreen-ui/checkbox

LeafyGreen UI Kit Checkbox

1.1.2
Source
npmnpm
Version published
Weekly downloads
93K
5.55%
Maintainers
3
Weekly downloads
 
Created
Source

Checkbox

Example

<Checkbox
	className='my-checkbox'
	onChange={(event) => {/* Something to handle the click event */}}
	label='This is how you enable a thing'
	checked={true}
/>

Output HTML

  <label class="css-1rgbgdt my-checkbox" title="Create an item" for="checkbox-14827892">
		<input
		  checked
			type="checkbox"
			role="checkbox"
			class="css-32kjhsdaf"
			id="checkbox-14827892"
			name="checkbox-14827892"
			aria-disabled="false"
			aria-checked="true"
			aria-labeledby="checkbox-14827892-label"
		/>
    
		<div class="css-34kjkdfg">
			<div class="css-98sdfjsad"></div>
		</div>

		<span class="css-8xdsjfh9" id="checkbox-14827892-label">
			This is how you enable a thing
		</span>
  </label>

Properties

variant

Type: string

Default: 'default'

Sets the style variant of the checkbox. Valid variants for checkboxes are 'default' and 'light'.

checked

Type: boolean

Default: false

Checks the checkbox.

label

Type: node

Default: null

The label for the checkbox.

disabled

Type: boolean

Default: false

Disables the checkbox.

indeterminate

Type: boolean

Default: false

Sets the checkbox as indeterminate. NOTE: the checkbox will become out of sync with the indeterminate prop when it's clicked. Make sure to unset the indeterminate prop on change where you're controlling your input.

className

Type: string

Default: ''

Adds a className to the outermost element.

onChange

Type: function

Default: () => {}

The event handler function for the 'onchange' event. Receives the associated event object as the first argument.

Any other properties will be spread on the input 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