Attendance

An option group card collects a decision along with its follow-up choices. Radio options set the main answer while nested checkboxes refine it, and picking an option that makes the sub-options irrelevant disables them. RSVP forms, privacy settings, and survey questions all branch like this.

<div class="card">
  <div class="card-header">
    <div class="card-title">Attendance</div>
    <div class="card-description">Choose who can attend your event.</div>
  </div>
  <div class="card-content">
    <div
      class="group/att field-group gap-4"
      role="radiogroup"
      aria-label="Attendance"
    >
      <div class="field field-horizontal">
        <input
          type="radio"
          class="radio"
          id="lg-att-public"
          name="lg-attendance"
          checked=""
        />
        <div class="field-content">
          <label class="label" for="lg-att-public">Public</label>
          <p class="field-description">
            Tickets will be available to the general public.
          </p>
          <div
            class="field-group mt-4 gap-4 transition-opacity group-has-[#lg-att-private:checked]/att:pointer-events-none group-has-[#lg-att-private:checked]/att:opacity-50"
          >
            <div class="field field-horizontal">
              <input
                type="checkbox"
                class="checkbox"
                id="lg-att-inperson"
                checked=""
              />
              <div class="field-content">
                <label class="label" for="lg-att-inperson">In-person</label>
                <p class="field-description">
                  Attendees will be at the event in person.
                </p>
              </div>
            </div>
            <div class="field field-horizontal">
              <input type="checkbox" class="checkbox" id="lg-att-online" />
              <div class="field-content">
                <label class="label" for="lg-att-online">Online</label>
                <p class="field-description">
                  Attendees will only be able to view the event online.
                </p>
              </div>
            </div>
            <div class="field field-horizontal">
              <input type="checkbox" class="checkbox" id="lg-att-recorded" />
              <div class="field-content">
                <label class="label" for="lg-att-recorded">Recorded</label>
                <p class="field-description">
                  A recording will be available after the event.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="field field-horizontal">
        <input
          type="radio"
          class="radio"
          id="lg-att-private"
          name="lg-attendance"
        />
        <div class="field-content">
          <label class="label" for="lg-att-private">Private</label>
          <p class="field-description">
            Tickets are not available to the general public.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Browse more card examples.