[Vuejs]-Vue Formkit: How can i place the label next to the input?

If you are making a custom Formkit input, try Flex

<script setup>
// ESM imports are supported from URLs (https://cdn...)
// as well as secondary playground files (./OtherFile.vue).
</script>

<template>
  <div class="formkit-outer" data-family="text" data-type="text">
  <div class="formkit-wrapper">
    <label class="formkit-label" for="input_0">FormKit Input</label>
    <div class="formkit-inner">
      <input class="formkit-input" type="text" name="text_1" id="input_0" aria-describedby="help-input_0">
    </div>
  </div>
</div>

</template>

<style scoped>
/*
vanilla CSS can go here.
Keep styles scoped to avoid multiple files
overwriting each other in the render output.
*/
.formkit-wrapper {
  display: flex;
  align-items: center;
}
.formkit-label {
  margin-right: 10px;
}
</style>

FormKit Playground Demo

Alternatively, FormKit appears to offer the user to target specific sections of inputs. FormKit Sections Usage

<template>
  <FormKit
    type="text"
    label="FormKit Input"
    help="edit me to get started"
  >
  <template #prefix>
    <p>test</p>
  </template>
  </FormKit>
</template>

Playground example

Looking at the playground demo of this though, it doesn’t appear to place to the left of the input as the docs suggest, though a little tweaking with css could fix that.

FormKit has a robust ${section}-class system. @invisible_squid already mentioned how to do what you’re looking for with CSS but here’s how you’d add relevant Tailwind CSS classes if that’s what you’re looking for.

https://formkit.link/9a6fb4947cb18c3a3b09cbc27f3929f3

You can see the section diagram for each input page on the docs. Here’s the text input:

https://formkit.com/inputs/text#sections