← Back to documentation

Radio group

A radio group where only one radio button can be enabled at a time.

Information

Plan: Personal

Properties

PropertyTypeDefault
Label
string
""
Name
string
""
Value
string
""
Required
boolean
false
Disabled
boolean
false
Options
{
  "items": {
    "props": {
      "disabled": {
        "type": "boolean"
      },
      "label": {
        "type": "string"
      },
      "value": {
        "type": "string"
      }
    },
    "type": "object"
  },
  "type": "array"
}
[
  {
    "disabled": false,
    "label": "Lorem ipsum",
    "value": "Lorem ipsum"
  },
  {
    "disabled": false,
    "label": "Phasellus ultrices",
    "value": "Phasellus ultrices"
  },
  {
    "disabled": false,
    "label": "Ut posuere",
    "value": "Ut posuere"
  }
]
Orientation
enum<string>
"vertical"
Color - Label
string
"var(--pc-semantic-text-primary)"
Color - Label - Required
string
"var(--pc-foundation-color-danger-600)"
Background color - Option
string
"var(--pc-semantic-surface-base)"
Border color - Option
string
"var(--pc-foundation-color-gray-300)"
Color - Option
string
"var(--pc-semantic-text-primary)"
Background color - Option - Checked
string
"var(--pc-foundation-color-primary-50)"
Border color - Option - Checked
string
"var(--pc-semantic-interactive-primary)"
Background color - Option - Icon
string
"var(--pc-semantic-surface-base)"
Border color - Option - Icon
string
"var(--pc-foundation-color-gray-400)"
Background color - Option - Icon - Circle
string
"var(--pc-semantic-interactive-primary)"
Border color - Option - Icon - Checked
string
"var(--pc-semantic-interactive-primary)"
Selectors
array
[]