---
title: Radio
image: /images/user-guide/create-workspace/workspace-cover.png
---

<Frame>
  <img src="/images/user-guide/create-workspace/workspace-cover.png" alt="Header" />
</Frame>

Utilisé lorsque les utilisateurs peuvent choisir une seule option parmi une série d'options.

<Tabs>
<Tab title="Usage">

```jsx
import { Radio } from "twenty-ui/display";

export const MyComponent = () => {

  const handleRadioChange = (event) => {
    console.log("Radio button changed:", event.target.checked);
  };

  const handleCheckedChange = (checked) => {
    console.log("Checked state changed:", checked);
  };


  return (
    <Radio
      checked={true}
      value="Option 1"
      onChange={handleRadioChange}
      onCheckedChange={handleCheckedChange}
      size="large"
      disabled={false}
      labelPosition="right"
    />
  );
};

```

</Tab>
<Tab title="Props">

| Propriétés      | Type                   | Description                                                                                                                   |
| --------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| style           | propriétés `React.CSS` | Styles inline supplémentaires pour le composant                                                                               |
| nomDeClasse     | chaîne                 | Classe CSS facultative pour le style supplémentaire                                                                           |
| coché           | booléen                | Indique si le bouton radio est coché                                                                                          |
| valeur          | chaîne                 | L'étiquette ou le texte associé au bouton radio                                                                               |
| onChange        | fonction               | La fonction appelée lorsque le bouton radio sélectionné est modifié                                                           |
| onCheckedChange | fonction               | La fonction appelée lorsque l'état `checked` du bouton radio change                                                           |
| taille          | chaîne                 | La taille du bouton radio. Les options incluent : `large` et `small`                          |
| désactivé       | booléen                | Si `true`, le bouton radio est désactivé et ne peut pas être cliqué                                                           |
| positionLabel   | chaîne                 | La position du texte du label par rapport au bouton radio. A deux options : `left` et `right` |

</Tab>
</Tabs>

## Groupe Radio

Regroupe ensemble des boutons radio associés.

<Tabs>
<Tab title="Usage">

```jsx
import React, { useState } from "react";
import { Radio, RadioGroup } from "twenty-ui/display";

export const MyComponent = () => {

  const [selectedValue, setSelectedValue] = useState("Option 1");

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };
  
  return (
    <RadioGroup value={selectedValue} onChange={handleChange}>
      <Radio value="Option 1" />
      <Radio value="Option 2" />
      <Radio value="Option 3" />
    </RadioGroup>
  );
};

```

</Tab>
<Tab title="Props">

| Propriétés    | Type              | Description                                                                                                  |
| ------------- | ----------------- | ------------------------------------------------------------------------------------------------------------ |
| valeur        | chaîne            | La valeur du bouton radio actuellement sélectionné                                                           |
| onChange      | fonction          | La fonction de rappel déclenchée lorsque le bouton radio est changé                                          |
| onValueChange | fonction          | La fonction de rappel déclenchée lorsque la valeur sélectionnée dans le groupe change.       |
| enfants       | `React.ReactNode` | Permet de passer des composants React (tels que Radio) en tant qu'enfants au Groupe Radio |

</Tab>

</Tabs>