# EuiTimepickerComponent

**Type:** component

<p>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.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;!-- Single input field mode --&gt;
&lt;eui-timepicker
  [isOneInputField]=&quot;true&quot;
  [(ngModel)]=&quot;selectedTime&quot; /&gt;

&lt;!-- Separate fields mode --&gt;
&lt;eui-timepicker
  [showSeconds]=&quot;true&quot;
  [(ngModel)]=&quot;selectedTime&quot; /&gt;

&lt;!-- With reactive forms --&gt;
&lt;form [formGroup]=&quot;form&quot;&gt;
  &lt;eui-timepicker formControlName=&quot;appointmentTime&quot; /&gt;
&lt;/form&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">selectedTime: EuiTimePicker = { hours: 14, minutes: 30, seconds: 0 };
form = new FormGroup({
  appointmentTime: new FormControl(null)
});</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Provide clear labels for time input purpose</li>
<li>Use aria-label on increment/decrement buttons</li>
<li>Ensure keyboard navigation works (Tab, Arrow keys)</li>
<li>Announce time changes to screen readers</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Time format: { hours: number, minutes: number, seconds?: number }</li>
<li>Single input mode uses mask for formatted input (HH:MM or HH:MM:SS)</li>
<li>Separate fields mode provides individual controls with +/- buttons</li>
<li>Step values control increment/decrement amounts</li>
</ul>


**Selector:** `eui-timepicker`

**Standalone:** false

## Inputs

- **e2eAttr**: `string` - 
- **hasSeconds**: `boolean` - <p>Option for enabling seconds.</p>

- **iconSize**: `string` - <p>The size of the icon used for changing hours, minutes and seconds.</p>

- **inputId**: `string` - <p>The id of the input element when isOneInputField attribute is used. If not provided, a unique id will be generated.</p>

- **isDisabled**: `boolean` - <p>Sets the disabled state.</p>

- **isOneInputField**: `boolean` - <p>Attribute that transforms the 3 separate inputs into one input field.</p>

- **isreadOnly**: `boolean` - <p>Sets the readonly attribute of the input field.</p>

- **placeholder**: `string` - <p>The placeholder of the input field when isOneInputField attribute is used.</p>

- **stepHours**: `number` - <p>The step used for changing hours.</p>

- **stepMinutes**: `number` - <p>The step used for changing minutes.</p>

- **stepSeconds**: `number` - <p>The step used for changing seconds.</p>

- **timeMask**: `string` - <p>The mask for the input field when isOneInputField attribute is used.</p>

