Field
The form field component is a base component that wraps a form control, such as FluxFormInput. It provides a label, error and hint. Fields can also be marked optional.
By default a field wraps a single control and associates its label with that control through <label for>. When a field hosts a group of controls (multiple checkboxes, a Checkbox group, or a Radio group), set as="group". The label is then rendered as a group label (role="group" + aria-labelledby), which keeps the markup accessible and avoids the duplicate ids that a single shared for would create.
Accessibility
The error and hint messages are linked to the control through aria-describedby, so assistive technology announces them when the control is focused. The error message also carries role="alert" so it is announced as soon as it appears.
Required icons
Props
as?: 'field' | 'group'
Whether the field wraps a single control or a group of controls. In group mode the label is rendered as a group label (role="group" + aria-labelledby) instead of a <label for>, so multiple controls stay accessible without duplicate ids.
Default: field
current-length?: number
The current length of the value.
error?: string
The error message shown after the input.
hint?: string
The hint message shown after the input.
is-optional?: boolean
Mark the field as optional.
label: string
The label of the field.
max-length?: number
The maximum length of the value.
Slots
default ({
readonly id: string;
})
The input for the field.
addition ({
readonly currentLength?: number;
readonly error?: string;
readonly hint?: string;
readonly isOptional?: boolean;
readonly label: string;
readonly maxLength?: number;
})
Any optional additions for the field.
value ({
readonly currentLength?: number;
readonly error?: string;
readonly hint?: string;
readonly isOptional?: boolean;
readonly label: string;
readonly maxLength?: number;
})
An optional value that can be shown next to the label.
Examples
Basic
A basic form field.
<template>
<FluxPane style="max-width: 390px">
<FluxForm>
<FluxPaneBody>
<FluxFormField label="Label">
<FluxFormInput
placeholder="Any input here!"/>
</FluxFormField>
</FluxPaneBody>
</FluxForm>
</FluxPane>
</template>
<script
lang="ts"
setup>
import { FluxForm, FluxFormField, FluxFormInput, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>Optional
An optional form field.
<template>
<FluxPane style="max-width: 390px">
<FluxForm>
<FluxPaneBody>
<FluxFormField label="Label" is-optional>
<FluxFormInput placeholder="Any input here!"/>
</FluxFormField>
</FluxPaneBody>
</FluxForm>
</FluxPane>
</template>
<script
lang="ts"
setup>
import { FluxForm, FluxFormField, FluxFormInput, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>Hint and error
A form field with a hint and error.
<template>
<FluxPane style="max-width: 390px">
<FluxForm>
<FluxPaneBody>
<FluxFormField
label="Label"
error="Something is wrong with the input!"
hint="A helpful hint can be shown here.">
<FluxFormInput placeholder="Any input here!"/>
</FluxFormField>
</FluxPaneBody>
</FluxForm>
</FluxPane>
</template>
<script
lang="ts"
setup>
import { FluxForm, FluxFormField, FluxFormInput, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>Multiple hints or errors
A form field with multiple hints and errors.
<template>
<FluxPane style="max-width: 390px">
<FluxForm>
<FluxPaneBody>
<FluxFormField label="Label">
<FluxFormInput placeholder="Any input here!"/>
<template #addition>
<FluxFormFieldAddition
v-for="hint in hints"
icon="circle-info"
mode="hint"
:message="hint"/>
<FluxFormFieldAddition
v-for="error in errors"
icon="circle-exclamation"
mode="error"
:message="error"/>
</template>
</FluxFormField>
</FluxPaneBody>
</FluxForm>
</FluxPane>
</template>
<script
lang="ts"
setup>
import { FluxForm, FluxFormField, FluxFormFieldAddition, FluxFormInput, FluxPane, FluxPaneBody } from '@flux-ui/components';
const errors = [
"Value must be greater than 10",
"Value must be less than 20"
];
const hints = [
"Your username must be between 10 and 20 characters long.",
"You cannot use special characters."
]
</script>Group
A field hosting a group of controls with as="group".
<template>
<FluxPane style="max-width: 390px">
<FluxForm>
<FluxPaneBody>
<FluxFormField
as="group"
label="Notifications">
<FluxFormCheckbox
v-model="email"
label="Email notifications"/>
<FluxFormCheckbox
v-model="push"
label="Push notifications"/>
</FluxFormField>
</FluxPaneBody>
</FluxForm>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxForm, FluxFormCheckbox, FluxFormField, FluxPane, FluxPaneBody } from '@flux-ui/components';
import { ref } from 'vue';
const email = ref(true);
const push = ref(false);
</script>