Forms

Forms are commonly used to edit a set of fields, which are saved as a whole.

Form component provides a layout for multiple Form fields and a slot for actions.

Form fields can be of course be used without the form component, too.

<script lang="ts" setup>
import {
  NNFormField,
  NNForm,
  NNInput,
  NNCheckbox,
  NNRadioButtons,
  NNButton,
} from "@fronntui/vue";
</script>

<template>
  <NNForm @submit.prevent class="form">
    <NNFormField label="Text Input" required error>
      <template #default="{ error }">
        <NNInput clearable name="input" :error="error" />
      </template>
      <template #notes>Notes can display errors</template>
    </NNFormField>
    <NNFormField label="Checkbox">
      <NNCheckbox name="checkbox">This is a checkbox</NNCheckbox>
    </NNFormField>
    <NNFormField label="Radio Buttons">
      <NNRadioButtons
        model-value="a"
        name="radio_buttons"
        :options="[
          { value: 'a', label: 'Option A' },
          { value: 'b', label: 'Option B' },
          { value: 'c', label: 'Option C' },
        ]"
      />
      <template #notes>Again some notes</template>
    </NNFormField>

    <template #actions>
      <NNButton type="submit" variant="primary">Save</NNButton>
      <NNButton variant="tertiary">Cancel</NNButton>
    </template>
  </NNForm>
</template>

Form Field

Props

Name

Type

label

string

The label of the form field

tag

string

HTML tag to be used. Defaults to label

error

boolean

Whether or not the form field is in error state

required

boolean

Whether or not the field is required. If true, an asterisk character (*) will be added to the label. Note that there’s no form validaition applied!

Slots

Name

Payload

default

{ error: boolean }

Place the control here

notes

–

Optional notes to be displayed below the control

Form

Slots

Name

Payload

default

Place form fields here

actions

–

Form actions, such as a submit button

Drawer Input