TimeInput
Capture time from the user
Import
Source
Docs
Package
Usage
TimeInput
component is input[type="time"]
with Input component styles:
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
Show browser picker
You can show browser picker by calling showPicker
method of input element:
With seconds
With icon
Disabled state
Accessibility
Provide aria-label
in case you use component without label for screen reader support:
TimeInput component props
Name | Type | Description |
---|---|---|
description | ReactNode | Input description, displayed after label |
descriptionProps | Record<string, any> | Props spread to description element |
disabled | boolean | Disabled input state |
error | ReactNode | Displays error message after input |
errorProps | Record<string, any> | Props spread to error element |
icon | ReactNode | Adds icon on the left side of input |
iconWidth | Width<string | number> | Width of icon section |
inputContainer | (children: ReactNode) => ReactNode | Input container component, defaults to React.Fragment |
inputWrapperOrder | ("input" | "label" | "error" | "description")[] | Controls order of the Input.Wrapper elements |
label | ReactNode | Input label, displayed before input |
labelProps | Record<string, any> | Props spread to label element |
placeholder | string | |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
required | boolean | Sets required on input element |
rightSection | ReactNode | Right section of input, similar to icon but on the right |
rightSectionProps | Record<string, any> | Props spread to rightSection div element |
rightSectionWidth | Width<string | number> | Width of right section, is used to calculate input padding-right |
size | "xs" | "sm" | "md" | "lg" | "xl" | Input size |
type | HTMLInputTypeAttribute | Input element type |
variant | Variants<"unstyled" | "default" | "filled"> | Defines input appearance, defaults to default in light color scheme and filled in dark |
withAsterisk | boolean | Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input |
withSeconds | boolean | Determines whether seconds input should be rendered |
wrapperProps | Record<string, any> | Props passed to root element (InputWrapper component) |
TimeInput component Styles API
Name | Static selector | Description |
---|---|---|
wrapper | .asuikit-TimeInput-wrapper | Root Input element |
icon | .asuikit-TimeInput-icon | Input icon wrapper on the left side of the input, controlled by icon prop |
input | .asuikit-TimeInput-input | Main input element |
rightSection | .asuikit-TimeInput-rightSection | Input right section, controlled by rightSection prop |
root | .asuikit-TimeInput-root | Root element |
label | .asuikit-TimeInput-label | Label element styles, defined by label prop |
error | .asuikit-TimeInput-error | Error element styles, defined by error prop |
description | .asuikit-TimeInput-description | Description element styles, defined by description prop |
required | .asuikit-TimeInput-required | Required asterisk element styles, defined by required prop |