Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant
Figma
Star

Time Picker

Version 6.1.1GithubStorybookPeer review pending

A Time Picker is a form element used to select a time.

Installation

Installation page anchor
yarn add @twilio-paste/time-picker - or - yarn add @twilio-paste/core
import {TimePicker, formatReturnTime} from '@twilio-paste/core/time-picker';
import {Label} from '@twilio-paste/core/label';
import {HelpText} from '@twilio-paste/core/helptext';

const TimePickerExample = () => {
  return (
    <>
      <Label htmlFor="foo" required>
        Start time
      </Label>
      <TimePicker
        aria-describedby="foo_text"
        id="foo"
        name="foo"
        onChange={(evt) => formatReturnTime(evt.target.value, 'hh:mm aa')}
        required
      />
      <HelpText id="foo_text">Select a time.</HelpText>
    </>
  );
};

TimePicker

TimePicker page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type
any
Default
TIMEPICKER