Forms

Checkbox

A checkbox with a built-in label and indeterminate support.

fandry-checkbox

Example

Link to section Example

Custom colors and parts

Link to section Custom colors and parts

The same component with a few --fd-* tokens set around it and its parts restyled. The code is under Parts below.

Props

Link to section Props

Prop	Type	Default	Description
`label`	`string`	`''`	Visible label.
`checked`	`boolean`	`false`	Checked state.
`indeterminate`	`boolean`	`false`	Visual mixed state (synced onto the native input imperatively).
`disabled`	`boolean`	`false`	Disables the checkbox.
`default slot`	`slot`	`the label prop`	Markup in place of the label. Shown even without the label prop.

Parts

Link to section Parts

Style the elements inside the component from your own CSS with ::part(). Every fandry component renders in native shadow DOM, so parts work on LWR and Salesforce alike. For colors, spacing, radius and type across many components, set the --fd-* tokens instead. The code for the "Custom colors and parts" example above:

Part	Description
`base`	The outermost element.
`control`	The box the field draws: a text field's border, a select's button, a checkbox's box, a radio's circle, a switch's track.
`indicator`	The mark that shows the state or value: a checkbox's check, a radio's dot, a switch's thumb, a progress bar's fill.
`label`	The label.

States are extra names on a part while the state is on. Name both to style one state, e.g.fandry-checkbox::part(control checked).

State	Description
`checked`	The box, circle or track of a checked control.
`indeterminate`	A checkbox that is neither checked nor unchecked, or a progress bar with no known value.
`disabled`	A control, option or item that cannot be used.

<!-- template -->
<div class="brand stack">
  <fandry-checkbox label="Gift wrap this order" checked></fandry-checkbox>
  <fandry-checkbox label="Email me about new arrivals"></fandry-checkbox>
</div>

/* css */
/* Scoped to this demo. Set the same --fd-* tokens on :root to theme
   every fandry-* component on the site. */
.brand {
  --fd-primary: 160 84% 26%;
  --fd-ring-color: 160 84% 36%;
  --fd-radius-sm: 0.375rem;
}

fandry-checkbox::part(control) {
  border-color: hsl(160 84% 26%);
}

fandry-checkbox::part(label) {
  font-weight: 600;
}

/* A state: only the checked box. A glow, as a filter: the box draws
   its focus ring with box-shadow. */
fandry-checkbox::part(control checked) {
  filter: drop-shadow(0 0 3px hsl(160 84% 26% / 0.45));
}

Code

Link to section Code

<fandry-checkbox label="Accept terms" onchange={handleChange}></fandry-checkbox>