Expand commentComment on line R9Resolved
Halstack Design System
next

Overview

Guidelines

Foundations

Migration

Utilities

Components

Time input

Time input allows users to specify a specific time.

Overview
Code

Props

NameTypeDescriptionDefault
ariaLabelstringSpecifies a string to be used as the name for the timeInput element when no label is provided.'Time input'
clearablebooleanIf true, the input will have an action to clear the entered value.false
defaultValuestringInitial value of the input, only when it is uncontrolled.-
disabledbooleanIf true, the component will be disabled.false
errorstringIf it is a defined value and also a truthy string, the component will change its appearance, showing the error below the input component. If the defined value is an empty string, it will reserve a space below the component for a future error, but it would not change its look. In case of being undefined or null, both the appearance and the space for the error message would not be modified.-
helperTextstringHelper text to be placed above the input.-
labelstringText to be placed above the input.-
namestringName attribute of the input element.-
onBlur(val: { value: string; error?: string }) => voidThis function will be called when the input element loses the focus. An object including the input value and the error (if the value entered is not valid) will be passed to this function. If there is no error, error will not be defined.-
onChange(value: string) => voidThis function will be called when the user types within the input or selects a value in the dropdown element of the component.-
optionalbooleanIf true, the input will be optional, showing '(Optional)' next to the label. Otherwise, the field will be considered required and an error will be passed as a parameter to the onBlur function when it has not been filled.false
readOnlybooleanIf true, the component will not be mutable, meaning the user can not edit the control. In addition, the clear action will not be displayed even if the flag is set to true.false
refReact.Ref<HTMLDivElement>Reference to the component.-
showSecondsbooleanIf true, the component will display seconds and allow the user to input them. Otherwise, seconds will not be shown and the user will not be able to input them.false
size'small' | 'medium' | 'large' | 'fillParent'Size of the component.'medium'
tabIndexnumberValue of the tabindex attribute.0
timeFormat'12' | '24'Time format of the input. It can be either 12 or 24.'12'
valuestringValue of the input. If undefined, the component will be uncontrolled and the value will be managed internally by the component.-

Examples

Controlled

() => {
  const [value, setValue] = useState("");
  
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcTimeInput
        label="Enter your time"
        value={value}
        onChange={newValue => setValue(newValue)}
      />
    </DxcInset>
  );
}

Uncontrolled

() => {
  const onChange = (value) => {
    console.log(value);
  };
  
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcTimeInput
        label="Enter your time"
        defaultValue="12:00 AM"
        onChange={onChange}
      />
    </DxcInset>
  );
}

24h format

() => {
  const onChange = (value) => {
    console.log(value);
  };
  
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcTimeInput
        label="Enter your time"
        defaultValue="20:00"
        timeFormat="24"
        onChange={onChange}
      />
    </DxcInset>
  );
}

With seconds

() => {
  const onChange = (value) => {
    console.log(value);
  };
  
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcTimeInput
        label="Enter your time"
        defaultValue="12:00:30 AM"
        onChange={onChange}
        showSeconds
      />
    </DxcInset>
  );
}
On this page