useProgressBar

Provides the accessibility implementation for a progress bar component. Progress bars show either determinate or indeterminate progress of an operation over time.

Loading…80%

Example

ProgressBar.tsx

ProgressBar.css

Form.css

Example

ProgressBar.tsx

ProgressBar.css

Form.css

import {ProgressBar} from './ProgressBar';

<ProgressBar label="Loading…" value={80} />

API

<ProgressBar>
  <Label />
</ProgressBar>

useProgressBar(props: AriaProgressBarProps): ProgressBarAria

AriaProgressBarProps

Name	Type	Default
`isIndeterminate`	`boolean`	Default: —
Whether presentation is indeterminate when progress isn't known.
`value`	`number`	Default: `0`
The current value (controlled).
`valueLabel`	`ReactNode`	Default: —
The content to display as the value's label (e.g. 1 of 4).

`formatOptions`	`Intl.NumberFormatOptions`	Default: `{ style: 'percent' }`
The display format of the value label.

ProgressBarAria

Name	Type
`progressBarProps`	`DOMAttributes`
Props for the progress bar container element.
`labelProps`	`DOMAttributes`
Props for the progress bar's visual label element (if any).