Radio Group

Radio Group components are Input Fields that present a set of mutually exclusive options. Users can select exactly one option from the group.

radiogroup.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      uid: 'radiogroup_id',
      kind: 'input',
      type: 'radiogroup',
      path: 'preference',
      label: 'Select your preference',
      props: {
        options: [
          {
            label: 'Option A',
            value: 'a',
          },
          {
            label: 'Option B',
            value: 'b',
          },
          {
            label: 'Option C',
            value: 'c',
          },
        ],
      },
    },
  ],
});

radiogroup.json

{
  "form": [
    {
      "uid": "radiogroup_id",
      "kind": "input",
      "type": "radiogroup",
      "path": "preference",
      "label": "Select your preference",
      "props": {
        "options": [
          { "label": "Option A", "value": "a" },
          { "label": "Option B", "value": "b" },
          { "label": "Option C", "value": "c" }
        ]
      }
    }
  ]
}

Props

Use these props to customize your Radio Group component.

prop	type	description
options	array	Required. Collection of options to display
value	string | number	The value of the currently selected option
hint	string	Description text displayed below the label
labelField	string	Custom key to use for the display label of each option. Defaults to label
valueField	string	Custom key to use for the underlying value of each option. Defaults to value
direction	row | column	Layout direction for the radio options. Defaults to column

Hint

Note

A label is required for the hint to be displayed.

Use the property hint to provide instructions for the user.

radiogroup.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      uid: 'radiogroup_hint',
      kind: 'input',
      type: 'radiogroup',
      path: 'preference',
      label: 'Select your preference',
      props: {
        options: [
          {
            label: 'Email',
            value: 'email',
          },
          {
            label: 'SMS',
            value: 'sms',
          },
        ],
        hint: 'We will use this method to send you notifications.',
      },
    },
  ],
});

radiogroup.json

{
  "form": [
    {
      "uid": "radiogroup_hint",
      "kind": "input",
      "type": "radiogroup",
      "path": "preference",
      "label": "Select your preference",
      "props": {
        "options": [
          { "label": "Email", "value": "email" },
          { "label": "SMS", "value": "sms" }
        ],
        "hint": "We will use this method to send you notifications."
      }
    }
  ]
}

Custom Fields

You can map different fields for the options using labelField and valueField.

radiogroup.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      uid: 'radiogroup_custom',
      kind: 'input',
      type: 'radiogroup',
      path: 'preference',
      label: 'Select your preference',
      props: {
        options: [
          {
            name: 'Choice 1',
            id: '1',
          },
          {
            name: 'Choice 2',
            id: '2',
          },
        ],
        labelField: 'name',
        valueField: 'id',
      },
    },
  ],
});

radiogroup.json

{
  "form": [
    {
      "uid": "radiogroup_custom",
      "kind": "input",
      "type": "radiogroup",
      "path": "preference",
      "label": "Select your preference",
      "props": {
        "options": [
          { "name": "Choice 1", "id": "1" },
          { "name": "Choice 2", "id": "2" }
        ],
        "labelField": "name",
        "valueField": "id"
      }
    }
  ]
}

Direction

Use the direction property to display radio options horizontally.

radiogroup.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      uid: 'radiogroup_direction',
      kind: 'input',
      type: 'radiogroup',
      path: 'preference',
      label: 'Select your preference',
      props: {
        options: [
          {
            label: 'Option A',
            value: 'a',
          },
          {
            label: 'Option B',
            value: 'b',
          },
          {
            label: 'Option C',
            value: 'c',
          },
        ],
        direction: 'row',
      },
    },
  ],
});

radiogroup.json

{
  "form": [
    {
      "uid": "radiogroup_direction",
      "kind": "input",
      "type": "radiogroup",
      "path": "preference",
      "label": "Select your preference",
      "props": {
        "options": [
          { "label": "Option A", "value": "a" },
          { "label": "Option B", "value": "b" },
          { "label": "Option C", "value": "c" }
        ],
        "direction": "row"
      }
    }
  ]
}

Styling

Radio Groups can be styled as explained in the Styling Guide.

CSS Variables

Following you will find a list with the CSS Variables and a quick description of what you will style.

CSS Variable	Description
--gui-intent-primary	Color for the inner circle when selected

Anatomy

This is the anatomy of the Radio Group Component in case you want to use your CSS styles.

radiogroup-anatomy.html

<gui-radiogroup>
  <div class="gui-label">
    <label id="radiogroup_id_label">Select your preference</label>
    <div class="gui-label__hint" id="radiogroup_id_hint">Hint text</div>
  </div>

  <!-- Add gui-widget--horizontal when direction is "row" -->
  <div
    class="gui-widget gui-widget--horizontal"
    role="radiogroup"
    id="radiogroup_id"
    aria-labelledby="radiogroup_id_label"
    aria-describedby="radiogroup_id_hint"
  >
    <label for="radiogroup_id_0">
      <input type="radio" id="radiogroup_id_0" name="radiogroup_id" value="a" checked />
      Option A
    </label>
    <label for="radiogroup_id_1">
      <input type="radio" id="radiogroup_id_1" name="radiogroup_id" value="b" />
      Option B
    </label>
  </div>
</gui-radiogroup>