> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Time Input

> InputTime.vue Component Documentation

The `InputTime.vue` component is a reusable Vue.js component for selecting and displaying time inputs. It supports features like read-only and disabled states, integrates with `v-model` for two-way data binding, and provides a customizable label for improved usability.

***

## Features

<CardGroup cols={2}>
  <Card title="Time Input" icon="square-1">
    Uses a native HTML time input element for selecting times.
  </Card>

  <Card title="Custom Labels" icon="square-2">
    Displays a label next to the time input for better user experience.
  </Card>

  <Card title="Read-Only and Disabled States" icon="square-3">
    Provides flexibility for controlling user interaction.
  </Card>
</CardGroup>

***

## Usage

### Basic Example

```js theme={null}
import { InputTime } from '@robojuice/velure-ui';
```

```vue theme={null}
<InputTime label="Time"></InputTime>
```

### Disabled Input

```vue theme={null}
<InputTime disabled="disabled" label="Time disabled"></InputTime>
```

### Read-Only Input

```vue theme={null}
<InputTime readonly="readonly" label="Time readonly"></InputTime>
```

***

## Props

<ParamField path="v-model" type="string" default="undefined">
  The value bound to the time input field.
</ParamField>

<ParamField path="width" type="number | string" default="100">
  The width of the component as a percentage.
</ParamField>

<ParamField path="label" type="string" default="''">
  The label displayed alongside the time input field.
</ParamField>

<ParamField path="error" type="string" default="null">
  Error message to display for validation errors (if any).
</ParamField>

***

## Example Use Cases

### Reactive Time Input

Bind the time value reactively using `v-model`:

```vue theme={null}
<template>
  <InputTime v-model="selectedTime" label="Select a Time" />
</template>

<script setup>
import { ref } from 'vue';

const selectedTime = ref('');
</script>
```

***

## Notes

* The `modelValue` prop supports various formats for time values, allowing integration with different data models.
* The `label` prop provides descriptive text for the time input, enhancing clarity and accessibility.
* The `error` prop can be used to highlight validation issues by applying a corresponding error state to the input field.

For further customization, refer to the component's source code.