@forter/checkbox NPM

fc-checkbox

An checkbox control which is mostly used in forms.

<script>
  import '@forter/checkbox';
</script>

<fc-checkbox> Checkbox </fc-checkbox>

<!-- textContent -->
<fc-checkbox>
   Bar
</fc-checkbox>

Property	Attribute	Type	Default	Description
`blockevents`	`blockevents`	`boolean`	false	Whether the element is event blocked
`checked`	`checked`	`boolean`	false	Whether the element is checked
`disabled`	`disabled`	`boolean`	false	Whether the element is disabled
`indeterminate`	`indeterminate`	`boolean`	false	Whether the element is indeterminate
`inputId`		`string`
`intent`	`intent`	`"primary" \\| "secondary" \\| "success" \\| "danger" \\| "warn"`		The button's intent. See Intents in README.

Event	Description
`change`	fires once value changed. example: `{ "target": { "checked": true } }`

Name	Description
	textContent for the checkbox label

Property	Description
`--fc-checkbox-border-radius`	border radius. default: 8px. example: `20px`
`--fc-checkbox-check-color`	check color. example: `pink`
`--fc-checkbox-checked-color`	checked color. default: `var(--fc-blue-500)`
`--fc-checkbox-focus-box-shadow`	box shadow on focus. default: inset 0 0 0 2px rgba(0, 0, 0, 0.08). example: `inset 0 0 0 3px rgba(255, 0, 0, 0.08);`
`--fc-checkbox-hover-color`	background colour when hovered. default: `var(--fc-primary-100)`
`--fc-checkbox-label-width`	width of the label. default: auto. example: `100%`
`--fc-checkbox-unchecked-background-color`	unchecked background color. example: `pink`