Radio Group Field

Table of Contents

Options
Example: Select an Rating

This is an advanced-use feature, and likely not something you'll need to configure. What you probably want is the content types reference!

The radio-group field represents a group of radio inputs. It can rendered in a "horizontal" or "vertical" direction.

TinaCMS Radio Group Field using a "radio" variant in a "horizontal" direction

TinaCMS Radio Group Field using a "radio" variant in a "vertical" direction

Options

interface RadioGroupField {
  name: string
  component: string
  label?: string
  options: (Option | string)[]
  direction?: 'horizontal' | 'vertical'
}

type Option = {
  value: string
  label: string
}

These interfaces only show the keys unique to the radio group field. Visit the Field Config docs for a complete list of options.

Example: Select an Rating

Below is an example of how a radio group field could be used to choose a rating of a customer review.

const ReviewForm = {
  fields: [
    {
      type: 'string',
      name: 'rating',
      label: 'Rating',
      description: 'Choose a rating for this review',
      options: [
        { label: '★', value: 'one_star' },
        { label: '★★', value: 'two_star' },
        { label: '★★★', value: 'three_star' },
        { label: '★★★★', value: 'four_star' },
        { label: '★★★★★', value: 'five_star' },
      ],
      ui: {
        component: 'radio-group',
        direction: 'vertical',
      },
    },
    // ...
  ],
}