Checkbox

We're hiring!Are you enthusiastic about software development and business requirements? And would you like to be part of a journey aiming at placing Tryg as the top insurance company in the Nordics?

Ads by Tryg Careers

Installation

Usage

Checked

Disabled

Indeterminate

The isIndeterminate prop sets a Checkbox to an indeterminate state, overriding its appearance and maintaining it until set to false, regardless of user interaction.

Slots

base: Checkbox wrapper, it handles alignment, placement, and general appearance.
wrapper: An inner container that includes styles for relative positioning, flex properties, overflow handling and managing hover and selected states.
icon: Icon within the checkbox, controlling size, visibility, and changes when checked.
label: The text associated with the checkbox.

Accessibility

Built with a native HTML <input> element.
Full support for browser features like form autofill.
Keyboard focus management and cross browser normalization.
Keyboard event support for Tab and Space keys.
Labeling support for assistive technology.
Indeterminate state support.

API

Properties

Property	Attribute	Description	Type	Default
`checked`	`checked`		`boolean`	`false`
`disabled`	`disabled`	Disable the checkbox	`boolean`	`false`
`icon`	`icon`		`string`	`this.indeterminate ? 'minus' : 'check'`
`indeterminate`	`indeterminate`	Whether or not the checkbox is indeterminate. The indeterminate state is purely visual and does not change the checked value of the checkbox.	`boolean`	`false`
`name`	`name`	This is the name for the entire checkbox group	`string`	`undefined`
`uuid`	`uuid`	Give this instance of checkbox a custom ID, or keep the default.	`string`	`uuidv4()`
`value`	`value`	This is the string that is returned as a value, when the form is submitted	`string`	`'Checkbox'`

Events

Event	Description	Type
`toggled`		`CustomEvent<any>`

Methods

`toggleCheckbox(e?: any) => Promise<void>`

Parameters

Name	Type	Description
`e`	`any`

Returns

Type: Promise<void>

Dependencies

Depends on

Graph

graph TD;
  anchor-checkbox --> anchor-label
  anchor-checkbox --> anchor-icon
  style anchor-checkbox fill:#f9f,stroke:#333,stroke-width:4px

On this page