Skip to content

Latest commit

 

History

History
183 lines (153 loc) · 25.6 KB

timefield.md

File metadata and controls

183 lines (153 loc) · 25.6 KB
Raw

TimeField

TimeField component provides a way to select a time while giving the freedom to style. It follows the Native Input Time for the keyboard navigation & accessibility features. Supports all the features of React Aria's useTimeField.

Table of Contents

Usage

import React from "react";
import { useLocale } from "@react-aria/i18n";

import {
  TimeField,
  TimeFieldLabel,
  TimeSegment,
  useTimeFieldBaseState,
  useTimeFieldState,
} from "@adaptui/react";

export const TimeFieldBasic = props => {
  let { locale } = useLocale();

  const state = useTimeFieldBaseState({ locale, ...props });
  const datefield = useTimeFieldState({ ...props, state });

  return (
    <div className="timefield">
      <TimeFieldLabel state={datefield} className="timefield__label">
        {props.label}
      </TimeFieldLabel>
      <TimeField state={datefield} className="timefield__field">
        {state.segments.map((segment, i) => (
          <TimeSegment
            key={i}
            segment={segment}
            state={state}
            className={`timefield__field--item ${
              segment.isPlaceholder ? "placeholder" : ""
            }`}
          >
            {segment.text}
          </TimeSegment>
        ))}
        {state.validationState === "invalid" && (
          <span aria-hidden="true">🚫</span>
        )}
      </TimeField>
    </div>
  );
};

export default TimeFieldBasic;

Edit CodeSandbox Edit CodeSandbox

Other Examples

Edit CodeSandbox Edit CodeSandbox

Composition

  • TimeSegment uses Role
  • TimeField uses Role
  • useTimeFieldBaseState uses its own state
  • TimeFieldDescription uses Role
  • TimeFieldErrorMessage uses Role
  • TimeFieldLabel uses Role
  • useTimeFieldState uses its own state

Props

TimeSegmentOptions

Name Type Description
segment DateSegment Current segment state return from state.segments.
state DateFieldState Object returned by the useTimeFieldBaseState hook.

TimeFieldOptions

Name Type Description
state TimeFieldState Object returned by the useTimeFieldState hook.

TimeFieldBaseStateProps

Name Type Description
locale string The locale to display and edit the value according to.
hourCycle 12 | 24 | undefined Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
granularity "hour" | "minute" | "second" | "millisecond" | ... Determines the smallest unit that is displayed in the time picker.
hideTimeZone boolean | undefined Whether to hide the time zone abbreviation.
placeholderValue T | undefined A placeholder time that influences the format of the placeholder shown when no value is selected.Defaults to 12:00 AM or 00:00 depending on the hour cycle.
minValue TimeValue | undefined The minimum allowed time that a user may select.
maxValue TimeValue | undefined The maximum allowed time that a user may select.
isDisabled boolean | undefined Whether the input is disabled.
isReadOnly boolean | undefined Whether the input can be selected but not changed by the user.
validationState ValidationState | undefined Whether the input should display its "valid" or "invalid" visual styling.
isRequired boolean | undefined Whether user input is required on the input before form submission.Often paired with the necessityIndicator prop to add a visual indicator to the input.
autoFocus boolean | undefined Whether the element should receive focus on render.
onFocus ((e: FocusEvent<Element, Element>) => void) | u... Handler that is called when the element receives focus.
onBlur ((e: FocusEvent<Element, Element>) => void) | u... Handler that is called when the element loses focus.
onFocusChange ((isFocused: boolean) => void) | undefined Handler that is called when the element's focus status changes.
onKeyDown ((e: KeyboardEvent) => void) | undefined Handler that is called when a key is pressed.
onKeyUp ((e: KeyboardEvent) => void) | undefined Handler that is called when a key is released.
label ReactNode The content to display as the label.
description ReactNode A description for the field. Provides a hint such as specific requirements for what to choose.
errorMessage ReactNode An error message for the field.
value T | undefined The current value (controlled).
defaultValue T | undefined The default value (uncontrolled).
onChange ((value: C) => void) | undefined Handler that is called when the value changes.

TimeFieldDescriptionOptions

Name Type Description
state TimeFieldState Object returned by the useTimeFieldState hook.

TimeFieldErrorMessageOptions

Name Type Description
state TimeFieldState Object returned by the useTimeFieldState hook.

TimeFieldLabelOptions

Name Type Description
state TimeFieldState Object returned by the useTimeFieldState hook.

TimeFieldStateProps

Name Type Description
hourCycle 12 | 24 | undefined Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
granularity "hour" | "minute" | "second" | "millisecond" | ... Determines the smallest unit that is displayed in the time picker.
hideTimeZone boolean | undefined Whether to hide the time zone abbreviation.
placeholderValue T | undefined A placeholder time that influences the format of the placeholder shown when no value is selected.Defaults to 12:00 AM or 00:00 depending on the hour cycle.
minValue TimeValue | undefined The minimum allowed time that a user may select.
maxValue TimeValue | undefined The maximum allowed time that a user may select.
isDisabled boolean | undefined Whether the input is disabled.
isReadOnly boolean | undefined Whether the input can be selected but not changed by the user.
validationState ValidationState | undefined Whether the input should display its "valid" or "invalid" visual styling.
isRequired boolean | undefined Whether user input is required on the input before form submission.Often paired with the necessityIndicator prop to add a visual indicator to the input.
autoFocus boolean | undefined Whether the element should receive focus on render.
onFocus ((e: FocusEvent<Element, Element>) => void) | u... Handler that is called when the element receives focus.
onBlur ((e: FocusEvent<Element, Element>) => void) | u... Handler that is called when the element loses focus.
onFocusChange ((isFocused: boolean) => void) | undefined Handler that is called when the element's focus status changes.
onKeyDown ((e: KeyboardEvent) => void) | undefined Handler that is called when a key is pressed.
onKeyUp ((e: KeyboardEvent) => void) | undefined Handler that is called when a key is released.
label ReactNode The content to display as the label.
description ReactNode A description for the field. Provides a hint such as specific requirements for what to choose.
errorMessage ReactNode An error message for the field.
value T | undefined The current value (controlled).
defaultValue T | undefined The default value (uncontrolled).
onChange ((value: C) => void) | undefined Handler that is called when the value changes.
aria-label string | undefined Defines a string value that labels the current element.
aria-labelledby string | undefined Identifies the element (or elements) that labels the current element.
aria-describedby string | undefined Identifies the element (or elements) that describes the object.
aria-details string | undefined Identifies the element (or elements) that provide a detailed, extended description for the object.
id string | undefined The element's unique identifier. See MDN.
state DateFieldState Object returned by the useTimeFieldBaseState hook.