twenty/packages/twenty-docs/l/fr/twenty-ui/input/radio.mdx

---
title: Radio
---

<Frame>
  <img src="/images/user-guide/create-workspace/workspace-cover.png" alt="En-tête" />
</Frame>

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

<Tabs>
  <Tab title="Utilisation">
    ```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="Propriétés">
    | 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 n'est pas cliquable.                              |
    | 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="Utilisation">
    ```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="Propriétés">
    | 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>