@leafygreen-ui/checkbox

Checkbox

View on Storybook

Installation

Yarn

yarn add @leafygreen-ui/checkbox

NPM

npm install @leafygreen-ui/checkbox

Example

import Checkbox from '@leafygreen-ui/checkbox';

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

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

Prop	Type	Description	Default
darkMode	boolean	Determines whether or not the Checkbox will appear in dark mode.	false
checked	boolean	Checks the checkbox	false
label	node	The label for the checkbox.	''
disabled	boolean	Disables the checkbox.	false
indeterminate	boolean	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.	false
className	string	Adds a className to the outermost element.	''
bold	boolean	Determines whether the text will be bold or not.	false
animate	boolean	Determines whether the checkbox will be animated when checked or unchecked.	true
id	string or number	Adds an ID only to the input, and it's used elsewhere for accessibility props.	randomly generated string
onChange	function	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.