Forms

Bragi relies on Formkit for everything related to forms. It generates it's own style to harmonize with the rest of the components but keeps all the validation and convenience that formkit offers.

Password confirmation validation example

Password

Enter a new password

Confirm password

Confirm your new password

• Password confirmation is required.

<template>
  <FormKit type="group">
    <FormKit
      type="password"
      name="password"
      value="super-secret"
      label="Password"
      help="Enter a new password"
      validation="required"
      validation-visibility="live"
    />
    <FormKit
      type="password"
      name="password_confirm"
      label="Confirm password"
      help="Confirm your new password"
      validation="required|confirm"
      validation-visibility="live"
      validation-label="Password confirmation"
    />
  </FormKit>
</template>

Add something example

Your name

The one you use to identify yourself

Email

Enter your email

Your gender?

NoneBothMaleFemale

Preferred transportation

How do you like to get around?

• E-Bike
• E-Scooter
• Electric car
• Walking
• Space tube

Toppings

• Mushrooms
• Olives
• Salami
• Anchovies

Do you need assistance ?

Volume

Select your volume level.

<script setup lang="ts">
import { ref } from 'vue'

const myForm = ref<any>(null)
function submitForm() {
  // retrieve the core node (several ways to do this):
  const node = myForm.value.node

  // submit the form!
  node.submit()
}

function submitHandler(data: any) {
  setTimeout(() => {
    // eslint-disable-next-line no-alert
    alert(JSON.stringify(data, null, 2))
  }, 500)
}
</script>

<template>
  <FormKit
    ref="myForm"
    type="form"
    :actions="false"
    @submit="submitHandler"
  >
    <FormKit
      type="text"
      name="name"
      label="Your name"
      help="The one you use to identify yourself"
      validation="required"
      validation-visibility="blur"
    />
    <FormKit
      type="email"
      name="email"
      label="Email"
      help="Enter your email"
      validation="required|email"
      validation-visibility="blur"
    >
      <template #prefixIcon>
        <i class="i-mdi:email-fast ml-4" />
      </template>
    </FormKit>
    <FormKit
      type="select"
      label="Your gender?"
      placeholder="Select one"
      name="gender"
      :options="['None', 'Both', 'Male', 'Female']"
      validation="required|not:None"
      validation-visibility="dirty"
      :validation-messages="{
        not: 'I do not belive you',
      }"
    />
    <FormKit
      value="Walking"
      name="transport"
      type="radio"
      label="Preferred transportation"
      :options="['E-Bike', 'E-Scooter', 'Electric car', 'Walking', 'Space tube']"
      help="How do you like to get around?"
    />
    <FormKit
      value="Olives"
      type="checkbox"
      label="Toppings"
      :options="['Mushrooms', 'Olives', 'Salami', 'Anchovies']"
      validation="required|min:3"
    />
    <FormKit
      type="checkbox"
      label="Do you need assistance ?"
      :disabled="true"
    />
    <FormKit
      value="5"
      type="range"
      label="Volume"
      min="0"
      max="100"
      help="Select your volume level."
    />
  </FormKit>
  <BBtn
    @click="submitForm"
  >
    Submit form
  </BBtn>
</template>

Custom formkit controls

Bragi extends the standard controls in Formkit with some custom ones based on other Bragi components.

• formkitSwitch internally relies on BSwitch, BSwitchLabel, BSwitchDescription & BSwitchGroup.
• formkitSelect which relies on BSelect & BOption
• formkitCombobox which internally relies on BCombobox

Enable pirate

Enable if u dare!

Pirate says

In this language

options for selection

Multiple

Foodstuff

And what codec?

select your codec

<script setup lang="ts">
import { ref, watchEffect } from 'vue'

const enabled = ref(false)
const food = ref([])
const language = ref('English')
const phrase = ref<string>('sss')

const comboboxOptions = [
  { label: 'H.264 low quality', value: '#001' },
  { label: 'H.264 balanced', value: '#002' },
  { label: 'H.264 high quality', value: '#003' },
  { label: 'MPEG2 balanced', value: '#004' },
  { label: 'MPEG2 high quality', value: '#005' },
]
const comboboxValue = ref(comboboxOptions[0].value)

watchEffect(() => {
  if (enabled.value) {
    switch (language.value) {
      case 'English':
        phrase.value = 'We\'ll rip and burn yer jolly roger!'
        break
      case 'Swedish':
        phrase.value = 'Vi kommer att slita och bränna din jolly roger!'
        break

      default:
        phrase.value = 'I don\'t know Swhaili'
        break
    }
  }
  else {
    phrase.value = ''
  }
})
</script>

<template>
  <FormKit type="group">
    <FormKit
      v-model="enabled"
      type="formkitSwitch"
      icon="i-mdi:robot-dead"
      name="active"
      label="Enable pirate"
      help="Enable if u dare!"
    />
    <FormKit
      v-model="phrase"
      type="text"
      name="random"
      label="Pirate says"
    >
      <template #prefixIcon>
        <i class="i-mdi:robot-dead ml-4" />
      </template>
    </FormKit>
    <FormKit
      v-model="language"
      type="formkitSelect"
      icon="i-mdi:robot-dead"
      label="In this language"
      name="stuff"
      help="options for selection"
      validation="required|not:Swahili"
      validation-visibility="blur"
      :options="['English', 'Swedish', 'Swahili']"
    />
    <FormKit
      v-model="food"
      multiple
      type="formkitSelect"
      label="Multiple"
      name="multi"
      help="Foodstuff"
      :options="['Cake', 'Coke', 'Cornishes']"
    />
    <FormKit
      v-model="comboboxValue"
      type="formkitCombobox"
      icon="i-mdi:robot-dead"
      label="And what codec?"
      name="codec"
      help="select your codec"
      :options="comboboxOptions"
    />
  </FormKit>
</template>