text to image component attributes

Thank you so much. This put me on the right track. Ended up not being too bad. I used javascript on the website to futz with the list directly after it was created. Probably not the most ideal way to do this.

So what this does is shortly after the page loads runs through each option in the settings.userInputs.artStyle.options list and looks to see if nsfw = true. If so it adds a data-nsfw tag to the option entry itself on the html side. It then stores the entire option list in artStyleDropdown.

When the checkbox is clicked the toggleNSFW function runs. If the check box is ticked it displays all the entries that were initially saved when the page was loaded. If it's unticked it'll filter out any of the options with data-nsfw set to true then assigns the resulting list back to the dropdown.

For the newbies like me in the html side below the data-name="artStyle"] is finding the drop down control related to the artStyle list. This should generally match the name of the list.

Here's the javascript I used:

<span>
  <input type="checkbox" checked oninput="toggleNSFW(this);"/> Show NSFW options.
</span>

<script>
let allArtStyles = [];
function toggleNSFW(checkbox) {
  const artStyleDropdown = document.querySelector('select[data-name="artStyle"]');
  if (!artStyleDropdown) return;

  // Save current selection so we don't lose it if it's safe
  const currentVal = artStyleDropdown.value;

  // Clear the dropdown completely
  artStyleDropdown.innerHTML = "";

  // Re-add only the allowed options
  allArtStyles.forEach(option => {
    const isNSFW = option.getAttribute('data-nsfw') === 'true';
    if (checkbox.checked || !isNSFW) {
      artStyleDropdown.add(option);
    }
  });

  //Try to restore the previous selection
  artStyleDropdown.value = currentVal;
  
  // If the previous selection was NSFW and is now gone, default to index 0
  if (artStyleDropdown.selectedIndex === -1) {
    artStyleDropdown.selectedIndex = 0;
  }
}

setTimeout(() => {

  var artStyleDropdown = document.querySelector('select[data-name="artStyle"]');

  if (artStyleDropdown) {
    const styles = settings.userInputs.artStyle.options;
    Array.from(artStyleDropdown).forEach(option => {
      const styleName = option.textContent.trim();
      const isNSFW = styles[styleName]?.nsfw === true;
      // Set the attribute based on the boolean check
      option.setAttribute('data-nsfw', isNSFW);
    });
    // Save a copy of all options before we start removing them
    allArtStyles = Array.from(artStyleDropdown.options);
  } 
}, 100);

I added an entry in the list to tag which entries to show and hide. Here it's the nsfw = true/false. In this example I'm labeling anime as nsfw.

    artStyle
      label = 🎨Art Style
      type = select
      width = 25vw
      height = 5vh
      remember = true
      options
        //https://perchance.org/t2i-styles#edit
        Default
          prompt = [if (input.description != "" || null) {input.description} else {""}]
          negative = [if (input.negative != "" || null) {input.negative} else {""}]
        No style
          prompt = [input.description]
          negative =[input.negative]
        Cartoon
          prompt = [input.description], cartoon-style art, superb bold linework, nice colors and composition
          negative = [input.negative], bad art, boring art, hilariously bad drawings, bad 3D render, 
        Anime   
          nsfw = true
          prompt = [input.description], intricate detail, hyper-anime, (anime), (masterpiece)
          negative = [input.negative], photography, low-quality, deformed, (text), blurry