Key value
Shows labeled values, such as the details of a record. Renders a description list (<dl>).
- Status:
- Active
- Owner:
- Alex Morgan
- Created:
Code
demo.tsx
import {KeyValue} from '@earendil-works/elanor-react';
export default function KeyValueDemo() {
return (
<KeyValue.Grid>
<KeyValue.Key>Status</KeyValue.Key>
<KeyValue.Value>Active</KeyValue.Value>
<KeyValue.Key>Owner</KeyValue.Key>
<KeyValue.Value>Alex Morgan</KeyValue.Value>
<KeyValue.Key>Created</KeyValue.Key>
<KeyValue.Value>
<time dateTime="2026-09-21">21 September 2026</time>
</KeyValue.Value>
</KeyValue.Grid>
);
}Usage
import {KeyValue} from '@earendil-works/elanor-react';
<KeyValue.Grid>
<KeyValue.Key>Status</KeyValue.Key>
<KeyValue.Value>Active</KeyValue.Value>
</KeyValue.Grid>;KeyValue.Grid aligns keys and values in two columns. Keys get a trailing colon; don’t add your own.
Inline
KeyValue.Inline keeps a pair on one line and wraps when space runs out.
- Status:
- Active
Code
inline.tsx
import {KeyValue} from '@earendil-works/elanor-react';
export default function KeyValueInlineExample() {
return (
<KeyValue.Inline>
<KeyValue.Key>Status</KeyValue.Key>
<KeyValue.Value>Active</KeyValue.Value>
</KeyValue.Inline>
);
}API
KeyValue.Grid
Renders <dl>. Accepts its HTML attributes and ref.
KeyValue.Key
Renders <dt>. Accepts its HTML attributes and ref.
KeyValue.Value
Renders <dd>. Accepts its HTML attributes and ref.
KeyValue.Inline
Renders <dl>. Accepts its HTML attributes and ref.