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

# fc-radio

An radio control which is mostly used in forms.
<!-- Author: Harel Gendler <arelg@forter.com> -->

[![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/controls-radio--default-properties) [![](https://badgen.net/badge/build/pass/green)](https://github.com/forter/web-components/actions?query=workflow%3ACD) [![](https://badgen.net/badge/vulnerabilities/0/green)](https://snyk.io/vuln/npm:%40forter%2Fradio) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/radio/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/radio) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/radio/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/radio) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/radio/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/radio)

## Usage

```html
<script>
  import '@forter/radio';
</script>

<fc-radio value="radio"> Radio </fc-radio>
```

## Examples

```html
<!-- textContent -->
<fc-radio value="bar">
   Bar
</fc-radio>
```

## Properties

| Property    | Attribute   | Type                                             | Default | Description                                      |
|-------------|-------------|--------------------------------------------------|---------|--------------------------------------------------|
| `animation` | `animation` | `"default" \| "playful"`                         |         | Animation type                                   |
| `checked`   | `checked`   | `boolean`                                        | false   | If the element is checked                        |
| `disabled`  | `disabled`  | `boolean`                                        | false   | If the element is disabled                       |
| `intent`    | `intent`    | `"primary" \| "secondary" \| "success" \| "danger" \| "warn"` |         | The radio's intent. See Intents in README.       |
| `name`      | `name`      | `string`                                         | "radio" | The name of all the radio buttons in the same radio group |
| `value`     | `value`     | `string`                                         |         | The unique ID of the current radio button        |

## Events

| Event    | Description                                      |
|----------|--------------------------------------------------|
| `change` | when changing checked value. method: `change`, example: `{ "target": { "checked": true } }` |

## Slots

| Name | Description                     |
|------|---------------------------------|
|      | textContent for the radio label |

## CSS Custom Properties

| Property                   |
|----------------------------|
| `--fc-radio-checked-color` |
| `--fc-radio-font`          |
| `--fc-radio-hover-color`   |
| `--fc-radio-line-height`   |
| `--fc-radio-padding`       |


# fc-radio-group

An radio group control which is mostly used in forms.
<!-- Author: Harel Gendler <arelg@forter.com> -->

[![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/controls-radio--default-properties) [![](https://badgen.net/badge/build/pass/green)](https://github.com/forter/web-components/actions?query=workflow%3ACD) [![](https://badgen.net/badge/vulnerabilities/0/green)](https://snyk.io/vuln/npm:%40forter%2Fradio) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/radio/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/radio) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/radio/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/radio) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/radio/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/radio)

## Usage

```html
<script>
  import '@forter/radio';
</script>

<fc-radio-group name="foods">
   <fc-radio value="pizza">Pizza</fc-radio>
   <fc-radio checked value="hamburger">Hamburger</fc-radio>
   <fc-radio disabled value="kalles kaviar">Kalles Kaviar</fc-radio>
   <fc-radio value="salad">Salad</fc-radio>
   <fc-radio value="milkshake">Milkshake</fc-radio>
   <fc-radio disabled value="ice cream">Ice Cream</fc-radio>
   <fc-radio value="brownies">Brownies</fc-radio>
</fc-radio-group>
```

  ## Examples

```html
<!-- playful -->
<fc-radio-group name="foods">
   <fc-radio value="pizza" animation="playful">Pizza</fc-radio>
   <fc-radio checked value="hamburger" animation="playful">Hamburger</fc-radio>
   <fc-radio disabled value="kalles kaviar" animation="playful">Kalles Kaviar</fc-radio>
   <fc-radio value="salad" animation="playful">Salad</fc-radio>
   <fc-radio value="milkshake" animation="playful">Milkshake</fc-radio>
   <fc-radio disabled value="ice cream" animation="playful">Ice Cream</fc-radio>
   <fc-radio value="brownies" animation="playful">Brownies</fc-radio>
</fc-radio-group>
```

## Properties

| Property   | Attribute  | Type      | Default | Description                                      |
|------------|------------|-----------|---------|--------------------------------------------------|
| `checked`  | `checked`  | `string`  |         | If the element is checked                        |
| `disabled` | `disabled` | `boolean` | false   | If the element is disabled                       |
| `name`     | `name`     | `string`  | "radio" | The name of all the radio buttons in the same radio group |

## Events

| Event    | Description                                      |
|----------|--------------------------------------------------|
| `change` | event whenever any change is happening with the radio buttons |
| `select` | event whenever a specific radio button selected  |