Radio
The Radio component provides a way for the end user to select between multiple options.
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 |

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