# gds-list-item-pattern-01

**Class**: `GdsListItemPattern01`

**Tag**: `<gds-list-item-pattern-01>`


## Properties

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `items` | `ListPatternItem[] \| undefined` | `-` | Multi-column content for the main slot. Each entry has an optional `label` and a required `value`. When set, takes precedence over the default slot.  Accepts: `Array<{ label?: string, value: string }>` |
| `label` | `string` | `-` | Optional label displayed above the items in the main slot. If not set, falls back to the first item's label (if available). |
| `selectable` | `boolean` | `-` | Enables a checkbox in the lead slot of the row. The checkbox can be toggled and emits a `toggle-change` event. |
| `checked` | `boolean` | `-` | Whether the checkbox is checked. Only relevant when `selectable` is true. |
| `indeterminate` | `boolean` | `-` | Whether the checkbox is in an indeterminate state. Only relevant when `selectable` is true. |
| `disabled` | `boolean` | `-` | Whether the checkbox is disabled. Only relevant when `selectable` is true. |
| `href` | `string \| undefined` | `-` | URL that the link points to Can be absolute, relative, or fragment identifier |
| `target` | `'_self' \| '_blank' \| '_parent' \| '_top' \| undefined` | `-` | Specifies where to open the linked document |
| `rel` | `string \| undefined` | `-` | Specifies the relationship between the current document and the linked document Automatically adds security-related values when target="_blank" |
| `download` | `string \| boolean \| undefined` | `-` | When present, indicates that the linked resource should be downloaded |
| `ping` | `string \| undefined` | `-` | Specifies a space-separated list of URLs to which, when the link is followed, POST requests with the body ping will be sent by the browser. |
| `'align-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-self` property. Supports all valid CSS `align-self` values. |
| `'justify-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-self` property. Supports all valid CSS `justify-self` values. |
| `'place-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-self` property. Supports all valid CSS `place-self` values. |
| `'grid-column'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-column` property. Supports all valid CSS grid-column values. Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column |
| `'grid-row'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-row` property. Supports all valid CSS `grid-row` values. |
| `'grid-area'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-area` property. Supports all valid CSS `grid-area` values. |
| `flex` | `string \| undefined` | `-` | Style Expression Property that controls the `flex` property. Supports all valid CSS `flex` values. |
| `order` | `string \| undefined` | `-` | Style Expression Property that controls the `order` property. Supports all valid CSS `order` values. |
| `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected.  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |


## Events

| Name | Type | Description |
|------|------|-------------|
| `input` | `Event` | Dispatched when the checkbox is checked or unchecked. |
| `change` | `Event` | Dispatched when the checkbox is checked or unchecked. |


## Slots

| Name | Description |
|------|-------------|
| `(default)` | Main content slot. Rendered after `items` columns when `items` is set, or as the sole main content when `items` is not set. |
| `lead` | Lead slot content. Ignored when `selectable` is set (checkbox takes precedence). |


## Routing Support

This component supports routing via the `href` property.