# Progress - Linear

URL: https://ark-ui.com/docs/components/progress-linear
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/progress-linear.mdx

An element that shows either determinate or indeterminate progress.

---

<ComponentPreview id="ProgressLinear" />

## Anatomy

To set up the progress correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="linear-progress" />

## Examples

Learn how to use the `Progress` component in your project. Let's take a look at the most basic example:

**Example: basic**

#### React

```tsx
import { Progress } from '@ark-ui/react/progress'

export const Basic = () => (
  <Progress.Root defaultValue={42}>
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
)

```

#### Solid

```tsx
import { Progress } from '@ark-ui/solid/progress'

export const Basic = () => (
  <Progress.Root defaultValue={42}>
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Progress } from '@ark-ui/vue/progress'
</script>

<template>
  <Progress.Root :defaultValue="42">
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Progress } from '@ark-ui/svelte/progress'
</script>

<Progress.Root defaultValue={42}>
  <Progress.Label>Label</Progress.Label>
  <Progress.ValueText />
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
</Progress.Root>

```

### Set a min and max value

By default, the maximum is `100`. If that's not what you want, you can easily specify a different bound by changing the
value of the `max` prop. You can do the same with the minimum value by setting the `min` prop.

For example, to show the user a progress from `10` to `30`, you can use:

**Example: min-max**

#### React

```tsx
import { Progress } from '@ark-ui/react/progress'

export const MinMax = () => (
  <Progress.Root defaultValue={20} min={10} max={30}>
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
)

```

#### Solid

```tsx
import { Progress } from '@ark-ui/solid/progress'

export const MinMax = () => (
  <Progress.Root defaultValue={20} min={10} max={30}>
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Progress } from '@ark-ui/vue/progress'
</script>

<template>
  <Progress.Root :defaultValue="20" :min="10" :max="30">
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Progress } from '@ark-ui/svelte/progress'
</script>

<Progress.Root defaultValue={20} min={10} max={30}>
  <Progress.Label>Label</Progress.Label>
  <Progress.ValueText />
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
</Progress.Root>

```

### Indeterminate progress

The progress component is determinate by default, with the value and max set to 50 and 100 respectively. To render an
indeterminate progress, you will have to set the `value` to `null`.

**Example: indeterminate**

#### React

```tsx
import { Progress } from '@ark-ui/react/progress'

export const Indeterminate = () => (
  <Progress.Root defaultValue={null}>
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
)

```

#### Solid

```tsx
import { Progress } from '@ark-ui/solid/progress'

export const Indeterminate = () => (
  <Progress.Root value={null}>
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Progress } from '@ark-ui/vue/progress'
</script>

<template>
  <Progress.Root :defaultValue="null">
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Progress } from '@ark-ui/svelte/progress'
</script>

<Progress.Root value={null}>
  <Progress.Label>Label</Progress.Label>
  <Progress.ValueText />
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
</Progress.Root>

```

### Showing a value text

Progress bars can only be interpreted by sighted users. To include a text description to support assistive technologies
like screen readers, use the `value` part in `translations`.

**Example: value-text**

#### React

```tsx
import { Progress } from '@ark-ui/react/progress'

export const ValueText = () => (
  <Progress.Root
    translations={{
      value({ value, max }) {
        if (value === null) return 'Loading...'
        return `${value} of ${max} items loaded`
      },
    }}
  >
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
)

```

#### Solid

```tsx
import { Progress } from '@ark-ui/solid/progress'

export const ValueText = () => (
  <Progress.Root
    translations={{
      value({ value, max }) {
        if (value === null) return 'Loading...'
        return `${value} of ${max} items loaded`
      },
    }}
  >
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Progress } from '@ark-ui/vue/progress'
</script>

<template>
  <Progress.Root
    :translations="{
      value: ({ value, max }) => (value == null ? 'Loading...' : `${value} of ${max} items loaded`),
    }"
  >
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Progress } from '@ark-ui/svelte/progress'
</script>

<Progress.Root
  translations={{
    value: ({ value, max }) => (value == null ? 'Loading...' : `${value} of ${max} items loaded`),
  }}
>
  <Progress.Label>Label</Progress.Label>
  <Progress.ValueText />
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
</Progress.Root>

```

### Changing the orientation

By default, the progress is assumed to be horizontal. To change the orientation to vertical, set the orientation
property in the machine's context to vertical.

> Don't forget to change the styles of the vertical progress by specifying its height

**Example: vertical**

#### React

```tsx
import { Progress } from '@ark-ui/react/progress'

export const Vertical = () => (
  <Progress.Root orientation="vertical">
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
)

```

#### Solid

```tsx
import { Progress } from '@ark-ui/solid/progress'

export const Vertical = () => (
  <Progress.Root orientation="vertical">
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Progress } from '@ark-ui/vue/progress'
</script>

<template>
  <Progress.Root orientation="vertical">
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Progress } from '@ark-ui/svelte/progress'
</script>

<Progress.Root orientation="vertical">
  <Progress.Label>Label</Progress.Label>
  <Progress.ValueText />
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
</Progress.Root>

```

### Using the Root Provider

The `RootProvider` component provides a context for the progress. It accepts the value of the `useProgress` hook. You
can leverage it to access the component state and methods from outside the progress.

**Example: root-provider**

#### React

```tsx
import { Progress, useProgress } from '@ark-ui/react/progress'

export const RootProvider = () => {
  const progress = useProgress()

  return (
    <>
      <button onClick={() => progress.setToMax()}>Set to MAX</button>
      <Progress.RootProvider value={progress}>
        <Progress.Label>Label</Progress.Label>
        <Progress.ValueText />
        <Progress.Track>
          <Progress.Range />
        </Progress.Track>
      </Progress.RootProvider>
    </>
  )
}

```

#### Solid

```tsx
import { Progress, useProgress } from '@ark-ui/solid/progress'

export const Basic = () => {
  const progress = useProgress()

  return (
    <>
      <button onClick={() => progress().setToMax()}>Set to MAX</button>

      <Progress.Root>
        <Progress.Label>Label</Progress.Label>
        <Progress.ValueText />
        <Progress.Track>
          <Progress.Range />
        </Progress.Track>
      </Progress.Root>
    </>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Progress, useProgress } from '@ark-ui/vue/progress'

const progress = useProgress()
</script>

<template>
  <button @click="progress.setToMax()">Set to MAX</button>

  <Progress.Root>
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Progress, useProgress } from '@ark-ui/svelte/progress'
  const id = $props.id()
  const progress = useProgress({ id })
</script>

<button onclick={() => progress().setToMax()}>Set to MAX</button>

<Progress.RootProvider value={progress}>
  <Progress.Label>Label</Progress.Label>
  <Progress.ValueText />
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
</Progress.RootProvider>

```

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## API Reference

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `number` | No | The initial value of the progress bar when rendered.
Use when you don't need to control the value of the progress bar. |
| `formatOptions` | `NumberFormatOptions` | No | The options to use for formatting the value. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; track: string; label: string; circle: string }>` | No | The ids of the elements in the progress bar. Useful for composition. |
| `locale` | `string` | No | The locale to use for formatting the value. |
| `max` | `number` | No | The maximum allowed value of the progress bar. |
| `min` | `number` | No | The minimum allowed value of the progress bar. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Callback fired when the value changes. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the element. |
| `translations` | `IntlTranslations` | No | The localized messages to use. |
| `value` | `number` | No | The controlled value of the progress bar. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | root |
| `[data-max]` |  |
| `[data-value]` | The value of the item |
| `[data-state]` |  |
| `[data-orientation]` | The orientation of the progress |


**Circle Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**CircleRange Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**CircleRange Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | circle-range |
| `[data-state]` |  |


**CircleTrack Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**CircleTrack Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | circle-track |
| `[data-orientation]` | The orientation of the circletrack |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | label |
| `[data-orientation]` | The orientation of the label |


**Range Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Range Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | range |
| `[data-orientation]` | The orientation of the range |
| `[data-state]` |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseProgressReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Track Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**View Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `state` | `ProgressState` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**View Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | view |
| `[data-state]` |  |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `number` | No | The initial value of the progress bar when rendered.
Use when you don't need to control the value of the progress bar. |
| `formatOptions` | `NumberFormatOptions` | No | The options to use for formatting the value. |
| `ids` | `Partial<{ root: string; track: string; label: string; circle: string }>` | No | The ids of the elements in the progress bar. Useful for composition. |
| `locale` | `string` | No | The locale to use for formatting the value. |
| `max` | `number` | No | The maximum allowed value of the progress bar. |
| `min` | `number` | No | The minimum allowed value of the progress bar. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Callback fired when the value changes. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the element. |
| `translations` | `IntlTranslations` | No | The localized messages to use. |
| `value` | `number` | No | The controlled value of the progress bar. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | root |
| `[data-max]` |  |
| `[data-value]` | The value of the item |
| `[data-state]` |  |
| `[data-orientation]` | The orientation of the progress |


**Circle Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'svg'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**CircleRange Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'circle'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**CircleRange Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | circle-range |
| `[data-state]` |  |


**CircleTrack Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'circle'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**CircleTrack Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | circle-track |
| `[data-orientation]` | The orientation of the circletrack |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'label'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | label |
| `[data-orientation]` | The orientation of the label |


**Range Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Range Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | range |
| `[data-orientation]` | The orientation of the range |
| `[data-state]` |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseProgressReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Track Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**View Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `state` | `ProgressState` | Yes |  |
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**View Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | view |
| `[data-state]` |  |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `number` | No | The initial value of the progress bar when rendered.
Use when you don't need to control the value of the progress bar. |
| `formatOptions` | `NumberFormatOptions` | No | The options to use for formatting the value. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; track: string; label: string; circle: string }>` | No | The ids of the elements in the progress bar. Useful for composition. |
| `locale` | `string` | No | The locale to use for formatting the value. |
| `max` | `number` | No | The maximum allowed value of the progress bar. |
| `min` | `number` | No | The minimum allowed value of the progress bar. |
| `modelValue` | `number` | No | The v-model value of the progress |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the element. |
| `translations` | `IntlTranslations` | No | The localized messages to use. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | root |
| `[data-max]` |  |
| `[data-value]` | The value of the item |
| `[data-state]` |  |
| `[data-orientation]` | The orientation of the progress |


**Circle Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**CircleRange Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**CircleRange Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | circle-range |
| `[data-state]` |  |


**CircleTrack Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**CircleTrack Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | circle-track |
| `[data-orientation]` | The orientation of the circletrack |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | label |
| `[data-orientation]` | The orientation of the label |


**Range Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Range Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | range |
| `[data-orientation]` | The orientation of the range |
| `[data-state]` |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `ProgressApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Track Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**View Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `state` | `ProgressState` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**View Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | view |
| `[data-state]` |  |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `number` | No | The initial value of the progress bar when rendered.
Use when you don't need to control the value of the progress bar. |
| `formatOptions` | `NumberFormatOptions` | No | The options to use for formatting the value. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; track: string; label: string; circle: string }>` | No | The ids of the elements in the progress bar. Useful for composition. |
| `locale` | `string` | No | The locale to use for formatting the value. |
| `max` | `number` | No | The maximum allowed value of the progress bar. |
| `min` | `number` | No | The minimum allowed value of the progress bar. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Callback fired when the value changes. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the element. |
| `ref` | `Element` | No |  |
| `translations` | `IntlTranslations` | No | The localized messages to use. |
| `value` | `number` | No | The controlled value of the progress bar. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | root |
| `[data-max]` |  |
| `[data-value]` | The value of the item |
| `[data-state]` |  |
| `[data-orientation]` | The orientation of the progress |


**Circle Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'svg'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**CircleRange Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'circle'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**CircleRange Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | circle-range |
| `[data-state]` |  |


**CircleTrack Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'circle'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**CircleTrack Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | circle-track |
| `[data-orientation]` | The orientation of the circletrack |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `api` | `Snippet<[UseProgressContext]>` | No |  |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | label |
| `[data-orientation]` | The orientation of the label |


**Range Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Range Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | range |
| `[data-orientation]` | The orientation of the range |
| `[data-state]` |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseProgressReturn` | Yes |  |
| `ref` | `Element` | No |  |


**Track Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**View Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `state` | `ProgressState` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**View Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | view |
| `[data-state]` |  |


## Accessibility

Complies with the [the progressbar role requirements.](https://w3c.github.io/aria/#progressbar).