DocsComponentsField

Field

A form field: label, control, description and error, wired to @error.

depends on input4 files

<div class="w-full max-w-sm">
  <pb-ui.field>
    <pb-ui.field-label for="username">Username</pb-ui.field-label>
    <pb-ui.input id="username" placeholder="ada" />
    <pb-ui.field-description>Choose a unique name for your account.</pb-ui.field-description>
  </pb-ui.field>
</div>

Installation

pyblade-ui add field

Install the dependencies
input.

Copy these files into your project

components/ui/field.html

@props({'orientation': 'vertical', 'invalid': False, 'errors': None, 'name': ''})
<div role="group" data-slot="field" data-orientation="{{ orientation }}" data-invalid="{{ str(bool(invalid)).lower() }}" data-error="@if(errors and name)@error(name)true@enderror@endif" {{ attributes.cn(
    "group/field flex w-full gap-3 data-[invalid=true]:text-destructive data-[error=true]:text-destructive",
    {
        'vertical': 'flex-col [&>*]:w-full',
        'horizontal': 'flex-row items-center [&>[data-slot=field-label]]:flex-auto',
    }[orientation],
) }}>{{ slot }}</div>

components/ui/field_label.html

<label data-slot="field-label" {{ attributes.cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium select-none group-data-[disabled=true]/field:opacity-50") }}>{{ slot }}</label>

components/ui/field_description.html

<p data-slot="field-description" {{ attributes.cn("text-sm leading-normal font-normal text-muted-foreground group-data-[invalid=true]/field:hidden group-data-[error=true]/field:hidden [&>a]:underline [&>a]:underline-offset-4") }}>{{ slot }}</p>

components/ui/field_error.html

@props({'errors': None, 'name': ''})
<p role="alert" data-slot="field-error" {{ attributes.cn("text-sm font-normal text-destructive empty:hidden") }}>@if(errors and name)@error(name){{ message }}@enderror@endif{{ slot }}</p>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tags <pb-ui.field> <pb-ui.field-label> <pb-ui.field-description> <pb-ui.field-error> are available in all your templates.

<pb-ui.field :errors="form.errors" name="email">
  <pb-ui.field-label for="email">Email</pb-ui.field-label>
  <pb-ui.input id="email" name="email" type="email" />
  <pb-ui.field-description>We never share it.</pb-ui.field-description>
  <pb-ui.field-error :errors="form.errors" name="email" />
</pb-ui.field>

Examples

With an error

<div class="w-full max-w-sm">
  <pb-ui.field invalid>
    <pb-ui.field-label for="mail">Email</pb-ui.field-label>
    <pb-ui.input id="mail" value="ada@" aria-invalid="true" />
    <pb-ui.field-description>Used to sign in.</pb-ui.field-description>
    <pb-ui.field-error>Enter a valid email address.</pb-ui.field-error>
  </pb-ui.field>
</div>

Horizontal

<div class="w-full max-w-sm">
  <pb-ui.field orientation="horizontal">
    <pb-ui.field-label for="news">Subscribe to the newsletter</pb-ui.field-label>
    <pb-ui.switch id="news" checked />
  </pb-ui.field>
</div>

With form errors (@error)

<div class="w-full max-w-sm">
  <pb-ui.field :errors="form.errors" name="email">
    <pb-ui.field-label for="femail">Email</pb-ui.field-label>
    <pb-ui.input id="femail" name="email" value="ada@" aria-invalid="true" />
    <pb-ui.field-description>Used to sign in.</pb-ui.field-description>
    <pb-ui.field-error :errors="form.errors" name="email" />
  </pb-ui.field>
</div>

Props

<pb-ui.field>

Prop	Default
orientation	'vertical'
invalid	False
errors	None
name	''

<pb-ui.field-error>

Prop	Default
errors	None
name	''

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Label Select ›