Checkbox

A form control that allows the user to toggle between checked and not checked.

import { Checkbox } from "@ngrok/mantle/checkbox";
import { Label } from "@ngrok/mantle/label";


	
	Accept terms and conditions


	
	Unchecked


	
	Checked


	
	Indeterminate

API Reference

The Checkbox accepts the following props in addition to the standard HTML checkbox input attributes.

Prop Type Default Description

Prop	Type	Default	Description
checked	boolean indeterminate	—	Whether the checkbox is checked or not. Setting this to `indeterminate` will show the indeterminate state. This is useful for when the checkbox is in a parent-child relationship, but this requires manual, controlled state.
defaultChecked	boolean indeterminate	—	The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
validation	error success warning false `() => "error" \| "success" \| "warning" \| false`	—	Use the `validation` prop to show if the checkbox has a specific validation status. This will change the border and outline of the checkbox. The `false` type is useful when using short-circuiting logic so that you don't need to use a ternary with `undefined`. Setting `validation` to `error` also sets `aria-invalid`.

checked

boolean
indeterminate

—

Whether the checkbox is checked or not. Setting this to indeterminate will show the indeterminate state. This is useful for when the checkbox is in a parent-child relationship, but this requires manual, controlled state.

defaultChecked

boolean
indeterminate

—

The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.

validation

error
success
warning
false

() => "error" | "success" | "warning" | false

—

Use the validation prop to show if the checkbox has a specific validation status. This will change the border and outline of the checkbox.

The false type is useful when using short-circuiting logic so that you don't need to use a ternary with undefined.

Setting validation to error also sets aria-invalid.