Skip to content
UI
v0.3.1

Search the docs

KeyValue

Labelled values in a grid or in ruled rows.

Example

Game
Fish on!
RTP
96.50%
Max win
5 000×
Volatility
High
Game
Fish on!
RTP
96.50%
Max win
5 000×
Volatility
High
key-value.example.svelte 
<script lang="ts">
  import { KeyValue } from '@onlywin/ui-svelte';

  const items = [
    { label: 'Game', value: 'Fish on!' },
    { label: 'RTP', value: '96.50%' },
    { label: 'Max win', value: '5 000×' },
    { label: 'Volatility', value: 'High' },
  ];
</script>

<div class="example-stack">
  <KeyValue {items} columns={4} />
  <KeyValue {items} layout="rows" />
</div>

Usage

Do

  • Use it for the facts of one thing: a round, a game, a partner.

Don’t

  • Do not use it for lists of many items; use Table.

Accessibility

  • A description list (dl, dt, dd).

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

KeyValue props
Prop Type Default Description
columns 1 | 2 | 3 | 4 3
items *required ReadonlyArray<IUiKeyValueItem> —
layout 'grid' | 'rows' 'grid' `rows`: label left, value right, one pair per ruled line.