Forms

Form controls use Vue v-model, expose labels, hints, and errors, and forward relevant native attributes. Import the stylesheet once as shown in Getting started.

Interactive form

Fill out the fields and submit. The button stays disabled until the checkbox is selected. This example runs here in the docs; it does not send data anywhere.

PreviewCode

Copy

<script setup lang="ts">
import { ref } from 'vue'
import { NbButton, NbCheckbox, NbInput, NbSelect, NbSelectItem, NbSwitch } from '@neobrut-vue/core'

const name = ref('')
const color = ref('yellow')
const updates = ref(true)
const accepted = ref(false)
const submitted = ref(false)

function submit() {
  submitted.value = true
}
</script>

<template>
  <form class="demo-form" @submit.prevent="submit">
    <NbInput v-model="name" label="Name" required placeholder="Ada Lovelace" />
    <NbSelect v-model="color" label="Favorite color">
      <NbSelectItem value="yellow">Sunshine yellow</NbSelectItem>
      <NbSelectItem value="mint">Mint green</NbSelectItem>
      <NbSelectItem value="coral">Coral pink</NbSelectItem>
    </NbSelect>
    <NbSwitch v-model="updates" label="Send me updates" />
    <NbCheckbox v-model="accepted" label="I agree to continue" />
    <NbButton type="submit" :disabled="!accepted">Save form</NbButton>
    <p v-if="submitted" role="status">Saved for {{ name }}. Color: {{ color }}. Updates: {{ updates ? 'on' : 'off' }}.</p>
  </form>
</template>

<style scoped>
.demo-form { display: grid; gap: 1.25rem; max-width: 27rem; }
.demo-form p { margin: 0; font-weight: 700; }
</style>

Validation libraries

The core is form-library agnostic. With VeeValidate, bind defineField attrs and pass its error to the component:

<script setup lang="ts">
import { useForm } from 'vee-validate'
import { NbButton, NbInput } from '@neobrut-vue/core'

const { defineField, errors, handleSubmit } = useForm({
  initialValues: { workspace: '' },
  validationSchema: {
    workspace: (value: string) => value.trim().length >= 3 || 'Use at least three characters.',
  },
})
const [workspace, workspaceAttrs] = defineField('workspace')
const submit = handleSubmit(({ workspace }) => console.log(workspace))
</script>

<template>
  <form @submit="submit">
    <NbInput v-model="workspace" v-bind="workspaceAttrs" name="workspace" label="Workspace" :error="errors.workspace" />
    <NbButton type="submit">Save</NbButton>
  </form>
</template>