Skip to content

Options communes ​

Appliquées à la plupart des contrôles (label, description, lecture seule, erreurs).

API ​

NameTypeDefaultDescription
placeholderString—Placeholder du champ (là où le composant Nuxt UI le supporte).
focusBoolean—Autofocus au montage.
readonlyBoolean—Champ en lecture seule. Aussi activé si le schema a readOnly: true ou si config.readonly est vrai.
hideRequiredAsteriskBoolean—Masque l’astérisque des champs requis.
showUnfocusedDescriptionBoolean—Affiche la description du schema même hors focus.
hideDescriptionBoolean—Supprime totalement la description.
clearOnHideBooleantrueSi une rule HIDE s’applique, remet la valeur à default / undefined. Mettre false pour conserver la valeur.
enableFilterErrorsBeforeTouchBoolean—Masque les erreurs de validation tant que le champ n’a pas été touché.
clearableBoolean—Comportement « clear » (notamment rating : re-clic pour vider).
leadingIconString—Icône Nuxt Icon avant le contrôle (ex. i-lucide-mail).
trailingIconString—Icône Nuxt Icon après le contrôle (ex. i-lucide-check).
iconPlacement'outside' | 'inside''outside'outside : à côté du widget. inside : dans le chrome Nuxt UI (UInput, USelect, …).
stylesPartial<Theme>—Surcharge locale des classes Tailwind du thème (voir Personnalisation).
formFieldObject—Props pass-through vers UFormField (voir Pass-through).

En mode inside, le pass-through reste prioritaire (options.input.leadingIcon, …). Les contrôles sans chrome d’icônes (checkbox, slider, number, …) ignorent inside — utilisez outside pour ceux-là.

Exemples ​

Description toujours visible + sans astérisque ​

json
{
  "type": "Control",
  "scope": "#/properties/bio",
  "options": {
    "showUnfocusedDescription": true,
    "hideRequiredAsterisk": true,
    "placeholder": "Quelques mots…"
  }
}

Lecture seule ​

json
{
  "type": "Control",
  "scope": "#/properties/id",
  "options": { "readonly": true }
}

Conserver la valeur quand le contrôle est masqué ​

json
{
  "type": "Control",
  "scope": "#/properties/secret",
  "rule": {
    "effect": "HIDE",
    "condition": {
      "scope": "#/properties/reveal",
      "schema": { "const": false }
    }
  },
  "options": { "clearOnHide": false }
}

Autofocus ​

json
{
  "type": "Control",
  "scope": "#/properties/email",
  "options": { "focus": true, "placeholder": "vous@exemple.fr" }
}

Icônes avant / après le contrôle ​

À côté du widget (outside, défaut) :

json
{
  "type": "Control",
  "scope": "#/properties/email",
  "options": {
    "leadingIcon": "i-lucide-mail",
    "trailingIcon": "i-lucide-check",
    "placeholder": "vous@exemple.fr"
  }
}

Dans le champ Nuxt UI (inside) :

json
{
  "type": "Control",
  "scope": "#/properties/email",
  "options": {
    "leadingIcon": "i-lucide-mail",
    "trailingIcon": "i-lucide-check",
    "iconPlacement": "inside",
    "placeholder": "vous@exemple.fr"
  }
}

Voir aussi l’exemple Leading / Trailing Icons (prepend-append-slots) dans le playground.

Publié sous licence BSD-3-Clause.