Links

Radio

The Radio component provides a way for the end user to select between multiple options.

Props

Name
Type
Description
Required
Default
disabled
boolean
Prevents the radio group from interaction.
null
options
array[string]
List of options rendered to the end user as individual radio inputs.
onSelect
function
Executes the provided function when the end user clicks a certain radio input.
selected
number
State value associated with the radio group.
validationError
string
When not '' or undefined, outlines the input in red and renders the provided text in red beneath the input.
null

Examples

Radio group with 3 options and a validation error
Javascript
React
import { whisper } from '@oliveai/ldk';
import {
WhisperComponentType,
} from '@oliveai/ldk/dist/whisper/types';
export const radioWhisper = async () => {
await whisper.create({
label: 'Radio Group',
components: [
{
type: WhisperComponentType.RadioGroup,
onSelect: (error, value) => {
console.log('onSelect', error, value)
},
options: [
'Radio One',
'Radio Two',
'Radio Three',
],
selected: 0,
validationError: 'Validation Error',
},
],
});
}
import * as React from 'react';
import '@oliveai/ldk';
import * as ReactWhisper from '@oliveai/ldk/dist/whisper/react/renderer';
const TestRadioGroup = () => {
const [selected, setSelected] = React.useState(0);
return (
<oh-whisper label="Radio Group" onClose={() => {}}>
<oh-radio-group
onSelect={(error, value) => console.log('onSelect', error, value)}
options={[
'Radio One',
'Radio Two',
'Radio Three',
]}
selected={selected}
validationError="Validation Error"
/>
</oh-whisper>
);
};
ReactWhisper.renderNewWhisper(<TestRadioGroup />);