# gds-checkbox

**Class**: `GdsCheckbox`

**Tag**: `<gds-checkbox>`


## Properties

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `string` | `-` | The label displayed next to the checkbox button. |
| `supportingText` | `string` | `-` | The supporting text displayed below the label. This text provides additional context or information to the user. |
| `checked` | `boolean` | `-` | Whether the checkbox button is checked or not. |
| `indeterminate` | `boolean` | `-` | Indicates the indeterminate state of the checkbox. This state is used when the checkbox represents a group where some but not all child options are selected, such as in hierarchical selections or "select all" scenarios. |
| `disabled` | `boolean` | `-` | Whether the checkbox button is disabled or not. |
| `value` | `string` | `-` | Get or set the value of the form control. |
| `validator` | `GdsValidator \| undefined` | `-` | A validator that can be used to validate the form control and set an error message. |
| `required` | `boolean` | `-` | The required attribute can be used to communicate to users of assistive technology that the control is required. Validation still needs to be done in a validator or equivalent. |
| `errorMessage` | `string` | `-` | This can be used to manually control the error message that will be displayed when the control is invalid. |
| `invalid` | `any` | `-` | Validation state of the form control. Setting this to true triggers the invalid state of the control. |
| `name` | `string` | `-` |  |
| `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected.  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |


## Events

| Name | Type | Description |
|------|------|-------------|
| `input` | `InputEvent` | Dispatched when the checkbox is checked or unchecked. |
| `change` | `Event` | Dispatched when the checkbox is checked or unchecked. |


## Methods

### `focus(options?: FocusOptions): void`

**Parameters:**

- `options`: `FocusOptions` _(optional)_


## Form Control

This component is a form control and inherits form-related properties and methods.