npm package: @forter/radio-button
Description: Radio Button and Group from Forter Components
Author: Forter Developers
Latest version: 3.0.24

# fc-radio-button

⚠️⚠️ This component is deprecated and might be unstable. please use [fc-radio](https://www.npmjs.com/package/@forter/radio). ⚠️⚠️

## Properties

| Property   | Attribute  | Type      | Default | Description                     |
|------------|------------|-----------|---------|---------------------------------|
| `checked`  | `checked`  | `boolean` | false   | If the element is disabled      |
| `disabled` | `disabled` | `boolean` | false   | Whether the element is disabled |
| `inputId`  |            | `string`  |         |                                 |
| `label`    | `label`    | `string`  | ""      | The element's label             |
| `labelId`  |            | `string`  |         |                                 |
| `name`     | `name`     | `string`  | ""      | The input's name                |
| `value`    | `value`    | `string`  | ""      | The input's value               |

## Events

| Event           |
|-----------------|
| `item-selected` |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `input` | internally used to render light children. Do not use. |
| `label` | internally used to render light children. Do not use. |

## CSS Custom Properties

| Property                           | Description                    |
|------------------------------------|--------------------------------|
| `--fc-radio-border-color`          | default: `var(--gray-8)`       |
| `--fc-radio-checked-color`         | default: `var(--ftr-cyan)`     |
| `--fc-radio-disabled-border-color` | default: `rgba(0, 0, 0, 0.25)` |
| `--fc-radio-disabled-text-color`   | default: `var(--gray-3)`       |
| `--fc-radio-hover-color`           | default: `var(--gray-0)`       |
| `--fc-radio-text-color`            | default: `black`               |


# fc-radio-button-group

##Usage
### Default
```html
<fc-radio-group>
     <fc-radio-button label="Pizza" value="pizza"></fc-radio-button>
     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
</fc-radio-group>
```

### Preselected
```html
<fc-radio-group>
     <fc-radio-button checked label="Pizza" value="pizza"></fc-radio-button>
     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
</fc-radio-group>
```

### Disabled
```html
<fc-radio-group>
     <fc-radio-button disabled label="Pizza" value="pizza"></fc-radio-button>
     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
</fc-radio-group>
```

### Disable All
```html
<fc-radio-group disabled>
     <fc-radio-button label="Pizza" value="pizza"></fc-radio-button>
     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
</fc-radio-group>
```

## Properties

| Property               | Attribute | Type     | Default   | Description                 |
|------------------------|-----------|----------|-----------|-----------------------------|
| `attributeForSelected` |           | `string` | "checked" |                             |
| `legend`               | `legend`  | `string` | ""        | The legend for the fieldset |

## Slots

| Name | Description                                  |
|------|----------------------------------------------|
|      | internally used for light input. Do not use. |

## CSS Custom Properties

| Property                        | Description               |
|---------------------------------|---------------------------|
| `--fc-radio-group-legend-color` | default: `var(--ftr-red)` |