Skip to main content

TimeField
component

A component that enables users to open a dialog and select a time through a text input.

Anchor to timefieldTimeField

Anchor to label
label
string
required

The content to use as the field label.

Anchor to action
action

A button under the text field to provide extra functionality.

Anchor to disabled
disabled
boolean

Whether the field can be modified.

Anchor to error
error
string

Indicates an error to the user. The field is given specific stylistic treatment to communicate problems that have to be resolved immediately.

Anchor to helpText
helpText
string

The label under the text field which provides guidance or instructions that assist users.

Anchor to is24Hour
is24Hour
boolean
Default: false

(Android only) Whether the clock displays in 24 hour time instead of 12 hour time.

Anchor to onBlur
onBlur
() => void

The callback when focus is removed.

Anchor to onChange
onChange
(value: string) => void

The callback when the user has finished editing a field.

Anchor to onFocus
onFocus
() => void

The callback when input is focused.

Anchor to value
value
string

The current value for the field. Defaults to now. You should update this value in response to the onChange callback.

Was this section helpful?

Time input

import React, {useState} from 'react';
import {
TimeField,
Screen,
ScrollView,
Navigator,
Text,
reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {
const [time, setTime] = useState('');
return (
<Navigator>
<Screen name="TimeField" title="TimeField Example">
<ScrollView>
<TimeField label="Time" value={time} onChange={setTime} />
<Text>Selected Time: {time}</Text>
</ScrollView>
</Screen>
</Navigator>
);
};

export default reactExtension('pos.home.modal.render', () => (
<SmartGridModal />
));

Preview

Anchor to guidelinesGuidelines

  • Use a smart default time for common selections.
Was this section helpful?