Skip to content
timepicker-ui
React · Features

Disabled Input

Disabled state styling and behavior

Disabled Timepicker

Use the disabled prop to prevent interaction:

Disabled State

Picker cannot be opened

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

3function App() {
4  return (
5    <Timepicker
6      placeholder="Disabled"
7      disabled
8    />
9  );
10}

Conditional Disable

Dynamically enable/disable based on state:

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

4function App() {
5  const [isEnabled, setIsEnabled] = useState(false);
6

7  return (
8    <div>
9      <label>
10        <input
11          type="checkbox"
12          checked={isEnabled}
13          onChange={(e) => setIsEnabled(e.target.checked)}
14        />
15        Enable timepicker
16      </label>
17

18      <Timepicker
19        disabled={!isEnabled}
20      />
21    </div>
22  );
23}