Appearance

Description List ​

The Description List component is used to display a list of terms and their descriptions.

WARNING

<Input is-read-only :model-value="myField" /> should be used instead of DescriptionList when displaying read-only form data within a <form> element.

See Static and read-only for details.

Basic Usage ​

Order no
#123123
Quantity
3
Category
Flower
template
<DescriptionList>
  <DescriptionListGroup>
    <DescriptionListTerm>Order no</DescriptionListTerm>
    <DescriptionListDetail>#123123</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Quantity</DescriptionListTerm>
    <DescriptionListDetail>3</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Category</DescriptionListTerm>
    <DescriptionListDetail>Flower</DescriptionListDetail>
  </DescriptionListGroup>
</DescriptionList>

Variants ​

Columns ​

The columns variant will display the DescriptionListTerm and DescriptionListDetail components in two columns.

Address
1234 Main St
Extended address
apt 301
Country
United States
State
California
Long text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
template
<DescriptionList>
  <DescriptionListGroup>
    <DescriptionListTerm>Address</DescriptionListTerm>
    <DescriptionListDetail>1234 Main St</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Extended address</DescriptionListTerm>
    <DescriptionListDetail>apt 301</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Country</DescriptionListTerm>
    <DescriptionListDetail>United States</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>State</DescriptionListTerm>
    <DescriptionListDetail>California</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Long text</DescriptionListTerm>
    <DescriptionListDetail>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</DescriptionListDetail>
  </DescriptionListGroup>
</DescriptionList>

Inline ​

The inline variant will display the DescriptionListTerm and DescriptionListDetail components inline.

Address
1234 Main St
Extended address
apt 301
Country
United States
State
California
Long text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
template
<DescriptionList variant="inline">
  <DescriptionListGroup>
    <DescriptionListTerm>Address</DescriptionListTerm>
    <DescriptionListDetail>1234 Main St</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Extended address</DescriptionListTerm>
    <DescriptionListDetail>apt 301</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Country</DescriptionListTerm>
    <DescriptionListDetail>United States</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>State</DescriptionListTerm>
    <DescriptionListDetail>California</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Long text</DescriptionListTerm>
    <DescriptionListDetail>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</DescriptionListDetail>
  </DescriptionListGroup>
</DescriptionList>

Stacked ​

The stacked variant will stack the DescriptionListTerm and DescriptionListDetail components on top of each other.

Address
1234 Main St
Extended address
apt 301
Country
United States
State
California
Long text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
template
<DescriptionList variant="stacked">
  <DescriptionListGroup>
    <DescriptionListTerm>Address</DescriptionListTerm>
    <DescriptionListDetail>1234 Main St</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Extended address</DescriptionListTerm>
    <DescriptionListDetail>apt 301</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Country</DescriptionListTerm>
    <DescriptionListDetail>United States</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>State</DescriptionListTerm>
    <DescriptionListDetail>California</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Long text</DescriptionListTerm>
    <DescriptionListDetail>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</DescriptionListDetail>
  </DescriptionListGroup>
</DescriptionList>

The stacked variant also supports css grid layout, so you can specify the number of columns you want to display.

Address
1234 Main St
Extended address
apt 301
Country
United States
State
California
Long text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
City
Los Angeles
template
<DescriptionList variant="stacked" class="tw-grid tw-grid-cols-2">
  <DescriptionListGroup>
    <DescriptionListTerm>Address</DescriptionListTerm>
    <DescriptionListDetail>1234 Main St</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Extended address</DescriptionListTerm>
    <DescriptionListDetail>apt 301</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Country</DescriptionListTerm>
    <DescriptionListDetail>United States</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>State</DescriptionListTerm>
    <DescriptionListDetail>California</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Long text</DescriptionListTerm>
    <DescriptionListDetail>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>City</DescriptionListTerm>
    <DescriptionListDetail>Los Angeles</DescriptionListDetail>
  </DescriptionListGroup>
</DescriptionList>
Address
1234 Main St
Extended address
apt 301
Country
United States
State
California
template
<DescriptionList variant="stacked" class="tw-grid tw-grid-cols-3">
  <DescriptionListGroup>
    <DescriptionListTerm>Address</DescriptionListTerm>
    <DescriptionListDetail>1234 Main St</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Extended address</DescriptionListTerm>
    <DescriptionListDetail>apt 301</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Country</DescriptionListTerm>
    <DescriptionListDetail>United States</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>State</DescriptionListTerm>
    <DescriptionListDetail>California</DescriptionListDetail>
  </DescriptionListGroup>
</DescriptionList>

Space Between ​

DescriptionTerm and DescriptionDetail components can be spaced between each other by setting the space-between variant to the DescriptionList component.

Address
1234 Main St
Extended address
apt 301
Country
United States
State
California

Divide ​

You can add a divider between each list item by adding the divide prop to the DescriptionList component.

Address
1234 Main St
Extended address
apt 301
Country
United States
State
California
template
<DescriptionList variant="space-between" divide>
  <DescriptionListGroup>
    <DescriptionListTerm>Address</DescriptionListTerm>
    <DescriptionListDetail>1234 Main St</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Extended address</DescriptionListTerm>
    <DescriptionListDetail>apt 301</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Country</DescriptionListTerm>
    <DescriptionListDetail>United States</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>State</DescriptionListTerm>
    <DescriptionListDetail>California</DescriptionListDetail>
  </DescriptionListGroup>
</DescriptionList>

Prepending and Appending the DescriptionListTerm ​

DescriptionListTerm provides a prepend and an append slot to make adding things like icons or other elements easier.

Prepend
Lorem ipsum
Append
Lorem ipsum dolor
template
<DescriptionList>
  <DescriptionListGroup>
    <DescriptionListTerm>
      <template #prepend><Icon name="calendar" /></template>
      Prepend
    </DescriptionListTerm>
    <DescriptionListDetail>Lorem ipsum</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>
      Append
      <template #append>
        <Tooltip text="Example tooltip text">
          <Icon class="tw-text-blue-500" name="circle-info" />
        </Tooltip>
      </template>
    </DescriptionListTerm>
    <DescriptionListDetail>Lorem ipsum dolor</DescriptionListDetail>
  </DescriptionListGroup>
</DescriptionList>

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.