Vue Formkit: How can i place the label next to the input?

Question

sorry for that maybe bad question, but I really can't find it in the Formkit documentation, but I'm sure I read about it that this is possible.

I want to have the label in one line with the input. Whats the setting for this?

I tried to find it in the documentation, but it's so large :D I can't find it anymore.

Edit: Here is a explanation as a screenshot what I mean: Formkit element Screenshot

I just want to display the label next to the input. And my question is, which setting I have to do at my element to get this.

Answer 1

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.

Answer 2

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