> ## Documentation Index
> Fetch the complete documentation index at: https://docs.supercycle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Target method options by name

> Use the data-supercycle-option-name attribute to style or hide specific method options from your theme

<Info>
  The attribute is rendered by the Methods app block, so this works in any theme where the block or the `x-methods` component is on the product page.
</Info>

Every option the Methods app block renders carries its admin name in a `data-supercycle-option-name` attribute. Use it to target specific options from your theme's CSS or JavaScript without relying on their position. It works for every method that renders option pickers: calendar, subscription, membership, resale, and trade-in.

***

## How it works

For each option on a method, Supercycle renders a `.supercycle-options__option` element and sets `data-supercycle-option-name` to the option's name, the value you entered in the Supercycle admin. An option named `1 month - insurance` renders as:

```html Rendered option theme={null}
<div
  class="supercycle-options__option"
  data-supercycle-option-name="1 month - insurance"
>
  ...
</div>
```

Match it with any standard attribute selector.

***

## Hide options with CSS

Hide every option whose name contains `insurance`:

```css Contains match theme={null}
.supercycle-options__option[data-supercycle-option-name*="insurance"] {
  display: none;
}
```

Match an exact option name:

```css Exact match theme={null}
.supercycle-options__option[data-supercycle-option-name="1 month - insurance"] {
  display: none;
}
```

<Tip>
  Option names come straight from the Supercycle admin, so a naming convention such as an `insurance-` prefix or a ` - insurance` suffix gives you a stable selector to reuse across your theme.
</Tip>

***

## Toggle options with JavaScript

Show insurance options only when a checkbox on the product page is ticked:

```html Insurance toggle theme={null}
<label>
  <input type="checkbox" id="include-insurance" />
  Include insurance
</label>

<script>
  const toggle = document.querySelector("#include-insurance");

  function applyVisibility() {
    const hide = !toggle.checked;
    document
      .querySelectorAll('.supercycle-options__option[data-supercycle-option-name*="insurance"]')
      .forEach((el) => {
        el.style.display = hide ? "none" : "";
      });
  }

  toggle.addEventListener("change", applyVisibility);
  applyVisibility();
</script>
```

<Note>
  Hidden options stay in the DOM but customers can't select them while they're hidden. Because Supercycle renders the attribute, it stays in sync when you rename or add options.
</Note>