Checkbox

An individual checkbox.

Showcase

Subscribe to newsletter?

Can't uncheck me!

Source

<Checkbox
  name="subscribe"
  value="newsletter"
  title="Select to subscribe!"
>
  <span class="ml">Subscribe to newsletter?</span>
</Checkbox>
<Checkbox checked disabled round>
  <span class="ml">Can't uncheck me!</span>
</Checkbox>

Properties #

Style Properties

Name	Default	Type	Description
`slotLeft`	`false`	`boolean`	Places the default slot (label) to the left of the checkbox.
`round`	`false`	`boolean`	Makes the checkbox round (and slightly larger).
`selectorStyle`	`null`	`string`	A CSS style string to assign to the selector box element. Can be used to make the checkbox represent a color (in conjunction with the `getColorPickerStyles` utility).

Functional Properties

Name	Default	Type	Description
`value`	`null`	`string`	The value assigned to the checkbox input. Check MDN Docs for more information.
`checked`	`false`	`boolean`	Whether the checkbox is checked or not.
`disabled`	`false`	`boolean`	Disables the checkbox, freezing its current `checked` state.
`title`	`null`	`string`	Adds a tooltip to the checkbox.
`...`		`any`	Everything else will be passed to the underlying `<input type="checkbox">` element.

Class Properties

All <Checkbox> components use the .checkbox class on the <label> and .selector on the selector box.

Falsy values passed to classes will be disregarded.

Name	Default	Type	Description
`class`	`null`	`string`	A class string to add to the root `<label>` element.
`inputClass`	`null`	`string`	A class string to assign to the `<input>` element.
`selectorClass`	`null`	`string`	A class string to add to the selector box element.

Events #

Name	Event Detail	Description
`change`	`{ value, checked, nativeEvent }`	Fired when the selection changes. The `value` contains the element's `value` passed as a property (not altered, so if you pass an object, you get an object here), `checked` represents the input's state, and `nativeEvent` has the native change event.

Slots #

Default slot

The label for the checkbox. By default, the slot is positioned to the right of the checkbox, but its placement can be adjusted with the slotLeft property.

SCSS Variables #

Name	Description	Default
`$main`	The fill color of the checked checkbox.	#4300B0
`$font`	The font of the checkbox's label.	`'Ubuntu'`
`$disabled`	The fill color of the disabled checkbox.	#888888
`$dark`	The background color of the checkbox hover signifier.	#333333
`$light-contrast`	The border color of an unchecked checkbox, or the fill color of a checked disabled one.	#DDDDDD
`$main-text`	The color of the checkmark.	#FFFFFF