FormField

A container for form elements with built-in validation and error management.

Nuxt UI

Git

Usage

Wrap any form component with a FormField. Used in a Form, it provides validation and error handling.

Label

Use the label prop to set the label for the form control.

INFO

The label for attribute and the form control are associated with a unique id if not provided.

Details

<script setup lang="ts">
export interface ExampleProps {
  label?: string
}

withDefaults(defineProps<ExampleProps>(), {
  label: 'Email'
})
</script>

<template>
  <B24FormField :label="label">
    <B24Input placeholder="Enter your email" />
  </B24FormField>
</template>

When using the required prop, an asterisk is be added next to the label.

Details

<script setup lang="ts">
export interface ExampleProps {
  label?: string
  isRequired?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  label: 'Email',
  isRequired: true
})
</script>

<template>
  <B24FormField
    :label="label"
    :required="isRequired"
  >
    <B24Input placeholder="Enter your email" />
  </B24FormField>
</template>

Description

Use the description prop to provide additional information below the label.

Details

<script setup lang="ts">
export interface ExampleProps {
  description?: string
}

withDefaults(defineProps<ExampleProps>(), {
  description: 'We\'ll never share your email with anyone else.'
})
</script>

<template>
  <B24FormField
    :description="description"
    label="Email"
  >
    <B24Input placeholder="Enter your email" />
  </B24FormField>
</template>

Hint

Use the hint prop to display a hint message next to the label.

Details

<script setup lang="ts">
export interface ExampleProps {
  hint?: string
}

withDefaults(defineProps<ExampleProps>(), {
  hint: 'Optional'
})
</script>

<template>
  <B24FormField
    :hint="hint"
    label="Email"
    description="We'll never share your email with anyone else."
  >
    <B24Input placeholder="Enter your email" />
  </B24FormField>
</template>

Help

Use the help prop to display a help message below the form control.

Details

<script setup lang="ts">
export interface ExampleProps {
  help?: string
}

withDefaults(defineProps<ExampleProps>(), {
  help: 'Please enter a valid email address.'
})
</script>

<template>
  <B24FormField
    :help="help"
    label="Email"
    description="We'll never share your email with anyone else."
    hint="Optional"
  >
    <B24Input placeholder="Enter your email" />
  </B24FormField>
</template>

Error

Use the error prop to display an error message below the form control. When used together with the help prop, the error prop takes precedence.

When used inside a Form, this is automatically set when a validation error occurs.

Details

<script setup lang="ts">
export interface ExampleProps {
  error?: string
}

withDefaults(defineProps<ExampleProps>(), {
  error: ''
})
</script>

<template>
  <B24FormField
    :error="error"
    label="Email"
    description="We'll never share your email with anyone else."
    hint="Optional"
    help="Please enter a valid email address."
  >
    <B24Input placeholder="Enter your email" />
  </B24FormField>
</template>

Size

Use the size prop to change the size of the FormField, the size is proxied to the form control.

Details

<script setup lang="ts">
export interface ExampleProps {
  size?: any
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'lg'
})
</script>

<template>
  <B24FormField
    :size="size"
    label="Email"
    description="We'll never share your email with anyone else."
    hint="Optional"
    help="Please enter a valid email address."
  >
    <B24Input placeholder="Enter your email" />
  </B24FormField>
</template>

API

Props

Prop	Default	Type
as	'div'	any The element or component this component should render as.
name		string The name of the FormField. Also used to match form errors.
errorPattern		RegExp A regular expression to match form error names.
label		string
description		string
help		string
error		string | false | true
hint		string
size		"lg" | "md" | "xs" | "sm"
required		boolean
eagerValidation		boolean
validateOnInputDelay		number
b24ui		Partial<{ root: string; wrapper: string; labelWrapper: string; label: string; hint: string; container: string; description: string; error: string; errorIcon: string; help: string; }>

Slots

Slot	Type
label	{ label?: string; }
hint	{ hint?: string; }
description	{ description?: string; }
help	{ help?: string; }
error	{ error?: string | boolean; }
default	{ error?: string | boolean; }

Emits

Event	Type