Kaiko UI Kaiko UI

Form Integration

New

Django form integration helpers that wrap BoundFields with Kaiko UI layout: labels, error messages, and help text.

API Reference

c-form.field

Attribute Description Type Default
field Django BoundField instance (e.g. form.email). Provides label, errors, and help text automatically. BoundField —
label Override the field label. When omitted, reads from field.label. string ""
hint Override the field's help text. When omitted, uses field.help_text. string ""
show_errors When True, renders field validation errors below the widget boolean True
slot Optional widget markup. When provided it replaces {{ field }} rendering — supply a fully-styled DaisyUI widget while keeping the label and error layout. HTML content —

c-form.errors

Attribute Description Type Default
errors Error string list — pass form.non_field_errors(). Renders nothing when the list is empty. list []
color Alert color theme for the error block string "error"

Accessibility

Label association: c-form.field renders a <label> linked to the widget via matching for/id attributes, so screen readers announce the label when the input is focused.

Error messages: validation errors from field.errors are rendered as visible text below the widget. For programmatic association, add aria-describedby to the widget pointing at the error element.

Non-field errors: c-form.errors renders a visually distinct alert block above the form fields so errors are immediately visible without needing to scan individual fields.

Examples

Usage 


<form method="post">
  {% csrf_token %}
  <c-form.errors :errors="form.non_field_errors()" />
  <c-form.field :field="form.email" />
  <c-form.field :field="form.password" />
  <c-button type="submit" color="primary">Sign in</c-button>
</form>

Text Input via Slot

We'll never share your email.
<c-form.field label="Email address" :required=True hint="We'll never share your email.">
  <input type="email" name="email" class="input w-full" placeholder="you@example.com" />
</c-form.field>

Select via Slot 

<c-form.field label="Role">
  <select name="role" class="select w-full">
    <option value="" disabled selected>Choose a role</option>
    <option value="admin">Admin</option>
    <option value="editor">Editor</option>
    <option value="viewer">Viewer</option>
  </select>
</c-form.field>

Field with Validation Errors

Ensure this value has at least 3 characters.

<!-- With a real BoundField — errors render automatically -->
<c-form.field :field="form.username" />

<!-- Simulated inline error in slot -->
<c-form.field label="Username" :required=True>
  <input type="text" name="username" class="input input-error w-full" />
  <p class="label text-error">Ensure this value has at least 3 characters.</p>
</c-form.field>

Textarea via Slot

Maximum 500 characters.
<c-form.field label="Message" hint="Maximum 500 characters.">
  <textarea name="message" class="textarea w-full" rows="4"
    placeholder="Type your message here..."></textarea>
</c-form.field>

Form-Level Errors 

<!-- Pass form.non_field_errors() in real forms -->
<c-form.errors :errors="form.non_field_errors()" />

<!-- Color variants -->
<c-form.errors color="error"   :errors="['Invalid credentials.']" />
<c-form.errors color="warning" :errors="['Session expires in 5 minutes.']" />
<c-form.errors color="info"    :errors="['Submitting will log you out.']" />

Full Form Composition

Sign in

Forgot your password? Contact support.
<form method="post">
  {% csrf_token %}

  <c-form.errors :errors="form.non_field_errors()" />

  <c-form.field :field="form.email" />
  <c-form.field :field="form.password" hint="Forgot your password? Contact support." />

  <c-button type="submit" color="primary" class="w-full">Sign in</c-button>
</form>