> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-in-group-react-v6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Radio Button

> Radio Button — CometChat documentation.

## Overview

This element allows the user to exactly select one item from a set.

## Properties

| Name             | Type                                                              | Description                                     |
| ---------------- | ----------------------------------------------------------------- | ----------------------------------------------- |
| name             | string                                                            | Name of the element                             |
| labelText        | string                                                            | Caption text of the element                     |
| checked          | boolean                                                           | When set to true, element is checked by default |
| disabled         | boolean                                                           | When set to true, disables the element          |
| radioButtonStyle | [RadioButtonStyle](/ui-kit/angular/radio-button#radiobuttonstyle) | Styling properties and values of the element    |

## RadioButtonStyle

Styling properties and values of the element

| Name           | Description                                                                                                                                                                          |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| width          | Sets the width of the element                                                                                                                                                        |
| height         | Sets the height of the element                                                                                                                                                       |
| border         | Sets the border of the element                                                                                                                                                       |
| borderRadius   | Sets the border radius of the element                                                                                                                                                |
| background     | Sets all background style properties at once, such as color, image, origin and size, or repeat method. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| labelTextFont  | Sets all the different properties of font for the caption text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                              |
| labelTextColor | Sets the foreground color of caption text.                                                                                                                                           |

## Events

Events triggered by the element

| Name                    | Description                                         |
| ----------------------- | --------------------------------------------------- |
| cc-radio-button-changed | Triggered when user updates or modifies the element |

## Usage

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <fieldset>
      <legend>Select color:</legend>
      <cometchat-radio-button 
    	[name]="'color'"
      [labelText]="'Green'"
      (cc-radio-button-changed)="changeHandler($event)" /><br><br>
      <cometchat-radio-button 
    	[name]="'color'"
      [labelText]="'Purple'"
      :checked="true"
      (cc-radio-button-changed)="changeHandler($event)" /><br><br>
      <cometchat-radio-button 
    	[name]="'color'"
      [labelText]="'Brown'"
      :checked="true"
      (cc-radio-button-changed)="changeHandler($event)" /><br><br>
      <cometchat-radio-button 
    	[name]="'color'"
      [labelText]="'White'"
      :checked="true"
      (cc-radio-button-changed)="changeHandler($event)" /><br><br>
    </fieldset>
    ```
  </Tab>

  <Tab title="JavaScript">
    ```js theme={null}
    import '@cometchat/uikit-elements';//import the web component package.
    import {RadioButtonStyle} from '@cometchat/uikit-elements'

    changeHandler = (event: any) => {
      console.log(event.detail.url);
    }
    ```
  </Tab>
</Tabs>