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
React
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,
      },
    ],
  });
}
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 />);

Name	Type	Description	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.

Whisper Components - Previous

Grid

Next - Whisper Components

Date Time

Last modified 1yr ago