SettingsSection
Implemented BlocksResponsive settings section with form content and optional footer.
A wdj composition built from the existing component library.
Presentation commands show demo feedback. Read the interaction guide to connect real actions.
Preferences form
Show template
{% load wdj %}
<form x-data="{ saved: false }" @submit.prevent="saved = true" @input="saved = false">
{% wdj_component "wdj/components/settings_section.html" title="Workspace preferences" description="Change local demo preferences. Production saves require a Django POST endpoint." %}
{% include "wdj/components/input.html" with id="block-workspace" name="workspace" label="Workspace name" value="Demo workspace" required=True only %}
<div class="flex flex-wrap items-center gap-3">
{% include "wdj/components/button.html" with label="Save preferences" variant="primary" type="submit" only %}
<p role="status" class="text-base text-kumo-subtle" x-text="saved ? 'Demo preferences updated locally.' : 'Changes are local to this preview.'"></p>
</div>
{% endwdj_component %}
</form>
Access preferences
Access preferences
Use a native switch for local state. Enforce access rules on the server.
Show template
{% load wdj %}
<div x-data="{ enabled: false }" @change="enabled = $event.target.checked">
{% wdj_component "wdj/components/settings_section.html" title="Access preferences" description="Use a native switch for local state. Enforce access rules on the server." %}
{% include "wdj/components/switch.html" with id="block-reviews" name="require_review" label="Require a review" only %}
<p role="status" class="text-base text-kumo-subtle" x-text="enabled ? 'Demo review preference enabled.' : 'Demo review preference disabled.'"></p>
{% endwdj_component %}
</div>
Danger section
Remove a resource
A reusable danger section. This preview only confirms the typed name.
Show template
{% load wdj %}
{% wdj_component "wdj/components/settings_section.html" title="Remove a resource" description="A reusable danger section. This preview only confirms the typed name." variant="danger" %}
{% include "wdj/components/delete_resource.html" with id="block-delete-project" resource_type="project" resource_name="demo-project" delete_button_text="Delete demo project" demo=True only %}
{% endwdj_component %}
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | unset | Title; pass the documented value shown in the examples. |
| description | string | unset | Description; pass the documented value shown in the examples. |
| variant | string | component-specific | Variant; pass the documented value shown in the examples. |
| slot | string / HTML slot | unset | Rich HTML supplied by the wdj_component block tag, rendered in an isolated context. |
| footer | string / HTML slot | unset | Footer; pass the documented value shown in the examples. |
| attrs | dict | {} | Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only. |
| class | string | "" | Class; pass the documented value shown in the examples. |