eui documentation
  1. Components
  2. EuiInputCheckboxComponent

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
Inputs
Outputs
HostBindings
HostListeners
Accessors

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
getcssClasses()

Gets the CSS classes for the checkbox component. Combines base classes with validation state classes.

Returns : string
indeterminate
getindeterminate()

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
setindeterminate(value: BooleanInput)
Parameters :
Name Type Optional
value BooleanInput No
Returns : void
isInvalid
getisInvalid()

Controls the invalid state of the checkbox. Used for displaying validation errors.

Returns : boolean
setisInvalid(state: any)
Parameters :
Name Type Optional
state any No
Returns : void
checked
getchecked()

Controls the checked state of the checkbox.

Returns : boolean
setchecked(value: BooleanInput)
Parameters :
Name Type Optional
value BooleanInput No
Returns : void
ariaLabel
getariaLabel()

Attaches an aria-label attribute based on the checked state.

Returns : string

results matching ""

    No results matching ""