DocsComposantsField

Field

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

dépend de input4 fichiers

<div class="w-full max-w-sm">
  <pb-ui.field>
    <pb-ui.field-label for="username">Nom d'utilisateur</pb-ui.field-label>
    <pb-ui.input id="username" placeholder="ada" />
    <pb-ui.field-description>Choisissez un nom unique pour votre compte.</pb-ui.field-description>
  </pb-ui.field>
</div>

Installation

pyblade-ui add field

Installez les dépendances
input.

Copiez ces fichiers dans votre projet

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>

Adaptez le chemin à votre projet
Le dossier components est celui déclaré dans pyblade.toml.

Utilisation

Les balises <pb-ui.field> <pb-ui.field-label> <pb-ui.field-description> <pb-ui.field-error> sont disponibles dans tous vos 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>

Exemples

Avec une erreur

<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>Utilisé pour vous connecter.</pb-ui.field-description>
    <pb-ui.field-error>Entrez une adresse email valide.</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">Recevoir la newsletter</pb-ui.field-label>
    <pb-ui.switch id="news" checked />
  </pb-ui.field>
</div>

Avec les erreurs du formulaire (@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>Utilisé pour vous connecter.</pb-ui.field-description>
    <pb-ui.field-error :errors="form.errors" name="email" />
  </pb-ui.field>
</div>

Props

<pb-ui.field>

Prop	Défaut
orientation	'vertical'
invalid	False
errors	None
name	''

<pb-ui.field-error>

Prop	Défaut
errors	None
name	''

Tout autre attribut (class, id, x-on:click, hx-post…) est transmis à l'élément racine ; vos classes Tailwind l'emportent sur celles du composant.

‹ Label Select ›