### File

`packages/components/eui-input-checkbox/eui-input-checkbox.component.ts`

### Description

Checkbox input field that allows users to select or deselect a boolean value. Supports standard checked state, disabled and readonly modes, validation feedback, and an optional indeterminate (mixed) state.

Angular component that provides a custom checkbox input implementation. Extends InputDirective and implements form control functionality.

### Basic Usage

Example :

    <input euiInputCheckBox id="terms" [(ngModel)]="acceptTerms" />
    <label for="terms">I accept the terms and conditions</label>

### With Indeterminate State

Example :

    <input euiInputCheckBox [indeterminate]="someItemsSelected" />

### Accessibility

- Always associate checkbox with a label using `for` attribute or wrap in `<label>`
- Component automatically provides `aria-label` based on checked state
- Supports keyboard interaction (Space key to toggle)
- Use `isInvalid` to communicate validation errors to screen readers

### Notes

- Indeterminate state is automatically cleared when checkbox is clicked
- Works seamlessly with Angular Forms (both template-driven and reactive)
- Readonly state prevents interaction but maintains visual appearance

### Extends

`InputDirective`

### Implements

`OnInit` `DoCheck` `OnChanges` `ControlValueAccessor`

### Metadata

selector | `input[euiInputCheckBox]`
styleUrls | `./eui-input-checkbox.scss`

### Index

###### Methods
registerOnChange registerOnTouched Optional setDisabledState writeValue getCssClasses
###### Inputs
checked indeterminate isInvalid disabled euiDanger euiDisabled placeholder readonly
###### Outputs
indeterminateChange
###### HostBindings
attr.aria-label attr.type class
###### HostListeners
change keydown.space
###### Accessors
cssClasses indeterminate isInvalid checked ariaLabel

### Constructor

`constructor()`

### Inputs

checked
Type : `boolean`
Controls the checked state of the checkbox.

indeterminate
Type : `boolean`
Controls the indeterminate (mixed) state of the checkbox. When true, the checkbox appears in an indeterminate state. This state is automatically cleared when the checkbox is clicked.

isInvalid
Type : `boolean`
Controls the invalid state of the checkbox. Used for displaying validation errors.

disabled
Type : `boolean`

euiDanger
Type : `boolean`
Default value : `false`

euiDisabled
Type : `boolean`
Default value : `false`

placeholder
Type : `string | null`

readonly
Type : `any`

### Outputs

indeterminateChange
Type : `EventEmitter<boolean>`
Event emitter that fires when the indeterminate state changes.

### HostBindings

attr.aria-label
Type : `string`
Attaches an aria-label attribute based on the checked state.

attr.type
Type : `string`
Default value : `'checkbox'`

class
Type : `string`
Gets the CSS classes for the checkbox component. Combines base classes with validation state classes.

### HostListeners

change
Arguments : `'$any($event.target).checked'`
`change(checked: boolean)`
Event handler for checkbox change events. Parameters :
Name | Optional | Description
checked | No | The new checked state

keydown.space
Arguments : `'$any($event)'`
`keydown.space(event: KeyboardEvent)`
Event handler for space key press. Prevents space key action when checkbox is readonly. Parameters :
Name | Optional | Description
event | No | The keyboard event

### Methods

registerOnChange
`registerOnChange(fn: any)`
Parameters :
Name | Type | Optional
fn | `any` | No
Returns : `void`

registerOnTouched
`registerOnTouched(fn: any)`
Parameters :
Name | Type | Optional
fn | `any` | No
Returns : `void`

Optional setDisabledState
`setDisabledState(isDisabled: boolean)`
Parameters :
Name | Type | Optional
isDisabled | `boolean` | No
Returns : `void`

writeValue
`writeValue(obj: boolean)`
Implements ControlValueAccessor writeValue method. Updates the checked state of the checkbox. Parameters :
Name | Type | Optional | Description
obj | `boolean` | No | The value to write
Returns : `void`

getCssClasses
`getCssClasses(rootClass: string)`
Parameters :
Name | Type | Optional
rootClass | `string` | No
Returns : `string`

### Accessors

cssClasses
get `cssClasses()`
Gets the CSS classes for the checkbox component. Combines base classes with validation state classes. Returns : `string`

indeterminate
get `indeterminate()`
Controls the indeterminate (mixed) state of the checkbox. When true, the checkbox appears in an indeterminate state. This state is automatically cleared when the checkbox is clicked. Returns : `boolean`
set `indeterminate(value: BooleanInput)`
Parameters :
Name | Type | Optional
value | `BooleanInput` | No
Returns : `void`

isInvalid
get `isInvalid()`
Controls the invalid state of the checkbox. Used for displaying validation errors. Returns : `boolean`
set `isInvalid(state: any)`
Parameters :
Name | Type | Optional
state | `any` | No
Returns : `void`

checked
get `checked()`
Controls the checked state of the checkbox. Returns : `boolean`
set `checked(value: BooleanInput)`
Parameters :
Name | Type | Optional
value | `BooleanInput` | No
Returns : `void`

ariaLabel
get `ariaLabel()`
Attaches an aria-label attribute based on the checked state. Returns : `string`

# results matching ""

# No results matching ""