# EuiTimepickerComponent

**Type:** component



A timepicker component that allows the user to select a time. The component
can be used in two modes: one input field or three separate input fields
for hours, minutes, and seconds. The component also supports incremental and
decremental buttons for each input field.

### Basic Usage
```html
<!-- Single input field mode -->
<eui-timepicker
  [isOneInputField]="true"
  [(ngModel)]="selectedTime" />

<!-- Separate fields mode -->
<eui-timepicker
  [showSeconds]="true"
  [(ngModel)]="selectedTime" />

<!-- With reactive forms -->
<form [formGroup]="form">
  <eui-timepicker formControlName="appointmentTime" />
</form>
```

```typescript
selectedTime: EuiTimePicker = { hours: 14, minutes: 30, seconds: 0 };
form = new FormGroup({
  appointmentTime: new FormControl(null)
});
```

### Accessibility
- Provide clear labels for time input purpose
- Use aria-label on increment/decrement buttons
- Ensure keyboard navigation works (Tab, Arrow keys)
- Announce time changes to screen readers

### Notes
- Time format: { hours: number, minutes: number, seconds?: number }
- Single input mode uses mask for formatted input (HH:MM or HH:MM:SS)
- Separate fields mode provides individual controls with +/- buttons
- Step values control increment/decrement amounts


**Selector:** `eui-timepicker`

## Inputs
- **e2eAttr**: `string` - 
- **hasSeconds**: `boolean` - Option for enabling seconds.
- **iconSize**: `string` - The size of the icon used for changing hours, minutes and seconds.
- **inputId**: `string` - The id of the input element when isOneInputField attribute is used. If not provided, a unique id will be generated.
- **isDisabled**: `boolean` - Sets the disabled state.
- **isOneInputField**: `boolean` - Attribute that transforms the 3 separate inputs into one input field.
- **isreadOnly**: `boolean` - Sets the readonly attribute of the input field.
- **placeholder**: `string` - The placeholder of the input field when isOneInputField attribute is used.
- **stepHours**: `number` - The step used for changing hours.
- **stepMinutes**: `number` - The step used for changing minutes.
- **stepSeconds**: `number` - The step used for changing seconds.
- **timeMask**: `string` - The mask for the input field when isOneInputField attribute is used.