LogoLogo
Developer HubGitHubContact Us
  • Welcome!
  • Olive Helps
    • Platform
      • How Olive Helps Works
      • Installation
      • Account Creation
      • Distributing Olive Helps
    • FAQs
      • General Loop FAQs
      • Loop Development FAQs
      • Olive Helps User FAQs
      • Security / IT FAQs
    • Data Security
      • User Data
      • Antivirus and Firewalls
  • Loop Development Kit
    • Your First Loop
      • Become a Loop Author
      • Creating a Loop
      • Build Your Loop
      • Local Loop Installation
      • Restarting Local Loops
    • Troubleshooting
    • Loop Security
      • Permissions
      • Environment Permissions
    • Loop Publication
      • Loop Approval Checklist
    • Loop Analytics Library
    • Examples
  • Documentation
  • Interfaces
  • Type Alias
  • Enumerations
  • Whisper Components
    • Base Attributes
    • Autocomplete
    • Box
    • Breadcrumb
    • Button
    • Chart
    • CollapseBox
    • Grid
    • Checkbox
    • Date Time
    • Divider
    • DropZone
    • Email
    • Icon
    • List Pair
    • Link
    • Pagination
    • Number
    • Markdown
    • Message
    • Password
    • Progress
    • Radio
    • Rating
    • RichTextEditor
    • Section Title
    • Select
    • Text Input
    • Telephone
    • Typography
  • APTITUDES
    • What are Aptitudes?
    • Browser
    • Clipboard
    • Config
    • Cursor
      • Screen Scaling Behavior
    • Document
    • Filesystem
    • Keyboard
    • Network
    • Process
    • Screen
    • Search
      • Index
    • System
    • UI
      • Loop UI Handlers
    • User
      • JWT
    • Vault
    • Whisper
      • Whisper Updates
      • JSX Whispers
    • Window
      • Screen Scaling Behavior
  • Release Notes
    • What's New
      • Olive Helps v0.55.0
      • Olive Helps v0.54.1
      • Olive Helps v0.53.1
      • Olive Helps v0.51.2
      • LDK v4.0.0
      • Olive Helps v0.50.3
      • Olive Helps v0.49.5
      • LDK v 3.18.0
      • Olive Helps v0.47.2
      • Olive Helps v0.46.2
      • LDK v 3.17.0
      • Olive Helps v0.45.4
      • Olive Helps v0.44.2
      • Olive Helps v0.43.1
      • Olive Helps v0.42.1
      • Olive Helps v0.41.4
      • Olive Helps v0.40.2
      • Olive Helps v0.39.4 & LDK v3.16.0
      • Olive Helps v0.38.8 & LDK v3.15.0
      • Olive Helps v0.36.5
      • Olive Helps v0.36.4
    • Archive
      • Olive Helps v0.36.3 & LDK v3.14.0
      • Olive Helps v0.34.4
      • LDK v3.13.0
      • Olive Helps v0.32.2 & LDK v3.12.0
      • Olive Helps v0.31.2 & LDK v3.11.0
      • Olive Helps v0.30.2 & LDK v3.10.0
      • Olive Helps v0.29.4
      • Olive Helps v0.29.3 & LDK v3.9.0
      • Olive Helps v0.28.3 & LDK v3.8.0
      • Olive Helps v0.27.7
      • Olive Helps v0.27.5
      • Olive Helps v.027.4
      • Olive Helps v0.27.2 & LDK v3.7.0
      • Olive Helps v0.25.3 & LDK v3.5.1
      • Olive Helps v0.24.6 & LDK v3.4.0
      • Olive Helps v0.23.2 & LDK v3.3.0
      • Olive Helps v0.22.3 & LDK v3.2.0
Powered by GitBook
On this page
  • Props
  • Examples

Was this helpful?

  1. Whisper Components

Radio

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

PreviousProgressNextRating

Last updated 3 years ago

Was this helpful?

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

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 />);
Radio group with 3 options and a validation error