> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# Attribute

Pairs one field's label with its value on a detail page — reach for `Table` when the same fields repeat across many objects, and `Field` when the value is being collected rather than read. The value slot takes whichever display component fits the data and hosts `InlineEdit` when the field is editable in place, while `AttributeActions` hangs a per-value menu off it.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Attribute) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/data-display-attribute--overview)

```tsx
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { Text } from '@wallarm-org/design-system/Text';

export const Default = () => (
  <div className='w-[400px]'>
    <Attribute>
      <AttributeLabel>Request ID</AttributeLabel>
      <AttributeValue>
        <Text size='sm'>abc-123-def-456</Text>
      </AttributeValue>
    </Attribute>
  </div>
);
```

## Usage

```tsx
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { Text } from '@wallarm-org/design-system/Text';
```

## Examples

### With description

`AttributeLabelDescription` adds a line that stays under the label, for a field
whose name does not explain itself.

```tsx
import { Attribute, AttributeLabel, AttributeLabelDescription, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { Text } from '@wallarm-org/design-system/Text';

export const WithDescription = () => (
  <div className='w-[400px]'>
    <Attribute>
      <AttributeLabel>
        Created at
        <AttributeLabelDescription>
          The time when the request was first received
        </AttributeLabelDescription>
      </AttributeLabel>
      <AttributeValue>
        <Text size='sm'>April 9, 2026, 14:32</Text>
      </AttributeValue>
    </Attribute>
  </div>
);
```

### With info

`AttributeLabelInfo` puts the same explanation behind a hover tooltip instead,
and reads correctly on either side of the label text.

```tsx
import { Attribute, AttributeLabel, AttributeLabelInfo, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { Text } from '@wallarm-org/design-system/Text';

export const WithInfo = () => (
  <div className='w-[400px] flex flex-col gap-16'>
    <Attribute>
      <AttributeLabel>
        Request ID
        <AttributeLabelInfo>Unique identifier assigned to each incoming request</AttributeLabelInfo>
      </AttributeLabel>
      <AttributeValue>
        <Text size='sm'>abc-123-def-456</Text>
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>
        <AttributeLabelInfo>Unique identifier assigned to each incoming request</AttributeLabelInfo>
        Request ID
      </AttributeLabel>
      <AttributeValue>
        <Text size='sm'>abc-123-def-456</Text>
      </AttributeValue>
    </Attribute>
  </div>
);
```

### With link

The label row takes inline content of its own, here a `Link` out to whatever
explains the field — the value slot stays reserved for the data.

```tsx
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { Link } from '@wallarm-org/design-system/Link';
import { Text } from '@wallarm-org/design-system/Text';

export const WithLink = () => (
  <div className='w-[400px]'>
    <Attribute>
      <AttributeLabel>
        Source
        <Link href='#' size='md'>
          View docs
        </Link>
      </AttributeLabel>
      <AttributeValue>
        <Text size='sm'>API Gateway</Text>
      </AttributeValue>
    </Attribute>
  </div>
);
```

### Empty

Four ways a missing value can read: composed by hand, `isEmpty` on its own —
which swaps the value for an em dash and ignores whatever children it had — and
`isEmpty` alongside an `AttributeEmptyDescription`, which appears only in that
state and can carry the link out to the fix.

```tsx
import { Attribute, AttributeEmptyDescription, AttributeLabel, AttributeLabelDescription, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { Link } from '@wallarm-org/design-system/Link';
import { Text } from '@wallarm-org/design-system/Text';

export const Empty = () => (
  <div className='w-[400px] flex flex-col gap-16'>
    <Attribute>
      <AttributeLabel>
        Region
        <AttributeLabelDescription>Manual composition</AttributeLabelDescription>
      </AttributeLabel>
      <AttributeValue />
    </Attribute>

    <Attribute isEmpty>
      <AttributeLabel>Region</AttributeLabel>
      <AttributeValue>
        <Text size='sm'>This text is replaced by the em-dash placeholder</Text>
      </AttributeValue>
    </Attribute>

    <Attribute isEmpty>
      <AttributeLabel>
        Owner
        <AttributeEmptyDescription>Not yet assigned</AttributeEmptyDescription>
      </AttributeLabel>
      <AttributeValue />
    </Attribute>

    <Attribute isEmpty>
      <AttributeLabel>
        SSO provider
        <AttributeEmptyDescription>
          Not connected —{' '}
          <Link href='#' size='md'>
            set up integration
          </Link>
        </AttributeEmptyDescription>
      </AttributeLabel>
      <AttributeValue />
    </Attribute>
  </div>
);
```

### Loading

`loading` skeletons both slots and ignores the children, so a panel can be laid
out before its data lands; it wins over `isEmpty`.

```tsx
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';

export const Loading = () => (
  <div className='w-[400px] flex flex-col gap-16'>
    <Attribute loading>
      <AttributeLabel>Created at</AttributeLabel>
      <AttributeValue />
    </Attribute>
    <Attribute loading>
      <AttributeLabel>Status</AttributeLabel>
      <AttributeValue />
    </Attribute>
  </div>
);
```

### Composition

The display components sanctioned inside a value — `Badge`, `FormatDateTime`,
`OverflowList` of `Tag`s, `Ip` and `IpList`, `Link`, `InlineCodeSnippet`, `Code` —
each formatting the data itself rather than receiving a pre-built string.

```tsx
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { Badge } from '@wallarm-org/design-system/Badge';
import { Code } from '@wallarm-org/design-system/Code';
import { InlineCodeSnippet } from '@wallarm-org/design-system/CodeSnippet';
import { FormatDateTime } from '@wallarm-org/design-system/FormatDateTime';
import { Ip, IpAddress, IpCountry, IpList, IpProvider } from '@wallarm-org/design-system/Ip';
import { Link } from '@wallarm-org/design-system/Link';
import { OverflowList } from '@wallarm-org/design-system/OverflowList';
import { Tag } from '@wallarm-org/design-system/Tag';
import { Text } from '@wallarm-org/design-system/Text';

export const Composition = () => (
  <div className='grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]'>
    <Attribute>
      <AttributeLabel>Status</AttributeLabel>
      <AttributeValue>
        <Badge color='red' variant='dotted'>
          Blocked
        </Badge>
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>First seen</AttributeLabel>
      <AttributeValue>
        <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>Attack type</AttributeLabel>
      <AttributeValue>
        <OverflowList
          className='gap-4'
          items={['XSS', 'BOLA', 'SQL Injection', 'Scanner', 'CSRF', 'XXE', 'RCE', 'LFI', 'IDOR']}
          itemRenderer={item => <Tag key={item}>{item}</Tag>}
        />
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>Sessions</AttributeLabel>
      <AttributeValue>
        <Text size='sm'>3 sessions</Text>
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>Users</AttributeLabel>
      <AttributeValue>
        <OverflowList
          className='gap-4'
          items={[
            'artem@acme.com',
            'uxd@acme.com',
            'ops@acme.com',
            'security@acme.com',
            'admin@acme.com',
          ]}
          itemRenderer={item => <Tag key={item}>{item}</Tag>}
        />
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>IPs</AttributeLabel>
      <AttributeValue>
        <IpList>
          <Ip>
            <IpCountry code='US' />
            <IpAddress>142.198.167.52</IpAddress>
            <IpProvider>Azure</IpProvider>
          </Ip>
          <Ip>
            <IpCountry code='US' />
            <IpAddress>34.74.73.20</IpAddress>
            <IpProvider>AWS</IpProvider>
          </Ip>
          <Ip>
            <IpCountry code='DE' />
            <IpAddress>34.74.73.20</IpAddress>
            <IpProvider>GCP</IpProvider>
          </Ip>
          <Ip>
            <IpCountry code='NL' />
            <IpAddress>10.0.0.1</IpAddress>
          </Ip>
          <Ip>
            <IpCountry code='JP' />
            <IpAddress>192.168.1.1</IpAddress>
          </Ip>
        </IpList>
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>Source IP</AttributeLabel>
      <AttributeValue>
        <Ip>
          <IpCountry code='US' />
          <IpAddress>142.198.167.52</IpAddress>
          <IpProvider>Azure</IpProvider>
        </Ip>
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>Created at</AttributeLabel>
      <AttributeValue>
        <FormatDateTime value='2026-04-02T14:03:00Z' format='datetime' />
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>Documentation</AttributeLabel>
      <AttributeValue>
        <Link href='#' size='md'>
          View full report
        </Link>
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>Payload (inline)</AttributeLabel>
      <AttributeValue>
        <InlineCodeSnippet code='{ "action": "login", "user_id": 42 }' size='sm' />
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>Payload (code)</AttributeLabel>
      <AttributeValue>
        <Code size='s'>{'{ "action": "login", "user_id": 42 }'}</Code>
      </AttributeValue>
    </Attribute>
  </div>
);
```

### With actions

`AttributeActions` turns the value into a `DropdownMenu` trigger: the row picks up
a hover surface and the menu carries the actions that belong to that one value.

```tsx
import { Attribute, AttributeActions, AttributeActionsTarget, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { Badge } from '@wallarm-org/design-system/Badge';
import { Code } from '@wallarm-org/design-system/Code';
import { InlineCodeSnippet } from '@wallarm-org/design-system/CodeSnippet';
import { FormatDateTime } from '@wallarm-org/design-system/FormatDateTime';
import { Ip, IpAddress, IpCountry, IpList, IpProvider } from '@wallarm-org/design-system/Ip';
import { Link } from '@wallarm-org/design-system/Link';
import { OverflowList } from '@wallarm-org/design-system/OverflowList';
import { Tag } from '@wallarm-org/design-system/Tag';
import { Text } from '@wallarm-org/design-system/Text';

export const WithActions = () => (
  <div className='grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]'>
    <Attribute>
      <AttributeLabel>Status</AttributeLabel>
      <AttributeValue>
        <AttributeActions data-testid='attribute-with-actions'>
          <AttributeActionsTarget>
            <Badge color='red' variant='dotted'>
              Blocked
            </Badge>
          </AttributeActionsTarget>
          {renderActionsItems()}
        </AttributeActions>
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>First seen</AttributeLabel>
      <AttributeValue>
        <AttributeActions>
          <AttributeActionsTarget>
            <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />
          </AttributeActionsTarget>
          {renderActionsItems()}
        </AttributeActions>
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>Attack type</AttributeLabel>
      <AttributeValue>
        <AttributeActions>
          <AttributeActionsTarget>
            <OverflowList
              className='gap-4'
              items={[
                'XSS',
                'BOLA',
                'SQL Injection',
                'Scanner',
                'CSRF',
                'XXE',
                'RCE',
                'LFI',
                'IDOR',
              ]}
              itemRenderer={item => <Tag key={item}>{item}</Tag>}
            />
          </AttributeActionsTarget>
          {renderActionsItems()}
        </AttributeActions>
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>Sessions</AttributeLabel>
      <AttributeValue>
        <AttributeActions>
          <AttributeActionsTarget>
            <Text size='sm'>3 sessions</Text>
          </AttributeActionsTarget>
          {renderActionsItems()}
        </AttributeActions>
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>Users</AttributeLabel>
      <AttributeValue>
        <AttributeActions>
          <AttributeActionsTarget>
            <OverflowList
              className='gap-4'
              items={[
                'artem@acme.com',
                'uxd@acme.com',
                'ops@acme.com',
                'security@acme.com',
                'admin@acme.com',
              ]}
              itemRenderer={item => <Tag key={item}>{item}</Tag>}
            />
          </AttributeActionsTarget>
          {renderActionsItems()}
        </AttributeActions>
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>IPs</AttributeLabel>
      <AttributeValue>
        <AttributeActions>
          <AttributeActionsTarget>
            <IpList>
              <Ip>
                <IpCountry code='US' />
                <IpAddress>142.198.167.52</IpAddress>
                <IpProvider>Azure</IpProvider>
              </Ip>
              <Ip>
                <IpCountry code='US' />
                <IpAddress>34.74.73.20</IpAddress>
                <IpProvider>AWS</IpProvider>
              </Ip>
              <Ip>
                <IpCountry code='DE' />
                <IpAddress>34.74.73.20</IpAddress>
                <IpProvider>GCP</IpProvider>
              </Ip>
              <Ip>
                <IpCountry code='NL' />
                <IpAddress>10.0.0.1</IpAddress>
              </Ip>
              <Ip>
                <IpCountry code='JP' />
                <IpAddress>192.168.1.1</IpAddress>
              </Ip>
            </IpList>
          </AttributeActionsTarget>
          {renderActionsItems()}
        </AttributeActions>
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>Source IP</AttributeLabel>
      <AttributeValue>
        <AttributeActions>
          <AttributeActionsTarget>
            <Ip>
              <IpCountry code='US' />
              <IpAddress>142.198.167.52</IpAddress>
              <IpProvider>Azure</IpProvider>
            </Ip>
          </AttributeActionsTarget>
          {renderActionsItems()}
        </AttributeActions>
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>Created at</AttributeLabel>
      <AttributeValue>
        <AttributeActions>
          <AttributeActionsTarget>
            <FormatDateTime value='2026-04-02T14:03:00Z' format='datetime' />
          </AttributeActionsTarget>
          {renderActionsItems()}
        </AttributeActions>
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>Documentation</AttributeLabel>
      <AttributeValue>
        <AttributeActions>
          <AttributeActionsTarget>
            <Link href='#' size='md'>
              View full report
            </Link>
          </AttributeActionsTarget>
          {renderActionsItems()}
        </AttributeActions>
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>Payload (inline)</AttributeLabel>
      <AttributeValue>
        <AttributeActions>
          <AttributeActionsTarget>
            <InlineCodeSnippet code='{ "action": "login", "user_id": 42 }' size='sm' />
          </AttributeActionsTarget>
          {renderActionsItems()}
        </AttributeActions>
      </AttributeValue>
    </Attribute>

    <Attribute>
      <AttributeLabel>Payload (code)</AttributeLabel>
      <AttributeValue>
        <AttributeActions>
          <AttributeActionsTarget>
            <Code size='s'>{'{ "action": "login", "user_id": 42 }'}</Code>
          </AttributeActionsTarget>
          {renderActionsItems()}
        </AttributeActions>
      </AttributeValue>
    </Attribute>
  </div>
);
```

### Horizontal

`orientation='horizontal'` sets the label beside the value in a cell clamped
between 100 and 256px, so values line up down a panel.

```tsx
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { Badge } from '@wallarm-org/design-system/Badge';

export const Horizontal = () => (
  <div className='w-[400px]'>
    <Attribute orientation='horizontal'>
      <AttributeLabel>Status</AttributeLabel>
      <AttributeValue>
        <Badge color='red' variant='dotted'>
          Blocked
        </Badge>
      </AttributeValue>
    </Attribute>
  </div>
);
```

### Horizontal truncation

Horizontal cells clip with an ellipsis rather than wrapping — the label at its set
width, 100px unless you widen it, and the value once its own content overruns.

```tsx
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { Text } from '@wallarm-org/design-system/Text';

export const HorizontalTruncation = () => (
  <div className='w-[500px] flex flex-col gap-8'>
    <Attribute orientation='horizontal'>
      <AttributeLabel width={256}>Short</AttributeLabel>
      <AttributeValue>
        <Text size='sm'>Fits in 256px label cell</Text>
      </AttributeValue>
    </Attribute>
    <Attribute orientation='horizontal'>
      <AttributeLabel width={256}>
        This label text is much longer than 256 pixels and must be truncated
      </AttributeLabel>
      <AttributeValue>
        <Text size='sm'>Value</Text>
      </AttributeValue>
    </Attribute>
    <Attribute orientation='horizontal'>
      <AttributeLabel>Users</AttributeLabel>
      <AttributeValue>
        <Text size='sm' truncate>
          artem@acme.com, uxd@acme.com, ops@acme.com, security@acme.com, admin@acme.com
        </Text>
      </AttributeValue>
    </Attribute>
  </div>
);
```

### Horizontal composition

The same value components in the horizontal layout, where a wide one such as
`IpList type='horizontal'` needs its row to span both columns.

```tsx
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { Badge } from '@wallarm-org/design-system/Badge';
import { FormatDateTime } from '@wallarm-org/design-system/FormatDateTime';
import { Ip, IpAddress, IpCountry, IpList, IpProvider } from '@wallarm-org/design-system/Ip';
import { OverflowList } from '@wallarm-org/design-system/OverflowList';
import { Tag } from '@wallarm-org/design-system/Tag';
import { Text } from '@wallarm-org/design-system/Text';

export const HorizontalComposition = () => (
  <div className='grid grid-cols-2 gap-x-8 gap-y-6 w-[874px]'>
    <Attribute orientation='horizontal'>
      <AttributeLabel>Status</AttributeLabel>
      <AttributeValue>
        <Badge color='red' variant='dotted'>
          Blocked
        </Badge>
      </AttributeValue>
    </Attribute>

    <Attribute orientation='horizontal'>
      <AttributeLabel>First seen</AttributeLabel>
      <AttributeValue>
        <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />
      </AttributeValue>
    </Attribute>

    <Attribute orientation='horizontal'>
      <AttributeLabel>Attack type</AttributeLabel>
      <AttributeValue>
        <OverflowList
          className='gap-4'
          items={['XSS', 'BOLA', 'SQL Injection', 'Scanner', 'CSRF', 'XXE', 'RCE', 'LFI', 'IDOR']}
          itemRenderer={item => <Tag key={item}>{item}</Tag>}
        />
      </AttributeValue>
    </Attribute>

    <Attribute orientation='horizontal'>
      <AttributeLabel>Last seen</AttributeLabel>
      <AttributeValue>
        <FormatDateTime value='2025-04-02T14:03:00Z' format='date' />
      </AttributeValue>
    </Attribute>

    <Attribute orientation='horizontal'>
      <AttributeLabel>Sessions</AttributeLabel>
      <AttributeValue>
        <Text size='sm'>3 sessions</Text>
      </AttributeValue>
    </Attribute>

    <Attribute orientation='horizontal'>
      <AttributeLabel>Users</AttributeLabel>
      <AttributeValue>
        <OverflowList
          className='gap-4'
          items={[
            'artem@acme.com',
            'uxd@acme.com',
            'ops@acme.com',
            'security@acme.com',
            'admin@acme.com',
          ]}
          itemRenderer={item => <Tag key={item}>{item}</Tag>}
        />
      </AttributeValue>
    </Attribute>

    <div className='col-span-2'>
      <Attribute orientation='horizontal'>
        <AttributeLabel>IPs</AttributeLabel>
        <AttributeValue>
          <IpList type='horizontal'>
            <Ip>
              <IpCountry code='US' />
              <IpAddress>142.198.167.52</IpAddress>
              <IpProvider>Azure</IpProvider>
            </Ip>
            <Ip>
              <IpCountry code='US' />
              <IpAddress>34.74.73.20</IpAddress>
              <IpProvider>AWS</IpProvider>
            </Ip>
            <Ip>
              <IpCountry code='DE' />
              <IpAddress>34.74.73.20</IpAddress>
              <IpProvider>GCP</IpProvider>
            </Ip>
          </IpList>
        </AttributeValue>
      </Attribute>
    </div>
  </div>
);
```

### Horizontal loading

The horizontal skeleton is a 16px line against the vertical 24px, matching the
single-line row it stands in for.

```tsx
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';

export const HorizontalLoading = () => (
  <div className='w-[400px] flex flex-col gap-8'>
    <Attribute orientation='horizontal' loading>
      <AttributeLabel>Created at</AttributeLabel>
      <AttributeValue />
    </Attribute>
    <Attribute orientation='horizontal' loading>
      <AttributeLabel>Status</AttributeLabel>
      <AttributeValue />
    </Attribute>
  </div>
);
```

### Horizontal empty

The same four cases side by side, with `width={160}` on the label so the
descriptions have somewhere to sit.

```tsx
import { Attribute, AttributeEmptyDescription, AttributeLabel, AttributeLabelDescription, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { Link } from '@wallarm-org/design-system/Link';
import { Text } from '@wallarm-org/design-system/Text';

export const HorizontalEmpty = () => (
  <div className='w-[400px] flex flex-col gap-8'>
    <Attribute orientation='horizontal'>
      <AttributeLabel width={160}>
        Region
        <AttributeLabelDescription>Manual composition</AttributeLabelDescription>
      </AttributeLabel>
      <AttributeValue />
    </Attribute>

    <Attribute orientation='horizontal' isEmpty>
      <AttributeLabel width={160}>Region</AttributeLabel>
      <AttributeValue>
        <Text size='sm'>This text is replaced by the em-dash placeholder</Text>
      </AttributeValue>
    </Attribute>

    <Attribute orientation='horizontal' isEmpty>
      <AttributeLabel width={160}>
        Owner
        <AttributeEmptyDescription>Not yet assigned</AttributeEmptyDescription>
      </AttributeLabel>
      <AttributeValue />
    </Attribute>

    <Attribute orientation='horizontal' isEmpty>
      <AttributeLabel width={160}>
        SSO provider
        <AttributeEmptyDescription>
          Not connected —{' '}
          <Link href='#' size='md'>
            set up integration
          </Link>
        </AttributeEmptyDescription>
      </AttributeLabel>
      <AttributeValue />
    </Attribute>
  </div>
);
```

### Horizontal with actions

By default the value keeps its own interactivity: a link, or a snippet's copy
button, still does its own job, and the menu opens from the space around it.

```tsx
export const HorizontalWithActions = () => (
  <div className='w-[400px] flex flex-col gap-8'>{renderActionsAttributes(false)}</div>
);
```

### Horizontal with actions menu only

`disableNestedInteractive` renders the value inert, so a click anywhere on the row
opens the menu — for values with nothing worth clicking of their own.

```tsx
export const HorizontalWithActionsMenuOnly = () => (
  <div className='w-[400px] flex flex-col gap-8'>{renderActionsAttributes(true)}</div>
);
```

### With inline edit

`Attribute` > `AttributeValue` > `InlineEdit` is the sanctioned nesting for an
editable field — the value slot supplies the overflow room the editor needs, so
never add your own.

```tsx
export const WithInlineEdit = () => <AttributeInlineEditExample />;
```

### Horizontal with inline edit

The same editor in a horizontal row, where it takes the width of the value cell
rather than the panel.

```tsx
export const HorizontalWithInlineEdit = () => (
  <AttributeInlineEditExample orientation='horizontal' />
);
```

### Mixed

A plain value, an actions target and an inline editor stacked in one column: the
text has to start at the same place in all three, which is what the value slot's
7px pull is for — it moves the hover box left, not the text.

```tsx
export const Mixed = () => <AttributeMixedExample />;
```

### Horizontal mixed

The same three hosts horizontally, where the label cell fixes the start of every
value and the pull has to fit inside the 12px gap between the two cells.

```tsx
export const HorizontalMixed = () => <AttributeMixedExample orientation='horizontal' />;
```

## Props

| Prop           | Type                                                 | Default    | Description                                                                                                                                                                                                                      |
| -------------- | ---------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| loading        | `boolean \| undefined`                               | `false`    | Show skeleton placeholders instead of children                                                                                                                                                                                   |
| isEmpty        | `boolean \| undefined`                               | `false`    | When true, `AttributeValue` renders the em-dash placeholder instead of its children, and any `AttributeEmptyDescription` inside the tree renders (it returns `null` otherwise). Ignored while `loading` is true (skeleton wins). |
| orientation    | `AttributeOrientation \| undefined`                  | `vertical` | Layout direction of the label and value. - `vertical` (default): label above value - `horizontal`: label on the left, value on the right                                                                                         |
| defaultChecked | `boolean \| undefined`                               |            |                                                                                                                                                                                                                                  |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |            |                                                                                                                                                                                                                                  |
| autoFocus      | `boolean \| undefined`                               |            |                                                                                                                                                                                                                                  |
| id             | `string \| undefined`                                |            |                                                                                                                                                                                                                                  |
| tabIndex       | `number \| undefined`                                |            |                                                                                                                                                                                                                                  |
| title          | `string \| undefined`                                |            |                                                                                                                                                                                                                                  |
| rel            | `string \| undefined`                                |            |                                                                                                                                                                                                                                  |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |            |                                                                                                                                                                                                                                  |
| data-testid    | `string \| undefined`                                |            |                                                                                                                                                                                                                                  |

### AttributeActions

| Prop              | Type                                                       | Default | Description                                                                                                                                                                                                                                                                                                          |
| ----------------- | ---------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| open              | `boolean \| undefined`                                     |         |                                                                                                                                                                                                                                                                                                                      |
| defaultOpen       | `boolean \| undefined`                                     |         |                                                                                                                                                                                                                                                                                                                      |
| onOpenChange      | `((open: boolean) => void) \| undefined`                   |         |                                                                                                                                                                                                                                                                                                                      |
| modal             | `boolean \| undefined`                                     |         |                                                                                                                                                                                                                                                                                                                      |
| anchorPoint       | `{ x: number; y: number; } \| undefined`                   |         | Virtual anchor point for positioning without a trigger element                                                                                                                                                                                                                                                       |
| positioning       | `PositioningOptions \| undefined`                          |         | Override default positioning config                                                                                                                                                                                                                                                                                  |
| highlightedValue  | `string \| null \| undefined`                              |         | Programmatically control which item is highlighted                                                                                                                                                                                                                                                                   |
| onHighlightChange | `((details: HighlightChangeDetails) => void) \| undefined` |         | Callback when the highlighted item changes (e.g. on mouse hover)                                                                                                                                                                                                                                                     |
| closeOnSelect     | `boolean \| undefined`                                     |         | Whether selecting an item closes the menu (default true)                                                                                                                                                                                                                                                             |
| onRequestDismiss  | `((event: LayerDismissEvent) => void) \| undefined`        |         | Called when another layer asks this menu to dismiss — e.g. a layer below it in the stack is removed. Call `event.preventDefault()` to keep the menu open.                                                                                                                                                            |
| ids               | `ElementIds \| undefined`                                  |         | Override the trigger element's id. Pass the same id to another compound component's `ids.trigger` (e.g. `Tooltip`, `Popover`) to compose their triggers on one element via nested `asChild` without an extra wrapper node — otherwise the outer trigger's id wins and the other component can't find its own anchor. |
| data-testid       | `string \| undefined`                                      |         |                                                                                                                                                                                                                                                                                                                      |

### AttributeActionsContent

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| title          | `string \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |

### AttributeActionsItem

| Prop           | Type                                                       | Default | Description                                                       |
| -------------- | ---------------------------------------------------------- | ------- | ----------------------------------------------------------------- |
| inset          | `boolean \| undefined`                                     |         |                                                                   |
| disabled       | `boolean \| undefined`                                     |         |                                                                   |
| onSelect       | `(() => void) \| undefined`                                |         |                                                                   |
| value          | `string \| undefined`                                      |         | Explicit value for programmatic highlighting via highlightedValue |
| title          | `string \| undefined`                                      |         |                                                                   |
| defaultChecked | `boolean \| undefined`                                     |         |                                                                   |
| defaultValue   | `string \| number \| readonly string[] \| undefined`       |         |                                                                   |
| autoFocus      | `boolean \| undefined`                                     |         |                                                                   |
| tabIndex       | `number \| undefined`                                      |         |                                                                   |
| rel            | `string \| undefined`                                      |         |                                                                   |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`              |         |                                                                   |
| variant        | `{ default: string; brand: string; destructive: string; }` |         |                                                                   |
| data-testid    | `string \| undefined`                                      |         |                                                                   |

### AttributeActionsTarget

| Prop                     | Type                                                 | Default | Description                                                                                                                                                                                                                                                                                                                                                                            |
| ------------------------ | ---------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| disableNestedInteractive | `boolean \| undefined`                               | `false` | When true, descendants are rendered `inert` — they cannot be clicked, focused, or read by assistive tech as actionable. Any interaction with the target (mouse or keyboard) opens the AttributeActions dropdown. Default `false` — descendants keep their own behavior; clicking them does not open the dropdown. The dropdown opens only when the surrounding target area is clicked. |
| defaultChecked           | `boolean \| undefined`                               |         |                                                                                                                                                                                                                                                                                                                                                                                        |
| defaultValue             | `string \| number \| readonly string[] \| undefined` |         |                                                                                                                                                                                                                                                                                                                                                                                        |
| autoFocus                | `boolean \| undefined`                               |         |                                                                                                                                                                                                                                                                                                                                                                                        |
| id                       | `string \| undefined`                                |         |                                                                                                                                                                                                                                                                                                                                                                                        |
| tabIndex                 | `number \| undefined`                                |         |                                                                                                                                                                                                                                                                                                                                                                                        |
| title                    | `string \| undefined`                                |         |                                                                                                                                                                                                                                                                                                                                                                                        |
| rel                      | `string \| undefined`                                |         |                                                                                                                                                                                                                                                                                                                                                                                        |
| onChange                 | `ChangeEventHandler<T, Element> \| undefined`        |         |                                                                                                                                                                                                                                                                                                                                                                                        |

### AttributeEmptyDescription

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| title          | `string \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |

### AttributeLabel

| Prop           | Type                                                 | Default           | Description                                                                                                                                                                 |
| -------------- | ---------------------------------------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| width          | `number \| undefined`                                | `MIN_LABEL_WIDTH` | Width of the label cell in horizontal orientation, in pixels. Defaults to MIN_LABEL_WIDTH. Clamped to \[MIN_LABEL_WIDTH, MAX_LABEL_WIDTH]. Ignored in vertical orientation. |
| defaultChecked | `boolean \| undefined`                               |                   |                                                                                                                                                                             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |                   |                                                                                                                                                                             |
| autoFocus      | `boolean \| undefined`                               |                   |                                                                                                                                                                             |
| id             | `string \| undefined`                                |                   |                                                                                                                                                                             |
| tabIndex       | `number \| undefined`                                |                   |                                                                                                                                                                             |
| title          | `string \| undefined`                                |                   |                                                                                                                                                                             |
| rel            | `string \| undefined`                                |                   |                                                                                                                                                                             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |                   |                                                                                                                                                                             |

### AttributeLabelDescription

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| title          | `string \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |

### AttributeLabelInfo

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| title          | `string \| undefined`                                |         |             |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |

### AttributeValue

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| title          | `string \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |

## Explorer