Pyro

Appearance

Checkbox ​

RC 1.4Kb
js
import 'pyro/checkbox'
Preview Code Stackblitz

Usage ​

html
<pyro-checkbox checked></pyro-checkbox>

Variations ​

Props ​

ts
interface CheckboxProps {
  /** Checked */
  checked?: boolean;
  /** Disabled */
  disabled?: boolean;
  onInput?: (e: TargetValueEvent) => void;
  children?: any;
}

Slots ​

ts
/**
 * @slot icon - icon for customized checkmark
 */

CSS prop theming ​

The

Full theming sheet ​

js
/**
 * @prop {--pyro-checkbox-text-color = --pyro-text-color} - checkmark `color`
 * @prop {--pyro-checkbox-surface-color = --pyro-surface-color} - `background`
 * @prop {--pyro-checkbox-accent-color = --pyro-accent-color} - checked `background`;
 * @prop {--pyro-checkbox-border = --pyro-border} - `border`
 * @prop {--pyro-checkbox-border-radius = --pyro-border-radius} - `border`
 * @prop {--pyro-checkbox-height = 1em} - `height`
 * @prop {--pyro-checkbox-width = 1em} - `width`
 * @prop {--pyro-checkbox-disabled-color = --pyro-disabled-color} - disabled `background`
 */