0.17.1

Theme Switcher

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";

API Reference

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

PropTypeDefaultDescription

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.