> ## 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](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/toggle-group.md) component instead.

![ui-extensions-component-radio-buttons](https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/ui-extensions-component-radio-buttons.png)

```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`. |
| `size` | `'sm'`, `'small'` \| `'md'`, `'medium'` (default) | The size of the radio button. Abbreviated and full-name values are equivalent. |

## Related components

* [Checkbox](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/checkbox.md)
* [ToggleGroup](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/toggle-group.md)
* [TextArea](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/text-area.md)