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
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.
bold
Type: boolean
Default: false
Determines whether the text will be bold or not.
id
Type: string || number
Default: randomly generated string
Adds an ID only to the input, and it's used elsewhere for accessibility props.
onChange
Type: function
Default: () => {}
The event handler function for the 'onchange' event. Receives the associated event object as the first argument.