# salla-order-details-options (https://docs.salla.dev/twilight/react/web-components/salla-order-details-options)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

<Callout title="Used inside salla-order-details">
  [`<salla-order-details>`](https://docs.salla.dev/twilight/react/web-components/salla-order-details) renders this component for you. You rarely use it directly.
</Callout>

The `salla-order-details-options` component renders the selected options of an order product as a name and value list.
Each value is shown according to its type: an image (linked), a color swatch, a file link, a color picker value with a copy button, a map with a "show location" button, or plain text.
It is used by `salla-order-details` and can be used on its own. It renders nothing when the list is empty.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-order-details-options>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaOrderDetailsOptions } from '@salla.sa/twilight-components-react/order-details-options';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { SallaOrderDetailsOptions } from '@salla.sa/twilight-components-react/order-details-options';

export function Example() {
  return (
    <SallaOrderDetailsOptions options='[{"id":1,"name":"Size","value":"L"},{"id":2,"name":"Color","value":"Red","color":"#ff0000"}]' />
  );
}
```

```html
<salla-order-details-options options='[{"id":1,"name":"Size","value":"L"},{"id":2,"name":"Color","value":"Red","color":"#ff0000"}]'></salla-order-details-options>
```

## Properties [#properties]

| Property           | Attribute           | Description                                                                                                                                                                                                                                    | Type                        | Default                    |
| ------------------ | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -------------------------- |
| `bordered`         | `bordered`          | When true (the default), the list is shown inside a bordered container.                                                                                                                                                                        | `boolean`                   | `true`                     |
| `options`          | `options`           | The options to display, as an array or a JSON string of an array. Each item is `{ id, name, value, display_value?, color?, is_image?, is_file?, is_color_picker?, is_map?, latitude?, longitude? }`. Invalid JSON is treated as an empty list. | `ProductOption[] \| string` |                            |
| `placeholderImage` | `placeholder-image` | Image URL used when an image option has an empty value.                                                                                                                                                                                        | `string`                    | `'images/placeholder.png'` |

## Related [#related]

Renders: [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button), [`<salla-map>`](https://docs.salla.dev/twilight/react/web-components/salla-map).

Used inside: [`<salla-order-details>`](https://docs.salla.dev/twilight/react/web-components/salla-order-details), [`<salla-order-details-multiple-bundle-product>`](https://docs.salla.dev/twilight/react/web-components/salla-order-details-multiple-bundle-product).