CheckboxGroup

Un groupe de boutons <Checkbox>. Les boutons <Checkbox> peuvent être des enfants directs ou des descendants du groupe de cases à cocher.

Remarque: le paramètre value remplacera defaultValue car il place le groupe de cases à cocher dans un état contrôlé. value ne remplacera pas les cases à cocher qui ont checked défini, car CheckboxGroup prendra le contrôle des composants Checkbox non contrôlés et ne pourra pas remplacer ceux contrôlés. value remplacera cependant defaultChecked sur Checkbox.

Le gestionnaire d'événements onChange pour CheckboxGroup se déclenchera après tout gestionnaire d'événements onChange défini sur des composants Checkbox individuels. Cependant, il est fortement recommandé de ne définir qu'un seul gestionnaire d'événements pour l'ensemble du groupe dans un CheckboxGroup contrôlé.

Checkbox les composants doivent avoir un value défini sur eux afin d'être contrôlés par CheckboxGroup.

Usage

import { CheckboxGroup } from 'nr1';

Exemples

Basique

<CheckboxGroup label="My checkbox group">
  <Checkbox label="Checkbox 1" />
  <Checkbox label="Checkbox 2" />
  <Checkbox label="Checkbox 3" />
</CheckboxGroup>;

Avec étiquette et informations

<CheckboxGroup label="My checkbox group" info="Info value">
  <Checkbox label="Checkbox 1" />
  <Checkbox label="Checkbox 2" />
  <Checkbox label="Checkbox 3" />
</CheckboxGroup>;

Avec étiquette en ligne

<CheckboxGroup label="My checkbox group" labelInline>
  <Checkbox label="Checkbox 1" />
  <Checkbox label="Checkbox 2" />
  <Checkbox label="Checkbox 3" />
</CheckboxGroup>;

Avec description

<CheckboxGroup label="My checkbox group" description="Description value">
  <Checkbox label="Checkbox 1" />
  <Checkbox label="Checkbox 2" />
  <Checkbox label="Checkbox 3" />
</CheckboxGroup>;

Avec un message invalide

<CheckboxGroup label="My checkbox group" invalid="Invalid message value">
  <Checkbox label="Checkbox 1" />
  <Checkbox label="Checkbox 2" />
  <Checkbox label="Checkbox 3" />
</CheckboxGroup>;

Avec les valeurs par défaut

<CheckboxGroup label="My checkbox group" defaultValue={['1', '2']}>
  <Checkbox label="Checkbox 1" value="1" />
  <Checkbox label="Checkbox 2" value="2" />
  <Checkbox label="Checkbox 3" value="3" />
</CheckboxGroup>;

Composant contrôlé

class MyNerdlet extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      values: ['2'],
    };

    this.onChange = this.onChange.bind(this);
  }

  onChange(event, values) {
    this.setState({ values });
  }

  render() {
    return (
      <CheckboxGroup value={this.state.values} onChange={this.onChange}>
        <Checkbox label="Checkbox 1" value="1" />
        <Checkbox label="Checkbox 2" value="2" />
        <Checkbox label="Checkbox 3" value="3" />
      </CheckboxGroup>
    );
  }
}

Accessoires

`children` nœud	Contenu du CheckboxGroup.
`className` chaîne	Ajoute les noms de classe au composant.
`defaultValue` string[]	Valeurs par défaut du groupe de cases à cocher. Les composants `<Checkbox>` avec des valeurs correspondantes seront sélectionnés. Utile lorsque vous ne souhaitez pas utiliser un composant contrôlé.
`description` chaîne	Message avec des instructions sur la façon de remplir le champ du formulaire.
`info` chaîne	Des informations supplémentaires peuvent être affichées dans une info-bulle à côté de l'étiquette.
`invalid` booléen\|chaîne	Lorsque cette option est vraie, elle définit le champ dans un état non valide, afin d'avertir l'utilisateur qu'une attention particulière est nécessaire sur ce champ particulier. Cette propriété peut être un champ `boolean` ou un `string`. Lorsqu'il s'agit d'un `string`, ainsi que de l'état invalide affiché, le texte sera affiché ci-dessous.
`label` chaîne	Texte à afficher comme étiquette.
`labelInline` booléen	Affichez l'étiquette en ligne dans le contrôle de formulaire. À utiliser uniquement lorsque le composant n'est pas à l'intérieur d'un `Form`. Dans ce cas, définissez `layoutType` sur `Form.LAYOUT_TYPE.SPLIT` dans le composant `Form`.
`onChange` fonction	Rappel qui est déclenché lorsque la valeur du groupe de cases à cocher change (un `<Checkbox>` dans le groupe est sélectionné). `function (event: React.ChangeEvent, Event source of the callback. value: string[] The values of the selected checkboxes. )`
`required` booléen	Si `true`, indique que le champ de formulaire est obligatoire.
`style` objet	Style en ligne pour un style personnalisé.
`testId` chaîne	Ajoute un attribut `data-test-id`. Utilisez-le pour cibler le composant dans les tests unitaires et E2E. Pour qu'un identifiant de test soit valide, préfixez-le avec votre identifiant nerdpack, suivi d'un point. Par exemple, `my-nerdpack.some-element`.Remarque : vous ne verrez peut-être pas l'attribut `data-test-id` car ils sont supprimés du DOM. Pour les déboguer, transmettez un paramètre de requête `e2e-test` à l'URL.
`value` string[]	Valeurs du groupe de cases à cocher. Les composants `<Checkbox>` avec des valeurs correspondantes seront sélectionnés. S'ils sont définis, ils transforment le composant en composant contrôlé.

Cette traduction automatique est fournie pour votre commodité.

Usage

Exemples

Basique

Avec étiquette et informations

Avec étiquette en ligne

Avec description

Avec un message invalide

Avec les valeurs par défaut

Composant contrôlé

Accessoires

nœud

chaîne

string[]

chaîne

chaîne

booléen|chaîne

chaîne

booléen

fonction

booléen

objet

chaîne

string[]

Cette traduction automatique est fournie pour votre commodité.

CheckboxGroup

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Exemples

Basique

Avec étiquette et informations

Avec étiquette en ligne

Avec description

Avec un message invalide

Avec les valeurs par défaut

Composant contrôlé

Accessoires

nœud

chaîne

string[]

chaîne

chaîne

booléen|chaîne

chaîne

booléen

fonction

booléen

objet

chaîne

string[]

Usage