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

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',
      },
    ],
  });
}

React

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