Checkbox
The Checkbox component provides a way for the end user to toggle between checked / unchecked states.
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. | |

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 />);
Last modified 1yr ago