# xpl-input-time



<!-- Auto Generated Below -->


## Properties

| Property            | Attribute             | Description                                                                                                                                                                              | Type                  | Default     |
| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `allowCustomOption` | `allow-custom-option` | For time inputs, whether to allow custom option in the input even if not available in the dropdown. Example: A step of 30 minutes will allow 15:03, 15:37, etc.  Applies to time inputs. | `boolean`             | `false`     |
| `disabled`          | `disabled`            | Whether the field is disabled                                                                                                                                                            | `boolean`             | `undefined` |
| `inputId`           | `input-id`            | The `inputId` is used to associate the input with a label.                                                                                                                               | `string`              | `undefined` |
| `max`               | `max`                 | Maximum value for the input.                                                                                                                                                             | `number \| string`    | `'23:59'`   |
| `min`               | `min`                 | The minimum value for the input.                                                                                                                                                         | `number \| string`    | `'00:00'`   |
| `mode`              | `mode`                | Whether the input is a single time or a range of times.  Currently, only single time is supported.                                                                                       | `"range" \| "single"` | `'single'`  |
| `name`              | `name`                | Most inputs are used in forms, and should have a `name` associated with the input for handling form data.  Applies to all input types.                                                   | `string`              | `undefined` |
| `placeholder`       | `placeholder`         | Placeholder text that appears when the field has no value  Applies to text, password, number, and date inputs.                                                                           | `string`              | `undefined` |
| `readonly`          | `readonly`            | Whether the input is editable                                                                                                                                                            | `boolean`             | `undefined` |
| `required`          | `required`            | Whether the input is required                                                                                                                                                            | `boolean`             | `undefined` |
| `step`              | `step`                | Time increment for dropdown options                                                                                                                                                      | `number`              | `30`        |
| `timeFormat`        | `time-format`         | The time format to display for the input.                                                                                                                                                | `"12h" \| "24h"`      | `'24h'`     |
| `value`             | `value`               | Including a `value` will pre-populate the input with the given string.  Must be in 24 hour format, ex: 15:25 for 3:25 PM                                                                 | `string`              | `undefined` |


## Events

| Event                  | Description                                                 | Type                  |
| ---------------------- | ----------------------------------------------------------- | --------------------- |
| `hasErrorStateChanged` | Event that is emitted when the hasErrorState state changes. | `CustomEvent<string>` |
| `valueChange`          | Event that emits the current value of the input             | `CustomEvent<string>` |


## Dependencies

### Used by

 - [xpl-input](..)

### Depends on

- [xpl-input](..)
- [xpl-icon](../../xpl-icon)
- [xpl-dropdown](../../xpl-dropdown)

### Graph
```mermaid
graph TD;
  xpl-input-time --> xpl-input
  xpl-input-time --> xpl-icon
  xpl-input-time --> xpl-dropdown
  xpl-input --> xpl-input-time
  xpl-input-file --> xpl-icon
  xpl-input-color --> xpl-popover
  xpl-input-color --> xpl-icon
  xpl-input-color --> xpl-input
  xpl-input-date --> xpl-icon
  xpl-input-phone --> xpl-icon
  xpl-input-phone --> xpl-dropdown
  xpl-input-phone --> xpl-input
  xpl-dropdown --> xpl-dropdown-group
  xpl-dropdown --> xpl-dropdown-option
  xpl-dropdown-group --> xpl-dropdown-group
  xpl-dropdown-group --> xpl-dropdown-option
  xpl-dropdown-group --> xpl-dropdown-heading
  xpl-dropdown-option --> xpl-icon
  xpl-input-search --> xpl-icon
  style xpl-input-time fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*