Skip to content
timepicker-ui
React · Forms

Required Field

Use HTML5 required attribute for validation

Required Input

Add required attribute for browser validation:

Required Field

Try submitting without selecting time

index.tsxtsx
1import { Timepicker } from "timepicker-ui-react";
2import { useState } from "react";
3

4function App() {
5  const [time, setTime] = useState("");
6

7  return (
8    <form onSubmit={(e) => {
9      e.preventDefault();
10      alert(`Submitted: ${time}`);
11    }}>
12      <Timepicker
13        name="time"
14        required
15        value={time}
16        onUpdate={(data) => {
17          setTime(`${data.hour}:${data.minutes} ${data.type}`);
18        }}
19      />
20      <button type="submit">Submit</button>
21    </form>
22  );
23}

HTML5 Attributes

Timepicker supports all standard input attributes:

index.tsxtsx
1<Timepicker
2  name="appointment-time"
3  required
4  disabled={false}
5  readOnly={false}
6  placeholder="Select time"
7/>