Links

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 />);