Disabled Input

Disabled state styling and behavior

Disabled Timepicker

Use the disabled prop to prevent interaction:

Disabled State

Picker cannot be opened

import { Timepicker } from "timepicker-ui-react";

function App() {
  return (
    <Timepicker
      placeholder="Disabled"
      disabled
    />
  );
}

Conditional Disable

Dynamically enable/disable based on state:

import { Timepicker } from "timepicker-ui-react";
import { useState } from "react";

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

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={isEnabled}
          onChange={(e) => setIsEnabled(e.target.checked)}
        />
        Enable timepicker
      </label>

      <Timepicker
        disabled={!isEnabled}
      />
    </div>
  );
}