> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 2fe6b508-cc26-4a34-92a4-e65ebb37cc8c
---

# RadioButton

> Learn about the RadioButton component for use in UI extensions.

The `RadioButton` component renders a radio select button. If you want to include more than two radio buttons, or are building a form, it's recommended to use the [ToggleGroup](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/toggle-group) component instead.

<Frame>
  <img width="300" src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/ui-extensions-component-radio-buttons.png" alt="ui-extensions-component-radio-buttons" />
</Frame>

```jsx theme={null}
import { RadioButton } from "@hubspot/ui-extensions";

function Extension() {
  const [roleType, setRoleType] = useState("support");

  return (
    <>
      <RadioButton
        checked={roleType === "superAdmin"}
        name="roleType"
        description="Select to grant superpowers."
        onChange={() => {
          setRoleType("superAdmin");
        }}
      >
        Super Admin
      </RadioButton>
      <RadioButton
        checked={roleType === "support"}
        name="roleType"
        description="Select to assign a Support role."
        onChange={() => {
          setRoleType("support");
        }}
      >
        Customer Support
      </RadioButton>
    </>
  );
}
```

## Props

| Prop               | Type                                        | Description                                                                                                              |
| ------------------ | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| `checked`          | Boolean                                     | Whether the radio button is currently selected. Default is `false`.                                                      |
| `description`      | String                                      | Text that describes the field's purpose.                                                                                 |
| `initialIsChecked` | Boolean                                     | When set to `true`, the option will be selected by default. Default is `false`.                                          |
| `inline`           | Boolean                                     | When set to `true`, arranges radio buttons side by side. Default is `false`.                                             |
| `name`             | String                                      | The input's unique identifier.                                                                                           |
| `onChange`         | `(checked: boolean, value: string) => void` | A callback function that is invoked when the radio button is selected. Passes the new value.                             |
| `readonly`         | Boolean                                     | When set to `true`, users will not be able to enter a value into the field. Set to `false` by default.                   |
| `value`            | String \| number                            | The radio button value. This value is not displayed, but is passed on the server side when submitted, along with `name`. |
| `variant`          | `'sm'`, `'small'` \| `'default'` (default)  | The size of the checkbox.                                                                                                |

## Related components

* [Checkbox](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/checkbox)
* [ToggleGroup](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/toggle-group)
* [TextArea](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/text-area)