Checkbox

The Checkbox component provides a way for the end user to toggle between checked / unchecked states.

Props

Name	Type	Description	Required	Default
disabled	boolean	Prevents the checkbox from interaction.		null
label	string	Text that shows to the right of the checkbox input.		null
onChange	function	Executes the provided function when the user clicks the checkbox input.
tooltip	string	Text that appears when hovering over the checkbox component.
validationError	string	When not '' or undefined, outlines the input in red and renders the provided text in red beneath the input.		null
value	boolean	State value associated with the checkbox to determine if it is checked.

Examples

3 separate checkboxes with the first checkbox rendering a validation error.

Javascript

import { whisper } from '@oliveai/ldk';
import {
  WhisperComponentType,
} from '@oliveai/ldk/dist/whisper/types';

export const checkboxWhisper = async () => {
  await whisper.create({
    label: 'Checkbox',
    components: [
      {
        type: WhisperComponentType.Checkbox,
        label: 'Checkbox 1',
        onChange: (error, value) => {
          console.log('onChange', error, value)
        },
        validationError: 'Validation Error',
        value: false,
      },
      {
        type: WhisperComponentType.Checkbox,
        label: 'Checkbox 2',
        onChange: (error, value) => {
          console.log('onChange', error, value)
        },
        tooltip: "Tooltip",
        value: true,
      },
      {
        type: WhisperComponentType.Checkbox,
        label: 'Checkbox 3',
        onChange: (error, value) => {
          console.log('onChange', error, value)
        },
        value: true,
      },
    ],
  });
}

React

import * as React from 'react';
import '@oliveai/ldk';
import * as ReactWhisper from '@oliveai/ldk/dist/whisper/react/renderer';

const TestCheckbox = () => {  
  return (
    <oh-whisper label="Checkbox" onClose={() => {}}>
      <oh-checkbox
        label="Checkbox One"
        onChange={(error, value) => console.log('onChange', error, value)}
        value={false}
        validationError="Validation Error"
      />
      <oh-checkbox
        label="Checkbox Two"
        onChange={(error, value) => console.log('onChange', error, value)}
        value={true}
        tooltip="Tooltip"
      />
      <oh-checkbox
        label="Checkbox Three"
        onChange={(error, value) => console.log('onChange', error, value)}
        value={true}
      />
    </oh-whisper>
  );
};

ReactWhisper.renderNewWhisper(<TestCheckbox />);