依存フィールド

<%# Conditional fields demo: check the box to reveal the address fieldset. The
    controller toggles hidden / aria-hidden and disables the hidden inputs (so they
    drop out of submission); it listens for the change itself, so no consumer JS is
    needed. This demo only styles the layout. %>
<div class="conditional-fields-demo">
  <form data-controller="stimeo--conditional-fields">
    <label class="conditional-fields-demo__toggle">
      <input type="checkbox" data-stimeo--conditional-fields-target="trigger">
      <%= t("components.conditional_fields.demo.toggle") %>
    </label>
    <fieldset
      class="conditional-fields-demo__region"
      data-stimeo--conditional-fields-target="region"
      data-when-checked
      hidden>
      <legend><%= t("components.conditional_fields.demo.legend") %></legend>
      <label class="conditional-fields-demo__field">
        <span><%= t("components.conditional_fields.demo.street") %></span>
        <input type="text" name="street">
      </label>
      <label class="conditional-fields-demo__field">
        <span><%= t("components.conditional_fields.demo.city") %></span>
        <input type="text" name="city">
      </label>
    </fieldset>
  </form>
</div>

/*
 * Presentation-only styles for the conditional-fields demo.
 * The library toggles hidden / aria-hidden / disabled and data-visible; this CSS
 * only lays out the toggle and the revealed fieldset.
 */

.conditional-fields-demo {
  max-width: 28rem;
}

.conditional-fields-demo form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.conditional-fields-demo__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.conditional-fields-demo__region {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.conditional-fields-demo__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.conditional-fields-demo__field input {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font: inherit;
}