# Dynamic ClassValue > A dynamic ClassValue example using arrays, object maps, derived values, and a toggle. **Source:** [https://scoped.svelte.page/examples/dynamic-class-value](https://scoped.svelte.page/examples/dynamic-class-value) **Markdown mirror:** [https://scoped.svelte.page/examples/dynamic-class-value.md](https://scoped.svelte.page/examples/dynamic-class-value.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: dynamic ClassValue. The stateful case: arrays and object maps can change after hydration, and the runtime helper keeps the parent hash attached to the computed class string. **Metadata:** tag: `CLASSVALUE` | syntax: `scoped:class` | value: `ClassValue` | status: `passing` ### Source #### DynamicClassValue.svelte Source file: [src/lib/examples/scoped-props/demos/DynamicClassValue.svelte](https://github.com/humanspeak/svelte-scoped-props/blob/main/docs/src/lib/examples/scoped-props/demos/DynamicClassValue.svelte) ```svelte
Native element
This div receives a dynamic ClassValue.
Child component
Object class map
Source Current result
Native element dynamicClass = ['parent-owned', { dimmed: dynamicDimmed }] <div class={['demo-card', dynamicClass]}>
Native element demo-card parent-owned{dynamicDimmed ? ' dimmed' : ''} svelte-parent {dynamicDimmed ? 'pink and faded' : 'pink'}
Child component dynamicClass = ['parent-owned', { dimmed: dynamicDimmed }] <ChildCard scoped:class={dynamicClass} />
Child component child-card parent-owned{dynamicDimmed ? ' dimmed' : ''} svelte-parent svelte-child has parent hash
Object class map dynamicClassMap = { 'parent-owned': true, dimmed: dynamicDimmed } <ChildCard scoped:class={dynamicClassMap} />
Object class map child-card parent-owned{dynamicDimmed ? ' dimmed' : ''} svelte-parent svelte-child has parent hash
``` #### ChildCard.svelte Source file: [src/lib/examples/scoped-props/demos/components/ChildCard.svelte](https://github.com/humanspeak/svelte-scoped-props/blob/main/docs/src/lib/examples/scoped-props/demos/components/ChildCard.svelte) ```svelte
Child receives class="{classText}".
```