Content

LabeledContent

A label with a value or a control beside it.

iOSSwiftUI HStackAndroidCompose RowRenders in a Screen or an Island

iOSSwiftUI HStack

AndroidCompose Row

Import

import {LabeledContent} from '@hzblj/kara-ui'

Props

A label on the leading edge and its value on the trailing edge — the settings/detail row. Pass children instead of value when the trailing side is a control rather than text.

Prop	Type	Description
label*	string	The leading text.
children	ReactNode	The trailing side when it is a control, in place of `value`.
icon	IconName	One of the app's icons, before the label, in the secondary colour.
onPress	() => void	Makes the row pressable and adds a chevron on the trailing edge.
px	SpaceSize	Horizontal padding inside the row — inside its press area too, so Android's ripple reaches the card's edges.
testID	string	Test identifier, forwarded to the native view.
value	string	The trailing text, in the secondary colour. Ignored when `children` is given.

label*

string

The leading text.

children

ReactNode

The trailing side when it is a control, in place of value.

icon

IconName

One of the app's icons, before the label, in the secondary colour.

onPress

() => void

Makes the row pressable and adds a chevron on the trailing edge.

SpaceSize

Horizontal padding inside the row — inside its press area too, so Android's ripple reaches the card's edges.

testID

string

Test identifier, forwarded to the native view.

value

string

The trailing text, in the secondary colour. Ignored when children is given.

Platform notes

Pass children instead of value when the trailing side is a control rather than text.