Profile completion
Uploading…
Storage used
<Progress.Root value={35}>
<Progress.Label>Profile completion</Progress.Label>
<Progress.Value />
</Progress.Root>value={null} is the indeterminate state — the bar loops instead of filling.
Progress.Value takes a formatter child when a percentage is not what you want
to show.
API
Progress.Root
| Prop | Type | Default | |
|---|---|---|---|
indicatorClassName | string | — | |
trackClassName | string | — | |
exit | Exit | — | Inside a <Presence>: plays this child's way out before it unmounts. |
value | number | null | required | The current value. The component is indeterminate when value is null. |
aria-valuetext | string | — | A string value that provides a user-friendly name for aria-valuenow, the current value of the progress bar. |
className | string | ((state: ProgressRootState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
format | NumberFormatOptions | — | Options to format the value. |
getAriaValueText | ((formattedValue: string, value: number | null) => string) | — | Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar. |
locale | LocalesArgument | — | The locale used by Intl.NumberFormat when formatting the value.
Defaults to the user's runtime locale. |
max | number | — | The maximum value. |
min | number | — | The minimum value. |
render | ComponentRenderFn<HTMLProps, ProgressRootState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | CSSProperties | ((state: ProgressRootState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
Plus the DOM props of the element it renders. Source: progress/components/progress-root.tsx.
Progress.Label
| Prop | Type | Default | |
|---|---|---|---|
exit | Exit | — | Inside a <Presence>: plays this child's way out before it unmounts. |
className | string | ((state: ProgressLabelState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ComponentRenderFn<HTMLProps, ProgressLabelState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | CSSProperties | ((state: ProgressLabelState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
Plus the DOM props of the element it renders. Source: progress/components/progress-label.tsx.
Progress.Value
| Prop | Type | Default | |
|---|---|---|---|
exit | Exit | — | Inside a <Presence>: plays this child's way out before it unmounts. |
children | ((formattedValue: string | null, value: number | null) => ReactNode) | null | — | |
className | string | ((state: ProgressValueState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ComponentRenderFn<HTMLProps, ProgressValueState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | CSSProperties | ((state: ProgressValueState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
Plus the DOM props of the element it renders. Source: progress/components/progress-value.tsx.