Radio

Used to select one option from several options.

Demo

React
Vue

Size

Orientation

Variant

Label position

Color scheme

Required

Read only

Disabled

Select a cloud service provider:AWSAzureGCPOracle (coming soon)

Selected:null

Usage

React
Vue

import { useState } from 'react';
import {
  Radio,
  type RadioOption,
} from '@fintech-sandpit/ui/react';

const [csp, setCsp] = useState<string | null>(null);

const options: RadioOption[] = [
  { label: 'AWS', value: 'aws' },
  { label: 'Azure', value: 'azure' },
  { label: 'GCP', value: 'gcp' },
  { label: 'Oracle (coming soon)', value: 'oracle', disabled: true },
];

return (
  <Radio
    value={csp}
    options={options}
    label="Select a cloud service provider:"
    onChange={setCsp}
  />
);

<script setup lang="ts">
import { ref } from 'vue';
import {
  Radio,
  type RadioOption,
} from '@fintech-sandpit/ui/vue';

const csp = ref<string | null>(null);

const options: RadioOption[] = [
  { label: 'AWS', value: 'aws' },
  { label: 'Azure', value: 'azure' },
  { label: 'GCP', value: 'gcp' },
  { label: 'Oracle (coming soon)', value: 'oracle', disabled: true },
];
</script>

<template>
  <Radio
    v-model="csp"
    :options="options"
    label="Select a cloud service provider:"
  />
</template>

Props

React
Vue

Name	Type	Default	Description
`value`	`string`	—	The value of the radio field (controlled)
`defaultValue`	`string`	—	The default value of the radio field (uncontrolled)
`options`	`RadioOption[]`	—	The options of the radio field
`label`	`string`	—	The label of the radio field
`labelPosition`	`LabelPosition`	`left`	The position of the label
`orientation`	`Orientation`	`vertical`	The orientation of the radio field
`size`	`Size`	`md`	The size of the radio field
`variant`	`RadioVariant`	`solid`	The variant of the radio field
`colorScheme`	`ColorScheme`	`neutral`	The color scheme of the radio field
`required`	`boolean`	`false`	Whether the radio field is required
`readOnly`	`boolean`	`false`	Whether the radio field is read-only
`disabled`	`boolean`	`false`	Whether the radio field is disabled

Name	Type	Default	Description
`model-value`	`string`	—	The value of the radio field (controlled) ¹
`default-value`	`string`	—	The default value of the radio field (uncontrolled)
`options`	`RadioOption[]`	—	The options of the radio field
`label`	`string`	—	The label of the radio field
`label-position`	`LabelPosition`	`left`	The position of the label
`orientation`	`Orientation`	`vertical`	The orientation of the radio field
`size`	`Size`	`md`	The size of the radio field
`variant`	`RadioVariant`	`solid`	The variant of the radio field
`color-scheme`	`ColorScheme`	`neutral`	The color scheme of the radio field
`required`	`boolean`	`false`	Whether the radio field is required
`read-only`	`boolean`	`false`	Whether the radio field is read-only
`disabled`	`boolean`	`false`	Whether the radio field is disabled

Can be used with the v-model directive for two-way binding.

Name	Type	Description
`onChange`	`(value: string) => void`	Callback fired when the value changes

Name	Payload	Description
`update:model-value`	`string`	Event emitted when the value changes

Types

type ColorScheme = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
type LabelPosition = 'left' | 'right'
type Orientation = 'horizontal' | 'vertical'
type RadioOption = {
  label: string;
  value: string;
  disabled?: boolean;
}
type RadioVariant = 'solid' | 'subtle' | 'outline'
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'