CSS: checkbox

.instui-checkbox — Une case à cocher native et son étiquette, ou un interrupteur via -variant-toggle.

Définir el.indeterminate = true en JavaScript pour afficher le trait d'état mixte; la coche vérifiée contraste automatiquement avec le remplissage — blanc sur un remplissage foncé, presque noir sur un remplissage clair. Définit aussi son propre gap entre le contrôle et son étiquette; chaîner un modificateur d'espacement -gap-* remplace cette valeur intégrée.

Source: checkbox.css

Accessibilité

Une <input type="checkbox"> native pilote :checked, :indeterminate et :disabled; définir el.indeterminate = true en JavaScript pour l'état mixte, et noter que -readonly est uniquement du style puisque les cases à cocher n'ont pas d'attribut readonly natif.

Utilisation

@import "@pantoken/components/components.css";
@import "@pantoken/components/checkbox.css";

Exemples

<label class="instui-checkbox --display-block --mb-sm">
  <input type="checkbox" checked>Checkbox
</label>
<label class="instui-checkbox -variant-toggle">
  <input type="checkbox">Toggle
</label>

Modificateurs

Modificateur	Description
.-invalid	État invalide (erreur).
.-label-placement-end	Placer l'étiquette après le contrôle.
.-label-placement-start	Placer l'étiquette avant le contrôle.
.-label-placement-top	Placer l'étiquette au-dessus du contrôle.
.-readonly	État en lecture seule.
.-required	Afficher l'astérisque des champs obligatoires à côté de l'étiquette.
.-size-large	Large. Alias long de -size-lg.
.-size-lg	Grand.
.-size-sm	Petit.
.-size-small	Petit. Alias long de -size-sm.
.-variant-toggle	Rendre comme un interrupteur au lieu d'une case.

Parties

Partie	Description
.asterisk	L'astérisque des champs obligatoires.

Pseudo-éléments

Pseudo-élément	Description
::after	Sur -variant-toggle, le glyphe d'état sur la poignée : un X quand éteint, une coche quand activé.
::before	Le glyphe masqué de la coche ou du trait centré dans la case; sur -variant-toggle il devient plutôt la poignée coulissante.

États

État	Description
:checked	—
:disabled	—
:indeterminate	—

Propriétés personnalisées

Propriété	Type	Par défaut	Description
--pantoken-cb-glyph	<url>	—	Le glyphe de masque de la case : une coche quand coché, un trait quand indéterminé.
--pantoken-toggle-bw	<length>	—	L'épaisseur de la bordure de l'interrupteur.
--pantoken-toggle-h	<length>	—	La hauteur de l'interrupteur bascule.
--pantoken-toggle-handle	<length>	—	Le diamètre calculé de la poignée.
--pantoken-toggle-inset	<length>	—	L'encoche de la poignée depuis chaque bord de la piste.
--pantoken-toggle-w	<length>	—	La largeur de la piste de l'interrupteur.

Tokens consommés

Token	Type	Valeur
--instui-border-width-sm	<length>	0.0625rem
--instui-color-background-muted	<color>	LightDarklight-dark(#F2F4F5, #273540)
--instui-color-stroke-base	<color>	LightDarklight-dark(#8D959F, #6A7883)
--instui-color-text-muted	<color>	LightDarklight-dark(#576773, #AAB0B5)
--instui-component-checkbox-asterisk-color	<color>	LightDarklight-dark(#CF1F24, #FA917F)
--instui-component-checkbox-background-checked-color	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-component-checkbox-background-color	<color>	LightDarklight-dark(#ffffff, #171B21)
--instui-component-checkbox-background-disabled-color	<color>	LightDarklight-dark(#E8EAEC, #334450)
--instui-component-checkbox-background-hover-color	<color>	LightDarklight-dark(#ffffff, #171B21)
--instui-component-checkbox-background-readonly-color	<color>	LightDarklight-dark(#C7CACD, #6A7883)
--instui-component-checkbox-border-checked-color	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-component-checkbox-border-color	<color>	LightDarklight-dark(#7E8792, #5F6E7A)
--instui-component-checkbox-border-disabled-color	<color>	LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-checkbox-border-hover-color	<color>	LightDarklight-dark(#334450, #7E8792)
--instui-component-checkbox-border-radius	<length>	0.25rem
--instui-component-checkbox-border-readonly-color	<color>	#8D959F
--instui-component-checkbox-border-width	<length>	0.0625rem
--instui-component-checkbox-control-size-lg	<length>	1.5rem
--instui-component-checkbox-control-size-md	<length>	1.5rem
--instui-component-checkbox-control-size-sm	<length>	1.5rem
--instui-component-checkbox-control-vertical-margin	<length>	0rem
--instui-component-checkbox-error-border-color	<color>	LightDarklight-dark(#CF1F24, #F56050)
--instui-component-checkbox-error-border-hover-color	<color>	LightDarklight-dark(#CF1F24, #FE7D6A)
--instui-component-checkbox-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-checkbox-font-size-lg	<length>	1.25rem
--instui-component-checkbox-font-size-md	<length>	1rem
--instui-component-checkbox-font-size-sm	<length>	0.875rem
--instui-component-checkbox-font-weight	<integer>	400
--instui-component-checkbox-gap	<length>	0.5rem
--instui-component-checkbox-label-base-color	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-component-checkbox-label-disabled-color	<color>	LightDarklight-dark(#8D959F, #576773)
--instui-component-checkbox-label-hover-color	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-component-checkbox-label-readonly-color	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-component-checkbox-line-height	<percentage>	125%
--instui-component-radio-input-toggle-background-success	<color>	#03893D
--instui-component-radio-input-toggle-handle-text	<color>	#ffffff
--instui-component-radio-input-toggle-medium-height	<length>	2.5rem
--instui-icon-check	<image>	url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-minus	<image>	url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-x	<image>	url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E')
--instui-size-choice-control-height-md	<length>	1.5rem

Connexe

• radio — The single-select counterpart.