Hidden Fields

Hidden fields let you include data that cannot be seen or modified by users when a form is submitted. A good example is a CSRF token or an ID for the content being submitted.

As such, they do not have most of the features of other fields.

Features

• Offers a useHiddenField composable and a renderless HiddenField component.

Anatomy

🤷‍♂️

Hidden Field Component

Unlike other fields, you can use the HiddenField component to create a hidden field without having to create your own components. This is because we view the hidden field as a utility field for declaring values declaratively.

<script setup lang="ts">
import { HiddenField } from '@formwerk/core';
</script>

<template>
  <HiddenField name="csrfToken" :value="csrfToken" />
</template>

Alternatively, you can use the useHiddenField composable to create a custom hidden field component.

<script setup lang="ts">
import { useHiddenField, type HiddenFieldProps } from '@formwerk/core';

const props = defineProps<HiddenFieldProps>();
</script>

<template>
  <input type="hidden" :name="name" :value="value" />
</template>

To demonstrate how hidden fields work, we will use a form in the following example. We will try to keep it as simple as possible, but you can check the form guide for more information.

<script setup lang="ts">
import { HiddenField, useForm } from '@formwerk/core';

const { handleSubmit } = useForm({});

const onSubmit = handleSubmit((data) => {
  alert(JSON.stringify(data.toObject(), null, 2));
});
</script>

<template>
  <form @submit="onSubmit">
    <HiddenField name="csrfToken" value="abc123xyz789" />

    <button type="submit">Submit</button>
  </form>
</template>

Validation

Hidden fields do not support validation, although their API supports showing any possible error messages that the form might have for the field. The main reason for this is that hidden fields are, well, hidden. That means the user cannot interact with them, and as such, you should ensure they always have valid values; otherwise, it will be confusing to the user.

Usage

Disabled

Marking a hidden field as disabled will make it non-submittable, meaning its value will not be included in the form data when the form is submitted.

<script setup lang="ts">
import { HiddenField, useForm } from '@formwerk/core';

const { handleSubmit } = useForm({});

const onSubmit = handleSubmit((data) => {
  alert(JSON.stringify(data.toObject(), null, 2));
});
</script>

<template>
  <form @submit="onSubmit">
    <HiddenField name="csrfToken" value="abc123xyz789" />
    <HiddenField name="disabled" value="disabled-field" disabled />

    <button type="submit">Submit</button>
  </form>
</template>

API

Props

These are the properties that can be passed to the useHiddenField composable and the HiddenField component.

Name	Type	Description
disabled	boolean	Whether the hidden field is disabled.
name	string	The name attribute for the hidden field.
value	TValue	The value of the hidden field.

Returns

These are the properties in the object returned by the useHiddenField composable.

Name	Type	Description
displayError	() => string	Display the error message for the field.
errorMessage	Ref<string>	The error message for the field.
errors	Ref<{}>	The errors for the field.
fieldValue	Ref<TValue>	The value of the field.
isDirty	Ref<boolean>	Whether the field is dirty.
isDisabled	Ref<boolean>	Whether the field is disabled.
isTouched	Ref<boolean>	Whether the field is touched.
isValid	Ref<boolean>	Whether the field is valid.
setErrors	(messages: Arrayable<string>) => void (messages: Arrayable<string>) => void	Sets the errors for the field.
setTouched	(touched: boolean) => void	Sets the touched state for the field.
setValue	(value: unknown) => void	Sets the value for the field.