Form Components

Forms are a central part of every web and mobile application. They help users interact with your app. Explore Vulk forms.

Components Open Docs
InputIconsValidationTextareaResizeSelectIconCheckboxRadioToggle

Input

Input base layout

Username
Username

First

value:

Second

value:


<script setup lang="ts">
const inputOneValue = ref()
</script>

<template>
  <Field>
    <FieldLabel label="Username"></FieldLabel>
    <Control>
      <VInput
        v-model="inputOneValue"
        placeholder="John Doe"
      />
    </Control>
  </Field>
</template>

Input

Input icon layout

Email Address
Email Address

First

value:

Second

value:


<template>
  <Field>
    <FieldLabel label="Email Address"></FieldLabel>
    <Control icon="feather:mail">
      <VInput placeholder="johndoe@gmail.com" />
    </Control>
  </Field>
</template>

Validation

Input validation layout

Email Address
Password
Please enter a valid value

<template>
  <Field>
    <FieldLabel label="Email Address"></FieldLabel>
    <Control icon="feather:mail" validation is-valid>
      <VInput
        placeholder="johndoe@gmail.com"
        value="mymail@gmail.com"
      />
    </Control>
  </Field>
  <Field>
    <FieldLabel label="Password"></FieldLabel>
    <Control icon="feather:lock" validation is-invalid>
      <VInput type="password" value="" />
    </Control>
  </Field>
</template>

Textarea

Textarea base layout

Message

Textarea

value:


<script setup lang="ts">
const textareaValue = ref('')
</script>

<template>
  <Field>
    <FieldLabel label="Message"></FieldLabel>
    <Control>
      <VTextarea
        v-model="textareaValue"
        placeholder="Write something..."
      />
    </Control>
  </Field>
</template>

No Resize

Textarea no resize variation

Message

Textarea

value:


<script setup lang="ts">
const textareaValue = ref('')
</script>

<template>
  <Field>
    <FieldLabel label="Message"></FieldLabel>
    <Control icon="feather:mail">
      <VTextarea
        v-model="textareaValue"
        :resize="false"
        placeholder="Write something..."
      />
    </Control>
  </Field>
</template>

Select

Select base layout

Choose an option
Choose an option

First

value:

Second

value:


<script setup lang="ts">
const options = [
  {
    value: 'Hamburger',
    label: 'Hamburger',
  },
  {
    value: 'Cheeseburger',
    label: 'Cheeseburger',
  },
  {
    value: 'Burito',
    label: 'Burito',
  },
]

const selectOneValue = ref()
</script>

<template>
  <Field>
    <FieldLabel label="Choose an option"></FieldLabel>
    <Control>
      <VSelect
        v-model="selectOneValue"
        :options="options"
      />
    </Control>
  </Field>
</template>

Icon

Select icon layout

Choose an option
Choose an option

First

value:

Second

value:


<script setup lang="ts">
const options = [
  {
    value: 'Hamburger',
    label: 'Hamburger',
  },
  {
    value: 'Cheeseburger',
    label: 'Cheeseburger',
  },
  {
    value: 'Burito',
    label: 'Burito',
  },
]

const selectOneValue = ref()
</script>

<template>
  <Field>
    <FieldLabel label="Choose an option"></FieldLabel>
    <Control icon="feather:globe">
      <VSelect
        v-model="selectOneValue"
        :options="options"
      />
    </Control>
  </Field>
</template>

Checkbox

Checkbox base layout

Checkboxes

Selected: [ "Option 2" ]


<script setup lang="ts">
const options = ref(['Option 2'])
</script>

<template>
  <!--Regular checkbox-->
  <Checkbox
    v-model="options"
    name="checkbox-1"
    label="Option 1"
    value="Option 1"
  />

  <!--Rounded checkbox-->
  <Checkbox 
    v-model="options"
    name="checkbox-2"
    label="Option 2"
    value="Option 2"
    rounded 
  />
</template>

Radio

Radio base layout

Radios 1

Selected: value_2

Radios 2

selected: value_3

Radios 3

selected: value_1


<template>
  <Radio 
    name="radio-1" 
    label="Choice 1" 
    group="radio-group-1" 
    color="default" 
  />
</template>

Custom Toggle

Toggle checkbox variations

Toggles

active: [ "Option 2", "Option 9" ]


<script setup lang="ts">
const options = ref(['Option 2', 'Option 9'])
</script>

<template>
  <!--Thin Toggle-->
  <NinjaToggle
    v-model="options"
    name="demo-toggle-1"
    value="Option 0"
  />

  <!--Switch Toggle-->
  <NinjaToggle
    v-model="options"
    name="demo-toggle-9"
    icon
    flavor="switch"
    color="success"
    value="Option 8"
  />
</template>