Time input
The Time input component allows users to enter a time in multiple formats.
import { ... } from '@ag.ds-next/react/time-input';Usage
Time input components can be imported via the time-input entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/time-input';Props
| Prop | Type | Description |
|---|---|---|
| label | string | Describes the purpose of the field. |
| autoComplete? | string | |
| autoFocus? | boolean | |
| block? | boolean | If true, the field will stretch to the fill the width of its container. |
| disabled? | boolean | |
| hideOptionalLabel? | boolean | If true, "(optional)" will never be appended to the label. |
| hint? | string | Provides extra information about the field. |
| id? | string | |
| inputMode? | "numeric" | "none" | "text" | "tel" | "url" | "email" | "decimal" | "search" | |
| invalid? | boolean | If true, the invalid state will be rendered. |
| maxLength? | number | |
| maxWidth? | "md" | "lg" | "xl" | "xs" | "sm"Default: "md" | The maximum width of the field. |
| message? | string | Message to show when the field is invalid. |
| name? | string | |
| onBlur? | FocusEventHandler<HTMLInputElement> | |
| onChange? | ((args: TimeValue) => void) | Function to be fired following a change event. |
| onFocus? | FocusEventHandler<HTMLInputElement> | |
| pattern? | string | |
| placeholder? | string | |
| ref? | Ref<HTMLInputElement> | |
| required? | boolean | If false, "(optional)" will be appended to the label. |
| timeFormat? | "h:mm aaa" | "hh:mm aaa" | "HH:mm" | The format to render the value and hint text. |
| type? | HTMLInputTypeAttribute | |
| value? | TimeValueDefault: { formatted: '', value: '',} | The value of the input. |
Source
You can view the full source code for this package on Github.