Checkbox

Choix booléens pour les formulaires et les paramètres de produitsLien vers la section

Les Case à cocher Le composant permet aux utilisateurs de sélectionner une ou plusieurs options dans une liste, de confirmer un paramètre ou d’opter pour une condition spécifique.

Utilisez-le pour:

• paramètres basculent qui peuvent être sélectionnés indépendamment
• filtres à sélection multiple
• termes, consentement et champs de confirmation
• préférences groupées
• flux de produits de type checklist
• choix de forme facultatifs

Checkbox est construit sur Boîte à cocher Radix et stylisé avec des tokens sémantiques PyColors tels que border-input, bg-background, text-foregroundet ring-ring.

ImportationLien vers la section

import { Checkbox } from "@pycolors/ui";

Utilisation de baseLien vers la section

Utilisez une case à cocher avec une étiquette lorsque l'utilisateur doit activer ou sélectionner une option.

Quand utiliser la case à cocherLien vers la section

Utilisez la case à cocher lorsque les options sont indépendantes et que l'utilisateur peut sélectionner plusieurs choix.

État vérifiéLien vers la section

Utilisation defaultChecked pour les cases à cocher non contrôlées et checked avec onCheckedChange État contrôlé du produit.

Case à cocher contrôléeLien vers la section

Utilisez une case à cocher contrôlée lorsque la valeur cochée entraîne l'état de l'application.

État indéterminéLien vers la section

Utilisez l'état indéterminé pour les cases à cocher parent lorsque seuls certains éléments enfants sont sélectionnés.

Utilisation checked="indeterminate" lorsque votre application est la propriété de l'État, ou defaultChecked="indeterminate" pour une sélection partielle initiale non contrôlée. Appuyez sur Espace pour sélectionner une case à cocher partielle non contrôlée. À l'intérieur d'un formulaire, un bouton de réinitialisation natif restaure son état initial, y compris le tiret de sélection partielle.

import { Button, Checkbox, CheckboxField, CheckboxLabel } from "@pycolors/ui";

export function PartialSelection() {
  return (
    <form>
      <CheckboxField>
        <Checkbox
          id="project-selection"
          name="projects"
          value="all"
          defaultChecked="indeterminate"
        />
        <CheckboxLabel htmlFor="project-selection">
          Select projects
        </CheckboxLabel>
      </CheckboxField>
      <Button type="reset" variant="outline">
        Reset selection
      </Button>
    </form>
  );
}

État handicapéLien vers la section

Utilisez les cases à cocher désactivées uniquement lorsque l'option ne peut pas être modifiée pour le moment.

Validation du formulaireLien vers la section

Utilisez le error prop lorsqu'une case à cocher requise n'est pas sélectionnée. Il rend visible la copie d'erreur, définit aria-invalid, et relie le message aux deux aria-describedby et aria-errormessage. L'erreur a role="alert"Il est donc annoncé lorsqu'il apparaît. Fourni par les consommateurs aria-describedby Les valeurs sont conservées à côté de l'identifiant du message d'erreur.

UtilisationsLien vers la section

Checkbox vs Switch vs Radio GroupLien vers la section

APILien vers la section

Composants

Cocher les props

Checkbox étend Radix Checkbox Root props.

TypeScript typesLien vers la section

export interface CheckboxProps extends React.ComponentPropsWithoutRef<
  typeof CheckboxPrimitive.Root
> {
  error?: string;
}

const Checkbox = React.forwardRef<
  React.ComponentRef<typeof CheckboxPrimitive.Root>,
  CheckboxProps
>((props, ref) => {
  // ...
});

AccessibilitéLien vers la section

Checkbox est construit sur les primitives Radix Checkbox.

Cela signifie :

• L'interaction du clavier est gérée
• Les états vérifiés et indéterminés sont exposés aux technologies d'assistance.
• L'état désactivé est exposé correctement
• focus style utilise PyColors ring tokens
• L'utilisation des formulaires fonctionne grâce à la sémantique des formulaires natifs
• error rend visible la copie d'erreur et les fils aria-invalid, aria-describedbyet aria-errormessage

Directives :

• fournir une étiquette visible pour chaque case à cocher
• connecter des étiquettes en utilisant htmlFor et id
• utiliser des descriptions pour des choix ayant des conséquences
• Ne comptez pas uniquement sur la couleur pour les états de validation
• utiliser le error prop pour les confirmations requises non valides
• Gardez les étiquettes courtes et orientées vers l'action

Préférez/évitezLien vers la section

Directives de copie du produitLien vers la section

La copie de case à cocher doit décrire le résultat sélectionné, pas le contrôle de l'interface utilisateur.

Questions courantesLien vers la section

RelatedLien vers la section