LabeledField

Field label and value pair; can span two grid columns.

Usage

svelte

<script lang="ts">
  import { LabeledField } from "@milandekruijf/ui/svelte";
</script>

<LabeledField name="Location">Amsterdam, NL</LabeledField>
<LabeledField name="Role">Developer</LabeledField>

Examples

Stacked fields

Name

Milan de Kruijf

Email

hello@milandekruijf.com

Location

Amsterdam, NL

<script lang="ts">
  import { LabeledField } from "@milandekruijf/ui/svelte";
  import { stack } from "./styles.js";
</script>

<div class={stack}>
  <LabeledField name="Name">Milan de Kruijf</LabeledField>
  <LabeledField name="Email">hello@milandekruijf.com</LabeledField>
  <LabeledField name="Location">Amsterdam, NL</LabeledField>
</div>

Props

Prop	Type	Default	Description
name	`string`	—	Field label.
wide?	`boolean`	—	Spans both grid columns when inside a grid.
class?	`string`	—	Extra classes merged after the base classes.
children	`Snippet`	—	Value content; single-line with an ellipsis overflow.

Remaining props are forwarded to the root element.