مولفه فرم

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

<template>
  <Field>
    <FieldLabel label="نام کاربری"></FieldLabel>
    <Control>
      <VInput
        v-model="inputOneValue"
        placeholder="جان دو"
      />
    </Control>
  </Field>
</template>

<template>
  <Field>
    <FieldLabel label="آدرس ایمیل"></FieldLabel>
    <Control icon="feather:mail">
      <VInput placeholder="johndoe@gmail.com" />
    </Control>
  </Field>
</template>

<template>
  <Field>
    <FieldLabel label="آدرس ایمیل"></FieldLabel>
    <Control icon="feather:mail" validation is-valid>
      <VInput
        placeholder="johndoe@gmail.com"
        value="mymail@gmail.com"
      />
    </Control>
  </Field>
  <Field>
    <FieldLabel label="گذرواژه"></FieldLabel>
    <Control icon="feather:lock" validation is-invalid>
      <VInput type="password" value="" />
    </Control>
  </Field>
</template>

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

<template>
  <Field>
    <FieldLabel label="پیغام"></FieldLabel>
    <Control>
      <VTextarea
        v-model="textareaValue"
        placeholder="چیزی بنویسید..."
      />
    </Control>
  </Field>
</template>

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

<template>
  <Field>
    <FieldLabel label="پیغام"></FieldLabel>
    <Control icon="feather:mail">
      <VTextarea
        v-model="textareaValue"
        :resize="false"
        placeholder="چیزی بنویسید..."
      />
    </Control>
  </Field>
</template>

<script setup lang="ts">
const options = [
  {
    value: 'Hamburger',
    label: 'همبرگر',
  },
  {
    value: 'Cheeseburger',
    label: 'چیزبرگر',
  },
  {
    value: 'Burito',
    label: 'بوریتو',
  },
]

const selectOneValue = ref()
</script>

<template>
  <Field>
    <FieldLabel label="گزینه‌ای را انتخاب کنید"></FieldLabel>
    <Control>
      <VSelect
        v-model="selectOneValue"
        :options="options"
      />
    </Control>
  </Field>
</template>

<script setup lang="ts">
const options = [
  {
    value: 'Hamburger',
    label: 'همبرگر',
  },
  {
    value: 'Cheeseburger',
    label: 'چیزبرگر',
  },
  {
    value: 'Burito',
    label: 'بوریتو',
  },
]

const selectOneValue = ref()
</script>

<template>
  <Field>
    <FieldLabel label="گزینه‌ای را انتخاب کنید"></FieldLabel>
    <Control icon="feather:globe">
      <VSelect
        v-model="selectOneValue"
        :options="options"
      />
    </Control>
  </Field>
</template>

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

<template>
  <!--Regular checkbox-->
  <Checkbox
    v-model="options"
    name="checkbox-1"
    label="گزینه 1"
    value="Option 1"
  />

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

<template>
  <Radio
    name="radio-1"
    label="انتخاب 1"
    group="radio-group-1"
    color="default"
  />
</template>

<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>