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
1
import { whisper } from '@oliveai/ldk';
2
import {
3
WhisperComponentType,
4
} from '@oliveai/ldk/dist/whisper/types';
5
6
export const checkboxWhisper = async () => {
7
await whisper.create({
8
label: 'Checkbox',
9
components: [
10
{
11
type: WhisperComponentType.Checkbox,
12
label: 'Checkbox 1',
13
onChange: (error, value) => {
14
console.log('onChange', error, value)
15
},
16
validationError: 'Validation Error',
17
value: false,
18
},
19
{
20
type: WhisperComponentType.Checkbox,
21
label: 'Checkbox 2',
22
onChange: (error, value) => {
23
console.log('onChange', error, value)
24
},
25
tooltip: "Tooltip",
26
value: true,
27
},
28
{
29
type: WhisperComponentType.Checkbox,
30
label: 'Checkbox 3',
31
onChange: (error, value) => {
32
console.log('onChange', error, value)
33
},
34
value: true,
35
},
36
],
37
});
38
}
Copied!
1
import * as React from 'react';
2
import '@oliveai/ldk';
3
import * as ReactWhisper from '@oliveai/ldk/dist/whisper/react/renderer';
4
5
const TestCheckbox = () => {
6
return (
7
<oh-whisper label="Checkbox" onClose={() => {}}>
8
<oh-checkbox
9
label="Checkbox One"
10
onChange={(error, value) => console.log('onChange', error, value)}
11
value={false}
12
validationError="Validation Error"
13
/>
14
<oh-checkbox
15
label="Checkbox Two"
16
onChange={(error, value) => console.log('onChange', error, value)}
17
value={true}
18
tooltip="Tooltip"
19
/>
20
<oh-checkbox
21
label="Checkbox Three"
22
onChange={(error, value) => console.log('onChange', error, value)}
23
value={true}
24
/>
25
</oh-whisper>
26
);
27
};
28
29
ReactWhisper.renderNewWhisper(<TestCheckbox />);
Copied!
Copy link