Components / Foundations

Labeled Item

Component

Displays a labeled section with an optional tooltip and associated content. Useful for form fields, information displays, or any paired label-content scenarios.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component, then make it your own.

ComponentLabeledItem

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { LabeledItem, TextInput, create_text_input_manager } from "sveltekit-ui"

  const name_input = create_text_input_manager({ label: "Display name", val: "Alex" })
</script>

<LabeledItem label="Profile" tooltip="This name appears on your public profile.">
  <TextInput manager={name_input} />
</LabeledItem>

API reference

Props accepted by the component.

16 entries in properties

Property	Type	Default	Description
`label`	`string`	`label`	The text label displayed next to the content.
`tooltip`	`string or null`	`null`	Optional tooltip text displayed when hovering over the tooltip icon.
`is_required`	`boolean`	`false`	Indicates whether the labeled item is required.
`is_disabled`	`boolean`	`false`	Indicates whether the content is disabled.
`font_weight`	`number`	`500`	The font weight of the label text.
`font_size`	`number`	`1.6`	The font size of the label text in rem.
`color`	`CSS color`	`var(--g4-t)`	The color of the label text.
`disabled_color`	`CSS color`	`var(--g8-t)`	The color of the label text when disabled.
`ml`	`number`	`0`	Margin-left in rem.
`mr`	`number`	`0`	Margin-right in rem.
`mt`	`number`	`0`	Margin-top in rem.
`mb`	`number`	`0`	Margin-bottom in rem.
`heading_min_width`	`number`	`20`	Minimum width of the label heading in rem.
`content_min_width`	`number`	`30`	Minimum width of the content area in rem.
`content_max_width`	`number`	`50`	Maximum width of the content area in rem.
`children`	`snippet`	`null`	The content to be displayed alongside the label.