# Number Flow

URL: https://ark-ui.com/docs/react/utilities/number-flow
LLM: https://ark-ui.com/llms.txt/utilities/number-flow

Animates a number by rolling each digit to its new value.

---

---
id: number-flow
title: Number Flow
description: Animates a number by rolling each digit to its new value.
status: new
---



## Anatomy

```tsx
<NumberFlow.Root>
  <NumberFlow.Segments />
  <NumberFlow.HiddenValueText />
</NumberFlow.Root>
```

`Segments` renders one `Digit` per rolling digit and one `Symbol` per separator, currency sign, or literal. Each `Digit`
renders a `DigitTrack` that holds a strip of `DigitCell`s, and the strip is translated so the right cell lands in view.
Pass a render function to `Segments` to compose the parts yourself:

```tsx
<NumberFlow.Root>
  <NumberFlow.Segments>
    {(segment) =>
      segment.kind === 'digit' ? (
        <NumberFlow.Digit segment={segment}>
          <NumberFlow.DigitTrack segment={segment} />
        </NumberFlow.Digit>
      ) : (
        <NumberFlow.Symbol segment={segment} />
      )
    }
  </NumberFlow.Segments>
  <NumberFlow.HiddenValueText />
</NumberFlow.Root>
```

## Examples

### Basic

Pass a `value` and the number rolls to it whenever it changes. Use `defaultValue` instead to let the component own the
value.

```tsx
import { NumberFlow } from '@ark-ui/react/number-flow'
import { MinusIcon, PlusIcon } from 'lucide-react'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/number-flow.module.css'

export const Basic = () => {
  const [value, setValue] = useState(1248)

  return (
    <div className={styles.Card}>
      <span className={styles.Label}>Followers</span>
      <NumberFlow.Root value={value} className={`${styles.Root} ${styles.Display}`}>
        <NumberFlow.Segments />
        <NumberFlow.HiddenValueText />
      </NumberFlow.Root>
      <div className={styles.Actions}>
        <button type="button" className={button.Root} onClick={() => setValue((v) => v - 1)}>
          <MinusIcon /> Unfollow
        </button>
        <button type="button" className={button.Root} data-variant="solid" onClick={() => setValue((v) => v + 1)}>
          <PlusIcon /> Follow
        </button>
      </div>
    </div>
  )
}
```

### Formatting

`formatOptions` goes straight to `Intl.NumberFormat`, so currency, percent, compact notation, and precision all work as
they would in `Intl`. Only the digits roll; signs, separators, and currency symbols swap in place.

```tsx
import { NumberFlow } from '@ark-ui/react/number-flow'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/number-flow.module.css'

const random = (min: number, max: number) => Math.random() * (max - min) + min

export const Formatting = () => {
  const [revenue, setRevenue] = useState(48250.75)
  const [growth, setGrowth] = useState(0.124)
  const [visitors, setVisitors] = useState(1_284_000)

  const shuffle = () => {
    setRevenue(random(20_000, 90_000))
    setGrowth(random(-0.2, 0.4))
    setVisitors(random(200_000, 9_000_000))
  }

  return (
    <div className="stack">
      <div className={styles.Grid}>
        <div className={styles.Stat}>
          <span className={styles.Label}>Revenue</span>
          <NumberFlow.Root
            value={revenue}
            formatOptions={{ style: 'currency', currency: 'USD' }}
            className={styles.Root}
          >
            <NumberFlow.Segments />
            <NumberFlow.HiddenValueText />
          </NumberFlow.Root>
        </div>
        <div className={styles.Stat}>
          <span className={styles.Label}>Growth</span>
          <NumberFlow.Root
            value={growth}
            formatOptions={{ style: 'percent', maximumFractionDigits: 1, signDisplay: 'exceptZero' }}
            className={`${styles.Root} ${styles.Trend}`}
          >
            <NumberFlow.Segments />
            <NumberFlow.HiddenValueText />
          </NumberFlow.Root>
        </div>
        <div className={styles.Stat}>
          <span className={styles.Label}>Visitors</span>
          <NumberFlow.Root
            value={visitors}
            formatOptions={{ notation: 'compact', maximumFractionDigits: 1 }}
            className={styles.Root}
          >
            <NumberFlow.Segments />
            <NumberFlow.HiddenValueText />
          </NumberFlow.Root>
        </div>
      </div>
      <button type="button" className={button.Root} onClick={shuffle}>
        Shuffle
      </button>
    </div>
  )
}
```

### Pricing

Switching between two prices is a common use. Set `trend` so every digit rolls in the direction the price moved.

```tsx
import { NumberFlow } from '@ark-ui/react/number-flow'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/number-flow.module.css'

const prices = { monthly: 24, yearly: 19.2 }

type Billing = keyof typeof prices

export const Pricing = () => {
  const [billing, setBilling] = useState<Billing>('monthly')

  return (
    <div className={styles.Card}>
      <div className={styles.Header}>
        <span className={styles.Label}>Pro plan</span>
        <div className={styles.Toggle}>
          {(['monthly', 'yearly'] as const).map((option) => (
            <button
              key={option}
              type="button"
              className={styles.ToggleItem}
              aria-pressed={billing === option}
              onClick={() => setBilling(option)}
            >
              {option === 'monthly' ? 'Monthly' : 'Yearly'}
            </button>
          ))}
        </div>
      </div>
      <div className={styles.Price}>
        <NumberFlow.Root
          value={prices[billing]}
          trend={true}
          formatOptions={{ style: 'currency', currency: 'USD', trailingZeroDisplay: 'stripIfInteger' }}
          className={styles.Root}
        >
          <NumberFlow.Segments />
          <NumberFlow.HiddenValueText />
        </NumberFlow.Root>
        <span className={styles.Period}>/ month</span>
      </div>
      <span className={styles.Caption}>
        {billing === 'yearly' ? 'Billed $230.40 a year. You save 20%.' : 'Billed monthly. Cancel anytime.'}
      </span>
      <button type="button" className={button.Root} data-variant="solid">
        Get started
      </button>
    </div>
  )
}
```

### Trend

The root carries `data-trend` (`up`, `down`, or `none`) for the whole roll, so the color can follow the direction of the
last change.

```tsx
import { NumberFlow } from '@ark-ui/react/number-flow'
import { TrendingDownIcon, TrendingUpIcon } from 'lucide-react'
import { useEffect, useState } from 'react'
import styles from 'styles/number-flow.module.css'

const open = 182.4

export const Trend = () => {
  const [price, setPrice] = useState(open)

  useEffect(() => {
    const id = setInterval(() => {
      setPrice((prev) => Math.max(1, prev + (Math.random() - 0.48) * 3))
    }, 1600)
    return () => clearInterval(id)
  }, [])

  const change = (price - open) / open
  const direction = change >= 0 ? 'up' : 'down'

  return (
    <div className={styles.Card}>
      <div className={styles.Header}>
        <span className={styles.Label}>ARK · Nasdaq</span>
        <span className={styles.Badge} data-trend={direction}>
          {direction === 'up' ? <TrendingUpIcon /> : <TrendingDownIcon />}
          <NumberFlow.Root
            value={change}
            formatOptions={{
              style: 'percent',
              minimumFractionDigits: 2,
              maximumFractionDigits: 2,
              signDisplay: 'always',
            }}
            className={styles.Root}
          >
            <NumberFlow.Segments />
            <NumberFlow.HiddenValueText />
          </NumberFlow.Root>
        </span>
      </div>
      <NumberFlow.Root
        value={price}
        trend={true}
        formatOptions={{ style: 'currency', currency: 'USD' }}
        className={`${styles.Root} ${styles.Display} ${styles.Trend}`}
      >
        <NumberFlow.Segments />
        <NumberFlow.HiddenValueText />
      </NumberFlow.Root>
      <span className={styles.Caption}>Digits roll in the direction the price moved.</span>
    </div>
  )
}
```

### Continuous

By default each digit takes its shortest path, so `9` to `0` rolls forward one step. Set `continuous` to spin through
every value in between instead, which makes a jump from `120` to `245` read as counting rather than a cut.

```tsx
import { NumberFlow } from '@ark-ui/react/number-flow'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/number-flow.module.css'

export const Continuous = () => {
  const [value, setValue] = useState(120)

  return (
    <div className={styles.Card}>
      <span className={styles.Label}>Points</span>
      <NumberFlow.Root value={value} continuous={true} className={`${styles.Root} ${styles.Display}`}>
        <NumberFlow.Segments />
        <NumberFlow.HiddenValueText />
      </NumberFlow.Root>
      <span className={styles.Caption}>Every digit spins through the values in between.</span>
      <div className={styles.Actions}>
        <button type="button" className={button.Root} onClick={() => setValue((v) => v + 12)}>
          +12
        </button>
        <button type="button" className={button.Root} onClick={() => setValue((v) => v + 125)}>
          +125
        </button>
        <button type="button" className={button.Root} onClick={() => setValue(120)}>
          Reset
        </button>
      </div>
    </div>
  )
}
```

### Timing

`spinTiming` controls the digit roll and `transformTiming` controls digits entering and leaving. Both take CSS
`duration` and `easing` values. Set `stagger` to delay each digit behind the one before it.

```tsx
import { NumberFlow } from '@ark-ui/react/number-flow'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/number-flow.module.css'

export const Timing = () => {
  const [value, setValue] = useState(31_415)

  return (
    <div className={styles.Card}>
      <span className={styles.Label}>Downloads</span>
      <NumberFlow.Root
        value={value}
        stagger="60ms"
        spinTiming={{ duration: '1400ms', easing: 'cubic-bezier(0.16, 1, 0.3, 1)' }}
        transformTiming={{ duration: '700ms', easing: 'cubic-bezier(0.16, 1, 0.3, 1)' }}
        className={`${styles.Root} ${styles.Display}`}
      >
        <NumberFlow.Segments />
        <NumberFlow.HiddenValueText />
      </NumberFlow.Root>
      <span className={styles.Caption}>A slower spring with each digit trailing the one before it.</span>
      <button type="button" className={button.Root} onClick={() => setValue(Math.round(Math.random() * 999_999))}>
        Randomize
      </button>
    </div>
  )
}
```

### Locale

The number follows the locale from `LocaleProvider`, or the `locale` prop. Non-Latin numeral systems roll through their
own glyphs, so `ar-EG` rolls through `٠` to `٩`.

```tsx
import { NumberFlow } from '@ark-ui/react/number-flow'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/number-flow.module.css'

const locales = [
  { locale: 'en-US', label: 'English' },
  { locale: 'de-DE', label: 'Deutsch' },
  { locale: 'ar-EG', label: 'العربية' },
  { locale: 'hi-IN-u-nu-deva', label: 'हिन्दी' },
]

export const Locale = () => {
  const [value, setValue] = useState(1_234_567.89)

  return (
    <div className="stack">
      <div className={styles.Grid}>
        {locales.map(({ locale, label }) => (
          <div key={locale} className={styles.Stat}>
            <span className={styles.Label}>{label}</span>
            <NumberFlow.Root value={value} locale={locale} className={styles.Root}>
              <NumberFlow.Segments />
              <NumberFlow.HiddenValueText />
            </NumberFlow.Root>
          </div>
        ))}
      </div>
      <button
        type="button"
        className={button.Root}
        onClick={() => setValue(Math.round(Math.random() * 10_000_000) / 100)}
      >
        Randomize
      </button>
    </div>
  )
}
```

### Prefix and Suffix

Use `prefix` and `suffix` for static text around the number. They never roll, and they are included in the accessible
label.

```tsx
import { NumberFlow } from '@ark-ui/react/number-flow'
import { useEffect, useState } from 'react'
import styles from 'styles/number-flow.module.css'

export const PrefixSuffix = () => {
  const [throughput, setThroughput] = useState(1280)
  const [latency, setLatency] = useState(42)

  useEffect(() => {
    const id = setInterval(() => {
      setThroughput(Math.round(900 + Math.random() * 900))
      setLatency(Math.round(20 + Math.random() * 60))
    }, 2000)
    return () => clearInterval(id)
  }, [])

  return (
    <div className={styles.Grid}>
      <div className={styles.Stat}>
        <span className={styles.Label}>Throughput</span>
        <NumberFlow.Root value={throughput} prefix="~" suffix=" req/s" className={styles.Root}>
          <NumberFlow.Segments />
          <NumberFlow.HiddenValueText />
        </NumberFlow.Root>
      </div>
      <div className={styles.Stat}>
        <span className={styles.Label}>p95 latency</span>
        <NumberFlow.Root value={latency} suffix=" ms" className={styles.Root}>
          <NumberFlow.Segments />
          <NumberFlow.HiddenValueText />
        </NumberFlow.Root>
      </div>
    </div>
  )
}
```

### Composition

Pass a function as the child of `Segments` to render each segment yourself. Each digit segment carries its decimal
`place` (`0` is the ones column, negative values are fraction digits), and each symbol carries its `Intl` `type`, so you
can style the cents or the currency sign on their own. `Segments` keys every segment for you, so digits keep rolling
when the number gains or loses a digit.

```tsx
import { NumberFlow } from '@ark-ui/react/number-flow'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/number-flow.module.css'

export const Composition = () => {
  const [value, setValue] = useState(1299.99)

  return (
    <div className={styles.Card}>
      <span className={styles.Label}>Total due</span>
      <NumberFlow.Root
        value={value}
        formatOptions={{ style: 'currency', currency: 'USD' }}
        className={`${styles.Root} ${styles.Display}`}
      >
        <NumberFlow.Segments>
          {(segment) =>
            segment.kind === 'digit' ? (
              <NumberFlow.Digit segment={segment} className={segment.place < 0 ? styles.Fraction : undefined} />
            ) : (
              <NumberFlow.Symbol
                segment={segment}
                className={segment.type === 'currency' ? styles.Currency : undefined}
              />
            )
          }
        </NumberFlow.Segments>
        <NumberFlow.HiddenValueText />
      </NumberFlow.Root>
      <button type="button" className={button.Root} onClick={() => setValue(Math.round(Math.random() * 500_000) / 100)}>
        Update total
      </button>
    </div>
  )
}
```

### Live Announcements

Set `live` to announce changes to screen readers. The value is announced through `HiddenValueText` once the roll
settles, so a fast counter is read once rather than for every intermediate value.

```tsx
import { NumberFlow } from '@ark-ui/react/number-flow'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/number-flow.module.css'

export const Live = () => {
  const [value, setValue] = useState(3)

  return (
    <div className={styles.Card}>
      <span className={styles.Label}>Items in cart</span>
      <NumberFlow.Root value={value} live={true} className={`${styles.Root} ${styles.Display}`}>
        <NumberFlow.Segments />
        <NumberFlow.HiddenValueText />
      </NumberFlow.Root>
      <span className={styles.Caption}>Screen readers announce the count once it settles.</span>
      <div className={styles.Actions}>
        <button type="button" className={button.Root} onClick={() => setValue((v) => Math.max(0, v - 1))}>
          Remove item
        </button>
        <button type="button" className={button.Root} data-variant="solid" onClick={() => setValue((v) => v + 1)}>
          Add item
        </button>
      </div>
    </div>
  )
}
```

### Root Provider

Use the `useNumberFlow` hook with `RootProvider` to read the value and call `setValue` from outside the component.

```tsx
import { NumberFlow, useNumberFlow } from '@ark-ui/react/number-flow'
import button from 'styles/button.module.css'
import styles from 'styles/number-flow.module.css'

export const RootProvider = () => {
  const numberFlow = useNumberFlow({ defaultValue: 6800 })

  return (
    <div className={styles.Card}>
      <span className={styles.Label}>Daily steps</span>
      <NumberFlow.RootProvider value={numberFlow} className={`${styles.Root} ${styles.Display}`}>
        <NumberFlow.Segments />
        <NumberFlow.HiddenValueText />
      </NumberFlow.RootProvider>
      <div className={styles.Actions}>
        <button type="button" className={button.Root} onClick={() => numberFlow.setValue(numberFlow.value - 500)}>
          -500
        </button>
        <button type="button" className={button.Root} onClick={() => numberFlow.setValue(numberFlow.value + 500)}>
          +500
        </button>
      </div>
    </div>
  )
}
```

## Guides

### Styling

The component sets the structural styles inline: each digit is clipped to one line and the track is a vertical strip of
`1lh` cells. What is left is typography and color.

```css
[data-number-flow-root] {
  font-variant-numeric: tabular-nums;
}

[data-number-flow-symbol] {
  white-space: pre;
}

[data-number-flow-digit] {
  vertical-align: top;
}
```

Use a font with tabular figures. Proportional digits change width as they roll, which makes the number jitter.

The root exposes `data-state` (`idle` or `rolling`), `data-trend`, and `data-reduced-motion`. Digits carry `data-place`,
and symbols carry `data-type` with their `Intl.NumberFormat` part type, such as `currency` or `group`.

### Accessibility

By default the root has `role="img"` and an `aria-label` with the formatted value, so assistive technology reads the
number instead of the strip of cells. `HiddenValueText` is visually hidden and stays silent.

With `live`, the root drops its role and `HiddenValueText` becomes a polite status region that holds the settled value.
Render `HiddenValueText` whenever you set `live`; without it, nothing is announced.

When the user prefers reduced motion, the number snaps to its new value. Set `respectMotionPreference` to `false` to
roll anyway.

## API Reference

### Props

### Root

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`continuous`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether digits spin through every intermediate value instead of taking the nearest path.

**`defaultValue`**
Type: `number`
Required: false
Default Value: `0`
Description: The initial value to render when uncontrolled.

**`formatOptions`**
Type: `NumberFormatOptions`
Required: false
Default Value: `undefined`
Description: The options to pass to the `Intl.NumberFormat` constructor.

**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.

**`ids`**
Type: `Partial<{ root: string; valueText: string }>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the number-flow. Useful for composition.

**`live`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether the value is announced to assistive technology as it changes.
When `false`, the rendered value is still readable, but changes are not announced.

**`locale`**
Type: `string`
Required: false
Default Value: `"en-US"`
Description: The current locale. Based on the BCP 47 definition.

**`onAnimationComplete`**
Type: `(details: AnimationDetails) => void`
Required: false
Default Value: `undefined`
Description: Callback fired when the roll animation settles.

**`onAnimationStart`**
Type: `(details: AnimationDetails) => void`
Required: false
Default Value: `undefined`
Description: Callback fired when a value change starts a roll animation.

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Callback fired when the value changes.

**`prefix`**
Type: `string`
Required: false
Default Value: `undefined`
Description: A static string rendered before the formatted value. Does not animate.

**`render`**
Type: `ReactElement<unknown, string | JSXElementConstructor<any>> | RenderFn<EmptyState>`
Required: false
Default Value: `undefined`
Description: Render the part as a custom element, combining their props and behavior.

Pass an element to have the part's props merged into it, or a function to control the merge
yourself and read the part's state.

**`respectMotionPreference`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to suppress the roll animation when the user prefers reduced motion.

**`spinTiming`**
Type: `TimingOptions`
Required: false
Default Value: `{ duration: "900ms", easing: "cubic-bezier(0.4, 0, 0.2, 1)" }`
Description: The timing of the per-digit roll transition.

**`stagger`**
Type: `string`
Required: false
Default Value: `undefined`
Description: A CSS `<time>` delay applied between adjacent digits, e.g. `"25ms"`.

**`suffix`**
Type: `string`
Required: false
Default Value: `undefined`
Description: A static string rendered after the formatted value. Does not animate.

**`transformTiming`**
Type: `TimingOptions`
Required: false
Default Value: `{ duration: "500ms", easing: "cubic-bezier(0.4, 0, 0.2, 1)" }`
Description: The timing of layout transitions - segments entering/exiting.

**`trend`**
Type: `Trend`
Required: false
Default Value: `false`
Description: Controls the roll direction of each digit.
- `false` (default): each digit takes its own shortest path (`9 -> 0` rolls forward one step).
- `true`: every digit rolls in the direction of the overall value change.
- `1` / `-1`: force every digit to roll up or down, regardless of the value change.

**`value`**
Type: `number`
Required: false
Default Value: `undefined`
Description: The controlled numeric value to render.

#### Data Attributes

**`data-number-flow-root`**: <uid>
**`data-state`**: "rolling" | "idle"
**`data-trend`**: 
**`data-reduced-motion`**: 

### DigitCell

#### Props

**`cell`**
Type: `DigitCell`
Required: true
Default Value: `undefined`
Description: undefined

**`segment`**
Type: `DigitSegment`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`render`**
Type: `ReactElement<unknown, string | JSXElementConstructor<any>> | RenderFn<EmptyState>`
Required: false
Default Value: `undefined`
Description: Render the part as a custom element, combining their props and behavior.

Pass an element to have the part's props merged into it, or a function to control the merge
yourself and read the part's state.

#### Data Attributes

**`data-number-flow-digit-cell`**: <uid>
**`data-place`**: 
**`data-digit`**: 

### Digit

#### Props

**`segment`**
Type: `DigitSegment`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`render`**
Type: `ReactElement<unknown, string | JSXElementConstructor<any>> | RenderFn<EmptyState>`
Required: false
Default Value: `undefined`
Description: Render the part as a custom element, combining their props and behavior.

Pass an element to have the part's props merged into it, or a function to control the merge
yourself and read the part's state.

#### Data Attributes

**`data-number-flow-digit`**: <uid>
**`data-place`**: 

### DigitTrack

#### Props

**`segment`**
Type: `DigitSegment`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`render`**
Type: `ReactElement<unknown, string | JSXElementConstructor<any>> | RenderFn<EmptyState>`
Required: false
Default Value: `undefined`
Description: Render the part as a custom element, combining their props and behavior.

Pass an element to have the part's props merged into it, or a function to control the merge
yourself and read the part's state.

#### Data Attributes

**`data-number-flow-digit-track`**: <uid>
**`data-place`**: 

### RootProvider

#### Props

**`value`**
Type: `UseNumberFlowReturn`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`render`**
Type: `ReactElement<unknown, string | JSXElementConstructor<any>> | RenderFn<EmptyState>`
Required: false
Default Value: `undefined`
Description: Render the part as a custom element, combining their props and behavior.

Pass an element to have the part's props merged into it, or a function to control the merge
yourself and read the part's state.

### Symbol

#### Props

**`segment`**
Type: `SymbolSegment`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`render`**
Type: `ReactElement<unknown, string | JSXElementConstructor<any>> | RenderFn<EmptyState>`
Required: false
Default Value: `undefined`
Description: Render the part as a custom element, combining their props and behavior.

Pass an element to have the part's props merged into it, or a function to control the merge
yourself and read the part's state.

#### Data Attributes

**`data-number-flow-symbol`**: <uid>
**`data-type`**: The type of the item

### HiddenValueText

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`render`**
Type: `ReactElement<unknown, string | JSXElementConstructor<any>> | RenderFn<EmptyState>`
Required: false
Default Value: `undefined`
Description: Render the part as a custom element, combining their props and behavior.

Pass an element to have the part's props merged into it, or a function to control the merge
yourself and read the part's state.