Checkbox

Examples

Basic

Checkboxes allow the user to toggle an option on or off.

<ods-checkbox>Checkbox</ods-checkbox>

import { OdsCheckbox } from '@ods/components/react.checkbox';

const Example = () => {
  return (
    <OdsCheckbox>Checkbox</OdsCheckbox>
  )
}

export default Example;

Checked

Use the checked attribute to activate the checkbox.

<ods-checkbox checked>Checked</ods-checkbox>

import { OdsCheckbox } from '@ods/components/react.checkbox';

const Example = () => {
  return (
    <OdsCheckbox checked>Checked</OdsCheckbox>
  )
}

export default Example;

Help Text

Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.

<ods-checkbox help-text="What should the user know about the checkbox?">Label</ods-checkbox>

import { OdsCheckbox } from '@ods/components/react.checkbox';

const Example = () => {
  return (
    <OdsCheckbox help-text="What should the user know about the checkbox?">
      Label
    </OdsCheckbox>
  )
}

export default Example;

Required

Use the required attribute to specify the input is a required field when using within a form.

<ods-checkbox required>Checked</ods-checkbox>

import { OdsCheckbox } from '@ods/components/react.checkbox';

const Example = () => {
  return (
    <OdsCheckbox required>Checked</OdsCheckbox>
  )
}

export default Example;

Disabled

Use the disabled attribute to disable the checkbox.

<ods-checkbox disabled required help-text="Sample help text">Disabled</ods-checkbox>

import { OdsCheckbox } from '@ods/components/react.checkbox';

const Example = () => {
  return (
    <OdsCheckbox
      help-text="Sample help text"
      disabled
      required>
      Disabled
    </OdsCheckbox>
  )
}

export default Example;

Error

Use the error-text attribute to customize the error message shown. Read more about error validation here .

<form novalidate>
    <ods-checkbox error-text="Sample error text" required>Checked</ods-checkbox>
</form>

import { OdsCheckbox } from '@ods/components/react.checkbox';

const Example = () => {
  return (
    <form noValidate>
      <OdsCheckbox
        error-text="Sample error text"
        required>
        Checked
      </OdsCheckbox>
    </form>
  )
}

export default Example;

Indeterminate

Use the indeterminate attribute to make the checkbox indeterminate.

<ods-checkbox indeterminate>Indeterminate</ods-checkbox>

import { OdsCheckbox } from '@ods/components/react.checkbox';

const Example = () => {
  return (
    <OdsCheckbox indeterminate>Indeterminate</OdsCheckbox>
  )
}

export default Example;

Handling An Event

You can listen for the ods-change event to determine when a checkbox is updated. You can see other checkbox events here . You can also see how a checkbox is used in forms by checking out the form section .

<ods-checkbox id="checkbox-example">Checkbox</ods-checkbox>

<script>
  const checkbox = document.getElementById('checkbox-example');

  const onChangeHandler = (event) => {
    const target = event.target;
    const status = target.checked ? 'checked' : 'not checked';

    alert(`Checkbox ${status}`);
  };

  checkbox.addEventListener('ods-change', (event) => onChangeHandler(event));
</script>

import { OdsCheckbox } from '@ods/components/react.checkbox';
import { OdsInputEvent } from '@ods/components/react';

export const Example = () => {
  const onChangeHandler = (event: OdsInputEvent) => {
    const target = event.target as HTMLInputElement;
    const status = target.checked ? 'checked' : 'not checked';

    alert(`Checkbox ${status}`);
  };

  return (
    <OdsCheckbox onOdsChange={onChangeHandler}>Checkbox</OdsCheckbox>
  )
}

export default Example;

Importing

import '@ods/components/web.checkbox';

import { OdsCheckbox } from '@ods/components/react.checkbox';

import { OdsCheckbox } from '@ods/components/react.checkbox';