# EuiInputCheckboxComponent

**Type:** component



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 {@link InputDirective} and implements form control functionality.

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

### With Indeterminate State
```typescript
<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



**Selector:** `input[euiInputCheckBox]`

## Inputs
- **checked**: `boolean` - Controls the checked state of the checkbox.
- **indeterminate**: `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**: `boolean` - Controls the invalid state of the checkbox. Used for displaying validation errors.
- **disabled**: `boolean` - 
- **euiDanger**: `boolean` - 
- **euiDisabled**: `boolean` - 
- **placeholder**: `string | null` - 
- **readonly**: `any` - 

## Outputs
- **indeterminateChange**: `EventEmitter<boolean>` - Event emitter that fires when the indeterminate state changes.