> ## 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.

# Date Input

> InputDate.vue Component Documentation

The `InputDate.vue` component is a reusable Vue.js component for selecting and displaying date inputs. It supports features such as read-only and disabled states, as well as seamless integration with `v-model` for two-way data binding.

***

## Features

<CardGroup cols={2}>
  <Card title="Date Input" icon="square-1">
    Provides a native HTML date input element for selecting dates.
  </Card>

  <Card title="Custom Labels" icon="square-2">
    Displays a label alongside the input for improved user experience.
  </Card>

  <Card title="Read-Only and Disabled States" icon="square-3">
    Supports states to control user interaction.
  </Card>
</CardGroup>

***

## Usage

### Basic Example

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

```vue theme={null}
<InputDate label="Date"></InputDate>
```

### Disabled Input

```vue theme={null}
<InputDate disabled="disabled" label="Date disabled"></InputDate>
```

### Read-Only Input

```vue theme={null}
<InputDate readonly="readonly" label="Date readonly"></InputDate>
```

***

## Props

<ParamField path="v-model" type="string" default="undefined">
  The value bound to the date 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 date input field.
</ParamField>

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

***

## Example Use Cases

### Reactive Date Input

Bind the date value reactively with `v-model`:

```vue theme={null}
<template>
  <InputDate v-model="selectedDate" label="Select a Date" />
</template>

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

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

***

## Notes

* The `model` prop supports various formats for date values, including strings and numbers, for flexible integration with different data models.
* The `error` prop can be used to highlight validation issues by applying a corresponding error state to the input field.
* The `label` prop allows you to provide descriptive text for the date input, enhancing usability and accessibility.

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