{# @description daisyUI's fieldset: a legend naming a group of controls, the group itself, a description line and error messages. The legend names the group, not a control inside it, so a fieldset holding one control still gives that control its own c-form.label. With id, the description carries <id>-description and the errors carry <id>-errors, so a control names both in aria-describedby; without id, neither is emitted. A description or error message containing HTML is escaped; a named slot of the same name takes markup instead. A named slot filled with whitespace only still renders its element. See the fieldset gallery entry for a composition naming every control. #}
{# @prop legend:text | description:"Group heading, rendered as the first child. Also fillable as the legend slot." #}
{# @prop description:text | description:"Help text rendered as a description line after the slot. Also fillable as the description slot. Empty renders nothing." #}
{# @prop errors:text | description:"A string or a list of strings (a Django ErrorList works), each rendered as an error-coloured description line after the description. Also fillable as the errors slot. Empty renders nothing." #}
{# @prop id:text | description:"Fieldset id. When given, the description and errors carry <id>-description and <id>-errors for aria-describedby." #}
{# @prop class:text | description:"Extra classes added to the fieldset." #}
{# @slot:legend Account — The group heading, as an alternative to the legend attribute. #}
{# @slot <c-form.fieldset id="account-email" description="We only use this to send receipts." errors="Enter a valid email address."><c-form.label for="account-email-input" text="Email" /><c-form.input id="account-email-input" type="email" required variant="error" aria-invalid="true" aria-describedby="account-email-description account-email-errors" /></c-form.fieldset><c-form.label floating text="Full name"><c-form.input placeholder="Jane Doe" /></c-form.label><c-form.label for="account-website" text="Website" /><c-form.input id="account-website" type="url"><c-slot name="start"><span class="label">https://</span></c-slot></c-form.input><c-form.input type="search" aria-label="Search" placeholder="Search"><c-slot name="start"><c-icon name="bi bi-search" aria-hidden="true" /></c-slot><c-slot name="end"><c-kbd>Enter</c-kbd></c-slot></c-form.input><c-form.label for="account-plan" text="Plan" /><c-form.input id="account-plan" value="Free" disabled /><c-form.label for="account-bio" text="Bio" /><c-form.textarea id="account-bio">Building forms with daisy-cotton.</c-form.textarea><c-form.label for="account-comments" text="Comments" /><c-form.textarea id="account-comments" variant="error" aria-invalid="true"></c-form.textarea><c-form.label for="account-notes" text="Notes" /><c-form.textarea id="account-notes" disabled>Nothing yet.</c-form.textarea><c-form.label for="account-country" text="Country" /><c-form.select id="account-country"><option value="us">United States</option><option value="ca">Canada</option></c-form.select><c-form.select aria-labelledby="account-quantity-label"><c-slot name="start"><span class="label" id="account-quantity-label">Quantity</span></c-slot><option value="1">1</option><option value="2">2</option></c-form.select><c-form.label text="Role" floating><c-form.select><option value="dev">Developer</option><option value="designer">Designer</option></c-form.select></c-form.label><c-form.label for="account-shipping" text="Shipping method" /><c-form.select id="account-shipping" variant="error" aria-invalid="true"><option value="standard">Standard</option><option value="express">Express</option></c-form.select><c-form.label for="account-referral" text="Referral source" /><c-form.select id="account-referral" disabled><option value="friend">Friend</option><option value="search">Search</option></c-form.select><c-form.fieldset legend="Delivery method"><c-form.label text="Standard"><c-form.radio name="account-delivery-method" value="standard" checked /></c-form.label><c-form.label text="Express"><c-form.radio name="account-delivery-method" value="express" disabled /></c-form.label><c-form.label text="Overnight"><c-form.radio name="account-delivery-method" value="overnight" variant="error" aria-invalid="true" /></c-form.label></c-form.fieldset><c-form.label text="Accept terms"><c-form.checkbox checked /></c-form.label><c-form.label text="Share usage data"><c-form.checkbox variant="error" aria-invalid="true" /></c-form.label><c-form.label text="Send me offers"><c-form.checkbox disabled /></c-form.label><c-form.label text="Dark mode"><c-form.toggle checked /></c-form.label><c-form.label text="Beta features"><c-form.toggle variant="error" aria-invalid="true" /></c-form.label><c-form.label text="Auto-save"><c-form.toggle disabled /></c-form.label><c-form.label text="Resume"><c-form.file_input name="account-resume" /></c-form.label><c-form.label text="Cover letter"><c-form.file_input variant="error" aria-invalid="true" /></c-form.label><c-form.label text="Portfolio"><c-form.file_input disabled /></c-form.label><c-form.label text="Volume"><c-form.range name="account-volume" value="40" /></c-form.label><c-form.label text="Temperature"><c-form.range vertical /></c-form.label><c-form.label text="Brightness"><c-form.range variant="error" aria-invalid="true" /></c-form.label><c-form.label text="Contrast"><c-form.range disabled /></c-form.label><c-form.fieldset legend="Status"><c-form.filter name="account-status" :options="['Open', 'Closed', 'Archived']" /><c-form.filter name="account-ticket-state" label="Ticket state" value="c" :options="[('o', 'Open'), ('c', 'Closed'), ('a', 'Archived')]" /><c-form.filter name="account-filter-primary" label="Primary small" variant="primary" size="sm" value="Open" :options="['Open', 'Closed']" /><c-form.filter name="account-filter-accent" label="Accent large" variant="accent" size="lg" value="Open" :options="['Open', 'Closed']" /></c-form.fieldset><c-form.fieldset legend="Delivery date"><c-form.calendar value="2026-09-15" min="2026-09-01" max="2026-09-30" previous_icon="bi bi-chevron-left" next_icon="bi bi-chevron-right" /><c-form.calendar range months="2" previous_icon="bi bi-chevron-left" next_icon="bi bi-chevron-right" /></c-form.fieldset><c-form.fieldset legend="Two-step verification"><c-form.otp name="account-code" label="Code from your authenticator app" /><c-form.otp name="account-code-short" length="4" joined label="Four-digit code" /><c-form.otp name="account-code-locked" label="Code sent by text message" disabled /></c-form.fieldset><c-form.fieldset legend="Your rating"><c-form.rating name="account-rating" label="Rate your visit" clearable /><c-form.rating name="account-rating-half" label="Half-star rating" half value="3.5" /><c-form.rating name="account-rating-locked" label="Locked rating" value="2" disabled /><c-form.rating readonly value="4" /></c-form.fieldset> — A form section showing every control labelled, invalid and disabled: a required, invalid email field naming both derived ids in aria-describedby, a floating-labelled field, a labelled field with prefixed start content, a labelled search field with an icon and a keyboard hint, and a labelled disabled field; a labelled textarea with an invalid and a disabled example, a labelled select, a select named by its own start content, a floating-labelled select, and an invalid and a disabled select; a nested fieldset with a legend holding three labelled radios sharing a name, one checked and one disabled and one invalid, then a labelled checked checkbox, an invalid one and a disabled one, and a labelled checked toggle, an invalid one and a disabled one; a labelled file input, an invalid one and a disabled one, then a labelled range with a value, a labelled vertical range, an invalid one and a disabled one; then a nested fieldset with a legend holding four filters: one named by the legend with nothing chosen, a labelled one with three value and label options and one chosen, and a primary small one and an accent large one; then a nested fieldset with a legend holding a single date calendar with a chosen date, a minimum and a maximum, and a two-month range calendar, both with icon font paging icons; then a nested fieldset with a legend holding a labelled six-digit one-time code, a joined four-digit one and a disabled one; then a nested fieldset with a legend holding a clearable rating, a half-star rating with a value, a disabled rating with a value and a read-only rating with a value. #}
{# @slot:description Changes apply everywhere you sign in. — Help text, as an alternative to the description attribute. The slot content is placed inside one description line, so it takes inline markup only. #}
{# @slot:errors — Error messages, as an alternative to the errors attribute. The slot content is placed inside one error line, so it takes inline markup only. #}
<c-vars legend="" description="" errors="" id="" class="" />
{# djlint:off #}
<fieldset class="fieldset {{ class }}"{% if id %} id="{{ id }}"{% endif %} {{ attrs }}>{% if legend %}<legend class="fieldset-legend">{{ legend }}</legend>{% endif %}{{ slot }}{% if description %}<p class="label"{% if id %} id="{{ id }}-description"{% endif %}>{{ description }}</p>{% endif %}{% if errors %}<div class="grid"{% if id %} id="{{ id }}-errors"{% endif %}>{% if errors == errors|stringformat:"s" %}<p class="label text-error">{{ errors }}</p>{% else %}{% for error in errors %}<p class="label text-error">{{ error }}</p>{% endfor %}{% endif %}</div>{% endif %}</fieldset>
{# djlint:on #}