django/shadcn-ui

Field

Lays out a label, a control, its description and its errors.

We will never share your address.

Installation

uvx django_shadcn@latest add field

Usage

<c-field>
  <c-field.label for="email">Email</c-field.label>
  <c-input id="email" type="email" />
  <c-field.description>We will never share your address.</c-field.description>
</c-field>

Form covers the same ground with a smaller surface. Field is the newer shadcn/ui component: more parts, orientations, and a group that lays out several fields at once.

Examples

Group

A short paragraph about yourself. 

<c-field.group>
  <c-field>...</c-field>
  <c-field>...</c-field>
</c-field.group>

Horizontal

You agree to our terms of service. 

<c-field orientation="horizontal">
  <c-checkbox id="terms" />
  <c-field.content>
    <c-field.label for="terms">Accept the terms</c-field.label>
    <c-field.description>You agree to our terms.</c-field.description>
  </c-field.content>
</c-field>

Fieldset and legend

Notifications

Choose how you want to be reached. 

<c-field.set>
  <c-field.legend>Notifications</c-field.legend>
  <c-field.description>Choose how you want to be reached.</c-field.description>
  <c-field.group>...</c-field.group>
</c-field.set>

Separator

or 
<c-field.separator>or</c-field.separator>

Errors

<c-field.error>Password is too short.</c-field.error>

<!-- or straight from a Django form field -->
<c-field.error :errors="form.handle.errors" />

Title inside a label

<c-field.label>
  <c-field orientation="horizontal">
    <c-checkbox id="pro" />
    <c-field.content>
      <c-field.title>Pro plan</c-field.title>
      <c-field.description>Priority support.</c-field.description>
    </c-field.content>
  </c-field>
</c-field.label>

Notes

Upstream, FieldError takes either children or an array of errors and renders a list when there is more than one. Here errors takes a Django form field's error list directly, with the same rule: one error inline, several as a bulleted list. Nothing renders when both are empty.