LabeledContent

A label and its value on the same row.

import { LabeledContent } from '@satinhq/kit'

Example

import { LabeledContent, List, Screen, Section } from '@satinhq/kit'

function Example() {
  return (
    <Screen>
      <List id="example">
        <Section>
          <LabeledContent label="Author" value="Jane Austen" />
          <LabeledContent label="Published" value="1817" />
        </Section>
      </List>
    </Screen>
  )
}

9:41

Read the example, then change its values in the code.

Show a value

Pass the row title to label and its current value to value.

Place it in a list

A List or Form supplies the row spacing and separators. LabeledContent also accepts React nodes for its label and value.

Good to know

• The example displays Author and Published as leading labels, with Jane Austen and 1817 as their trailing values.

API

Scroll horizontally to read every column.

Prop	Type	Description
label	ReactNode	The leading label.
value	ReactNode	The trailing value.

Related: Quick start, List, Screen.

:::