@neo4j-ndl/react/skills/ndl-react/components/time-picker.md

React implementation of Neo4j Design System

# TimePicker

Import: `import { TimePicker } from '@neo4j-ndl/react'`

## Props

### TimePicker

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
| `errorText` | `string` |  |  | Manually set the error text |
| `floatingStrategy` | `'absolute' \| 'fixed'` |  |  | Strategy for the dropdown floating element. By default it is absolute, but if the component is inside of a needle Dialog, it is set to fixed. If this prop is set, no auto-detection of Dialog is done. |
| `format` | `'hh:mm aa' \| 'hh:mm:ss aa' \| 'hh:mm:ss' \| 'hh:mm'` |  | `hh:mm` | The format of the time picker |
| `isDisabled` | `boolean` |  |  | Whether the time picker is disabled |
| `isFluid` | `boolean` |  |  | Whether the time picker is fluid |
| `isPortaled` | `boolean` |  |  | Whether the dropdown element is rendered in a portal. |
| `isReadOnly` | `boolean` |  |  | Whether the time picker is read only |
| `isRequired` | `boolean` |  |  | Whether the time picker is required |
| `label` | `string` |  |  | The label of the time picker |
| `onChange` | `((time: NeedleTime) => void)` |  |  | Callback function triggered when the time picker value changes |
| `onError` | `((error: string, time: NeedleTime) => void)` |  |  | Callback function triggered when the time picker encounters an error |
| `ref` | `any` |  |  | A ref to apply to the root element. |
| `size` | `'large' \| 'medium' \| 'small'` |  | `medium` | The size of the time picker |
| `timeInterval` | `number` |  | `15` | The time interval of the time picker, in minutes |
| `value` | `NeedleTime` |  |  | The value of the time picker |

## Examples

### Default

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { type NeedleTime, TimePicker } from '@neo4j-ndl/react';
import { useState } from 'react';

const Component = () => {
  const [selectedTime, setSelectedTime] = useState<NeedleTime>();

  return (
    <div style={{ height: '600px', padding: '20px' }}>
      <TimePicker
        label="Select Time"
        value={selectedTime}
        onChange={(time) => setSelectedTime(time)}
        htmlAttributes={{ id: 'time-picker-input' }}
      />
    </div>
  );
};

export default Component;
```

### Error

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { type NeedleTime, TimePicker } from '@neo4j-ndl/react';
import { useState } from 'react';

const Component = () => {
  const [selectedTime, setSelectedTime] = useState<NeedleTime>();

  return (
    <div style={{ height: '600px', padding: '20px' }}>
      <TimePicker
        label="Select Time"
        value={selectedTime}
        onChange={(time) => setSelectedTime(time)}
        errorText="Please select a valid time"
        htmlAttributes={{ id: 'time-picker-input' }}
      />
    </div>
  );
};

export default Component;
```

### In Dialog

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Dialog, type NeedleTime, TimePicker } from '@neo4j-ndl/react';
import { useState } from 'react';

const Component = () => {
  const [selectedTime, setSelectedTime] = useState<NeedleTime>();

  return (
    <Dialog isOpen={true} aria-label="Dialog">
      <Dialog.Header>Using Time Picker inside a dialog</Dialog.Header>
      <Dialog.Content>
        <TimePicker
          label="Select Time"
          value={selectedTime}
          onChange={(time) => setSelectedTime(time)}
          htmlAttributes={{ id: 'time-picker-input' }}
        />
      </Dialog.Content>
    </Dialog>
  );
};

export default Component;
```

### With Seconds

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { type NeedleTime, TimePicker } from '@neo4j-ndl/react';
import { useState } from 'react';

const Component = () => {
  const [selectedTime, setSelectedTime] = useState<NeedleTime>();

  return (
    <div style={{ height: '600px', padding: '20px' }}>
      <TimePicker
        label="Select Time (with seconds)"
        format="hh:mm:ss"
        value={selectedTime}
        onChange={(time) => setSelectedTime(time)}
        htmlAttributes={{ id: 'time-picker-input' }}
      />
    </div>
  );
};

export default Component;
```