Time Input

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

Uses a native HTML time input element for selecting times.

Custom Labels

Displays a label next to the time input for better user experience.

Read-Only and Disabled States

Provides flexibility for controlling user interaction.

Usage

Basic Example

import { InputTime } from '@robojuice/velure-ui';

<InputTime label="Time"></InputTime>

Disabled Input

<InputTime disabled="disabled" label="Time disabled"></InputTime>

Read-Only Input

<InputTime readonly="readonly" label="Time readonly"></InputTime>

Props

string

default:"undefined"

The value bound to the time input field.

number | string

default:"100"

The width of the component as a percentage.

string

default:"''"

The label displayed alongside the time input field.

string

default:"null"

Error message to display for validation errors (if any).

Example Use Cases

Reactive Time Input

Bind the time value reactively using v-model:

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

Setup

Foundations

Inputs

Time Input

Features

Time Input

Custom Labels

Read-Only and Disabled States

Usage

Basic Example

Disabled Input

Read-Only Input

Props

Example Use Cases

Reactive Time Input

Notes

​Features

Time Input

Custom Labels

Read-Only and Disabled States

​Usage

​Basic Example

​Disabled Input

​Read-Only Input

​Props

​Example Use Cases

​Reactive Time Input

​Notes

Features

Usage

Basic Example

Disabled Input

Read-Only Input

Props

Example Use Cases

Reactive Time Input

Notes