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

Name	Type	Description	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`

Whisper Components - Previous

Progress

Next - Whisper Components

Rating

Last modified 1yr ago