## Radio

Boutons de sélection entre plusieurs options.

### Usage

Radio ne devrait pas avoir trop d'options. Dans ce cas utilisez plutôt Select.

:::demo Créer un composant Radio est facile, vous avez juste besoin de lier les `v-model` des options. Chacun équivaut à la valeur de `label` du radio correspondant. Le type de `label` est `String`, `Number` ou `Boolean`.

```html
<template>
  <div>
    <el-radio v-model="radio1" label="1">Option 1</el-radio>
    <el-radio v-model="radio1" label="2">Option 2</el-radio>
  </div>
  <div>
    <el-radio v-model="radio2" label="1" size="medium">Option 1</el-radio>
    <el-radio v-model="radio2" label="2" size="medium">Option 2</el-radio>
  </div>
  <div>
    <el-radio v-model="radio3" label="1" size="small">Option 1</el-radio>
    <el-radio v-model="radio3" label="2" size="small">Option 2</el-radio>
  </div>
  <div>
    <el-radio v-model="radio4" label="1" size="mini">Option 1</el-radio>
    <el-radio v-model="radio4" label="2" size="mini">Option 2</el-radio>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        radio1: '1',
        radio2: '1',
        radio3: '1',
        radio4: '1',
      }
    },
  }
</script>
<!--
<setup>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        radio1: ref('1'),
        radio2: ref('1'),
        radio3: ref('1'),
        radio4: ref('1'),
      }
    }
  })
</setup>
-->
```

:::

### Désactivé

L'attribut `disabled` désactive le radio.

:::demo Ajoutez simplement l'attribut `disabled` au radio.

```html
<template>
  <el-radio disabled v-model="radio" label="disabled">Option A</el-radio>
  <el-radio disabled v-model="radio" label="selected and disabled"
    >Option B</el-radio
  >
</template>

<script>
  export default {
    data() {
      return {
        radio: 'selected and disabled',
      }
    },
  }
</script>
<!--
<setup>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        radio: ref('selected and disabled'),
      }
    }
  })
</setup>
-->
```

:::

### Groupe de boutons radio

Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives.

:::demo Combinez `el-radio-group` avec `el-radio` pour afficher un groupe de radios. Liez une variable au `v-model` de `el-radio-group` et configurez le label dans `el-radio`. Cet élément fournit aussi l'évènement `change` qui a en paramètre la valeur courante.

```html
<el-radio-group v-model="radio">
  <el-radio :label="3">Option A</el-radio>
  <el-radio :label="6">Option B</el-radio>
  <el-radio :label="9">Option C</el-radio>
</el-radio-group>

<script>
  export default {
    data() {
      return {
        radio: 3,
      }
    },
  }
</script>
<!--
<setup>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        radio: ref(3),
      }
    }
  })
</setup>
-->
```

:::

### Style bouton

Des radios affichés comme des boutons standards.

:::demo Changez simplement `el-radio` pour `el-radio-button`. L'attribut `size` permet de régler la taille.

```html
<template>
  <div>
    <el-radio-group v-model="radio1">
      <el-radio-button label="New York"></el-radio-button>
      <el-radio-button label="Washington"></el-radio-button>
      <el-radio-button label="Los Angeles"></el-radio-button>
      <el-radio-button label="Chicago"></el-radio-button>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio2" size="medium">
      <el-radio-button label="New York"></el-radio-button>
      <el-radio-button label="Washington"></el-radio-button>
      <el-radio-button label="Los Angeles"></el-radio-button>
      <el-radio-button label="Chicago"></el-radio-button>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio3" size="small">
      <el-radio-button label="New York"></el-radio-button>
      <el-radio-button label="Washington" disabled></el-radio-button>
      <el-radio-button label="Los Angeles"></el-radio-button>
      <el-radio-button label="Chicago"></el-radio-button>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio4" disabled size="mini">
      <el-radio-button label="New York"></el-radio-button>
      <el-radio-button label="Washington"></el-radio-button>
      <el-radio-button label="Los Angeles"></el-radio-button>
      <el-radio-button label="Chicago"></el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        radio1: 'New York',
        radio2: 'New York',
        radio3: 'New York',
        radio4: 'New York',
      }
    },
  }
</script>
<!--
<setup>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        radio1: ref('New York'),
        radio2: ref('New York'),
        radio3: ref('New York'),
        radio4: ref('New York'),
      }
    }
  })
</setup>
-->
```

:::

### Avec bordures

:::demo L'attribut `border` ajoute une bordure aux radios.

```html
<template>
  <div>
    <el-radio v-model="radio1" label="1" border>Option A</el-radio>
    <el-radio v-model="radio1" label="2" border>Option B</el-radio>
  </div>
  <div style="margin-top: 20px">
    <el-radio v-model="radio2" label="1" border size="medium"
      >Option A</el-radio
    >
    <el-radio v-model="radio2" label="2" border size="medium"
      >Option B</el-radio
    >
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio3" size="small">
      <el-radio label="1" border>Option A</el-radio>
      <el-radio label="2" border disabled>Option B</el-radio>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio4" size="mini" disabled>
      <el-radio label="1" border>Option A</el-radio>
      <el-radio label="2" border>Option B</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        radio1: '1',
        radio2: '1',
        radio3: '1',
        radio4: '1',
      }
    },
  }
</script>
<!--
<setup>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        radio1: ref('1'),
        radio2: ref('1'),
        radio3: ref('1'),
        radio4: ref('1'),
      }
    }
  })
</setup>
-->
```

:::

### Attributs de Radio

| Attribut              | Description                                        | Type                      | Valeurs acceptées     | Défaut |
| --------------------- | -------------------------------------------------- | ------------------------- | --------------------- | ------ |
| model-value / v-model | La valeur liée.                                    | string / number / boolean | —                     | —      |
| label                 | La valeur du radio.                                | string / number / boolean | —                     | —      |
| disabled              | Si le radio est désactivé.                         | boolean                   | —                     | false  |
| border                | Si une bordure doit être affichée autour du radio. | boolean                   | —                     | false  |
| size                  | Taille du radio                                    | string                    | medium / small / mini | —      |
| name                  | Attribut 'name' natif.                             | string                    | —                     | —      |

### Évènements de Radio

| Nom    | Description                          | Paramètres          |
| ------ | ------------------------------------ | ------------------- |
| change | Se déclenche quand la valeur change. | La valeur du label. |

### Attributs de Radio-group

| Attribut              | Description                                           | Type                      | Valeurs acceptées     | Défaut  |
| --------------------- | ----------------------------------------------------- | ------------------------- | --------------------- | ------- |
| model-value / v-model | La valeur liée.                                       | string / number / boolean | —                     | —       |
| size                  | Taille des radios.                                    | string                    | medium / small / mini | —       |
| disabled              | Si les radios sont désactivés.                        | boolean                   | —                     | false   |
| text-color            | Couleur du texte quand le bouton est actif.           | string                    | —                     | #ffffff |
| fill                  | Bordure et couleur de fond quand le bouton est actif. | string                    | —                     | #409EFF |

### Évènements de Radio-group

| Nom    | Description                          | Paramètres          |
| ------ | ------------------------------------ | ------------------- |
| change | Se déclenche quand la valeur change. | La valeur du label. |

### Attributs Radio-button

| Attribut | Description                | Type            | Valeurs acceptées | Défaut |
| -------- | -------------------------- | --------------- | ----------------- | ------ |
| label    | Valeur du radio.           | string / number | —                 | —      |
| disabled | Si le radio est désactivé. | boolean         | —                 | false  |
| name     | Attribut 'name' natif.     | string          | —                 | —      |