Component reference

DescriptionList

Related terms and values share a natural label column within the available width.

Preview

Natural label column and local composition

Shows only the public information layout; labels, long identity and actions are fixed examples and read no business data.

packages/meowtail/stories/description-list.stories.tsxline 42tsx

render: () => (
  <Measure width="content">
    <Stack gap="relaxed">
      <span>{copy.purpose}</span>
      <DescriptionList aria-label="Work information" data-description-wide>
        <DescriptionItem term={copy.version}>{copy.versionValue}</DescriptionItem>
        <DescriptionItem term={copy.identity}>
          <Inline wrap={false} gap="compact" align="start">
            <LayoutItem grow>
              <code>{copy.identityValue}</code>
            </LayoutItem>
            <LayoutItem shrink={false}>
              <Button variant="outline" size="small">
                {copy.action}
              </Button>
            </LayoutItem>
          </Inline>
        </DescriptionItem>
        <DescriptionItem term={<label htmlFor="description-draft">{copy.draft}</label>}>
          <Input id="description-draft" placeholder="Type to adjust the local width" />
        </DescriptionItem>
      </DescriptionList>
      <div style={{ width: "100%", maxWidth: "20rem" }} data-description-narrow>
        <Stack gap="compact">
          <strong>{copy.narrow}</strong>
          <DescriptionList aria-label="Narrow region information">
            <DescriptionItem term={copy.version}>{copy.versionValue}</DescriptionItem>
            <DescriptionItem term={copy.identity}>
              <code>{copy.identityValue}</code>
            </DescriptionItem>
          </DescriptionList>
        </Stack>
      </div>
    </Stack>
  </Measure>
)

Installation

bun add meowtail

Usage

usage.tsts

import { DescriptionList } from "meowtail";

API reference

Props

Also takes className, children and the attributes and events of its root element.

DOM parts

root

Registry

The component is registered as description-list in the meowtail component registry.