Champ

VField place un libellé, une aide et un message d’erreur autour de n’importe quel contrôle. Son slot fournit fieldProps à lier sur le contrôle.

Utilisation

vue

We send the receipt to this address.

<script setup lang="ts">
import { ref } from 'vue'
import { VField, VInput } from 'vectis-ui'

const email = ref('')
</script>

<template>
  <VField v-slot="{ fieldProps }" label="Email" hint="We send the receipt to this address.">
    <VInput v-bind="fieldProps" v-model="email" type="email" />
  </VField>
</template>

Exemples

Contrôle natif

Les éléments natifs et les composants tiers prennent les mêmes fieldProps que les contrôles de la bibliothèque.

vue

Country

<script setup lang="ts">
import { VField } from 'vectis-ui'
</script>

<template>
  <VField v-slot="{ fieldProps }" label="Country">
    <!-- The label's `for` matches the id inside fieldProps, which the rule cannot follow. -->
    <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
    <select v-bind="fieldProps">
      <option>France</option>
      <option>Belgium</option>
      <option>Canada</option>
    </select>
  </VField>
</template>

Erreur

error affiche un message à la place de l’aide, sans agrandir le champ, et marque le contrôle comme invalide. Le message est annoncé quand il apparaît. required ajoute un astérisque et transmet required au contrôle.

vue

Leave the field to check it.

<script setup lang="ts">
import { computed, ref } from 'vue'
import { VField, VInput } from 'vectis-ui'

const email = ref('')
const touched = ref(false)

const error = computed(() =>
  touched.value && !email.value.includes('@')
    ? 'Enter an email address that contains an @.'
    : undefined,
)
</script>

<template>
  <VField
    v-slot="{ fieldProps }"
    label="Email"
    hint="Leave the field to check it."
    :error="error"
    required
  >
    <VInput v-bind="fieldProps" v-model="email" @blur="touched = true" />
  </VField>
</template>

Libellé à côté du contrôle

labelPosition="start" place le libellé dans sa propre colonne. Dans un champ étroit, le libellé repasse au-dessus du contrôle.

vue

Full name

About you

<script setup lang="ts">
import { VField, VInput, VTextarea } from 'vectis-ui'
</script>

<template>
  <div class="form">
    <VField v-slot="{ fieldProps }" label="Full name" label-position="start" required>
      <VInput v-bind="fieldProps" autocomplete="name" />
    </VField>
    <VField v-slot="{ fieldProps }" label="About you" label-position="start">
      <VTextarea v-bind="fieldProps" />
    </VField>
  </div>
</template>

<style scoped>
.form {
  display: grid;
  flex: 1;
  gap: var(--vectis-space-4);
}
</style>

Libellé masqué

hideLabel masque le libellé visuellement. Il nomme toujours le contrôle pour les lecteurs d’écran.

vue

<script setup lang="ts">
import { VField, VInput } from 'vectis-ui'
import { search } from 'vectis-ui/icons'
</script>

<template>
  <VField v-slot="{ fieldProps }" label="Search" hide-label>
    <VInput v-bind="fieldProps" type="search" :icon-start="search" />
  </VField>
</template>

API

Props

Prop	Type	Défaut
`label`	`string`	aucune
Libellé lié au contrôle par `for`.
`hint`	`string`	aucune
Texte d’aide sous le contrôle, lié par `aria-describedby`.
`error`	`string`	aucune
Message d’erreur affiché à la place de l’aide. Pose `aria-invalid`, est lié par `aria-describedby` et est annoncé quand il apparaît.
`required`	`boolean`	`false`
Ajoute un astérisque après le libellé et transmet `required` au contrôle.
`hideLabel`	`boolean`	`false`
Masque le libellé visuellement tout en le gardant comme nom accessible.
`labelPosition`	`FieldLabelPosition'top' \| 'start'`	`'top'`
Place le libellé au-dessus du contrôle ou à côté.

Slots

Slot	Type
`default`	`{ fieldProps: FieldControlProps; }`
Le contrôle. Liez `fieldProps` : id, descriptions, état invalide, `required` et les attributs posés sur le champ autres que `class` et `style`.

Types

Types utilisés dans les tables d’API. Importez les types exportés depuis vectis-ui.

export type FieldControlProps = {
  id: string
  'aria-describedby'?: string
  'aria-invalid'?: 'true'
  required?: true
} & Record<string, unknown>

Variables CSS

Token	Valeur
`--vectis-control-size-field-label`	`10rem`
`--vectis-control-size-field-control-min`	`16rem`