# Format Time

URL: https://ark-ui.com/docs/utilities/format-time
LLM: https://ark-ui.com/llms.txt/utilities/format-time

Used to format time values to a specific locale and options

---



## Usage

The time formatting logic supports both string (`HH:mm[:ss]`) and `Date` inputs.

```jsx
import { Format } from '@ark-ui/react'
```

## Examples

### Basic

Use the `Format.Time` component to format a time value with default options.

```tsx
import { Format } from '@ark-ui/react/format'
import styles from 'styles/format.module.css'

export const TimeBasic = () => {
  return (
    <span className={styles.Value}>
      <Format.Time value="18:47:12" format="12h" />
    </span>
  )
}
```

### Date

Use a `Date` object as the `value`.

```tsx
import { Format } from '@ark-ui/react/format'
import styles from 'styles/format.module.css'

export const TimeWithDate = () => {
  return (
    <div className={styles.Inline}>
      <span className={styles.InlineLabel}>Boarding</span>
      <span className={styles.InlineValue}>
        <Format.Time value={new Date(2026, 1, 27, 18, 45, 34)} />
      </span>
    </div>
  )
}
```

### Seconds

Use the `withSeconds` prop to include seconds in the output.

```tsx
import { Format } from '@ark-ui/react/format'
import styles from 'styles/format.module.css'

export const TimeWithSeconds = () => {
  return (
    <div className={styles.Inline}>
      <span className={styles.InlineLabel}>Last sync</span>
      <span className={styles.InlineValue}>
        <Format.Time value="03:07:19" format="12h" withSeconds />
      </span>
    </div>
  )
}
```

### AM/PM Labels

Use `amLabel` and `pmLabel` to customize day-period labels when using 12-hour format.

```tsx
import { Format } from '@ark-ui/react/format'
import styles from 'styles/format.module.css'

export const TimeWithAmPmLabels = () => {
  return (
    <div className={styles.Inline}>
      <span className={styles.InlineLabel}>Support window</span>
      <span className={styles.InlineValue}>
        <Format.Time value="17:15:00" format="12h" amLabel="morning" pmLabel="evening" />
      </span>
    </div>
  )
}
```

### Locale

Use the locale provider to format the time according to a specific locale.

```tsx
import { Format } from '@ark-ui/react/format'
import { LocaleProvider } from '@ark-ui/react/locale'
import styles from 'styles/format.module.css'

export const TimeWithLocale = () => {
  return (
    <LocaleProvider locale="ar-EG">
      <span className={styles.Value}>
        <Format.Time value="13:05" format="12h" />
      </span>
    </LocaleProvider>
  )
}
```