Radio

• Displays status

import { Radio } from '@viamrobotics/prime-core';

Basic

Lion

Tiger

Bear

<Radio
  name="basic"
  options={['Lion', 'Tiger', 'Bear']}
  selected="Lion"
/>

With legend

Favorite animal

Lion

Tiger

Bear

<Radio
  name="legend"
  options={['Lion', 'Tiger', 'Bear']}
  selected="Lion"
>
  <svelte:fragment slot="legend">Favorite animal</svelte:fragment>
</Radio>

Required

Favorite animal

Lion

Tiger

Bear

<Radio
  options={['Lion', 'Tiger', 'Bear']}
  selected="Lion"
  required
>
  <svelte:fragment slot="legend">Favorite animal</svelte:fragment>
</Radio>

Disabled

Favorite animal

Lion

Tiger

Bear

<Radio
  name="disabled"
  options={['Lion', 'Tiger', 'Bear']}
  selected="Lion"
  disabled
>
  <svelte:fragment slot="legend">Favorite animal</svelte:fragment>
</Radio>

With description

Upload model

New model

Upload a new model

New version

Upload a new version of a model that already exists in Viam

<Radio
  name="Upload model"
  options={[
    {
      label: 'New model',
      value: 'new model',
      description: 'Upload a new model'
    },
    {
      label: 'New version',
      value: 'new version',
      description: 'Upload a new version of a model that already exists in Viam'
    }
  ]}
  selected="new model"
>
  <svelte:fragment slot="legend">Upload model</svelte:fragment>
</Radio>

With icon

Visibility

Public

Can be used by external organizations

Private

Only for internal use within this organization

<Radio
  name="Visibility"
  options={[
    {
      label: 'Public',
      value: 'public',
      description: 'Can be used by external organizations',
      icon: 'earth'
    },
    {
      label: 'Private',
      value: 'private',
      description: 'Only for internal use within this organization',
      icon: 'lock'
    }
  ]}
  selected="public"
>
  <svelte:fragment slot="legend">Visibility</svelte:fragment>
</Radio>