# Data Value

<flow-value>

Reactive

Stable

The data value component display the results of a Flo.w reactive expression as unstyled text.

Use the data value component as a building block for more-complex reactive UI components. The displayed value can be styled using CSS.

Transitions between numeric values are animated to draw attention to changes. This can be disabled by setting the duration attribute to zero.

# Examples

Numeric values can be formatted using a D3 format string (opens new window).

Set format to icon to interpret value as an icon name.

Property	Description	Type	Default
`duration`	Specifies the transition duration in milliseconds for the animation between numeric values. Set to zero to disable animation.	`number`	`250`
`flowContext` `flow-context`	The Flo.w context ID to use for application state.	`string`	`'default'`
`format`	Specifies the display format. Use a D3 format string for numeric values. Use `"icon"` to treat `value` as an icon name.	`string`
Reactive `value`	Specifies the value to display as a Flo.w reactive expression.	`string`

Event	Description	Type
`flowDataValueChanged`	Emitted when the value changes.	`number \| string`

Name	Description
`content`