Form-Komponenten

Grundlegende Form‑Bausteine mit v‑model‑Support: Form, FormField/Field, FormRow/FormCol, FormControl/Control, Select, Textarea, Radio, Checkbox/Check, Range, InputGroup, FloatingLabel.

<script setup lang="ts">
import { Form, FormRow, FormCol, FormControl, Select, Checkbox } from '@stratton-cologne/ui'
import { ref } from 'vue'

const name = ref('')
const role = ref('user')
const agree = ref(false)
</script>

<template>
  <Form @submit="() => console.log({ name, role, agree })">
    <FormRow>
      <FormCol>
        <label>Name</label>
        <FormControl v-model="name" placeholder="Max Mustermann" />
      </FormCol>
      <FormCol>
        <label>Rolle</label>
        <Select v-model="role">
          <option value="user">User</option>
          <option value="admin">Admin</option>
        </Select>
      </FormCol>
    </FormRow>

    <Checkbox v-model="agree">AGB akzeptieren</Checkbox>
    <button type="submit">Senden</button>
  </Form>
</template>

Gemeinsame Props

• id / instance: fast alle Form-Bausteine unterstützen optionale Root-IDs und data-instance.

Events

• Form: submit(ev)
• Controls: update:modelValue

Styling (data-Attribute)

Die Form-Bausteine setzen meist neutrale Markup-Strukturen. Nutze eigene Klassen oder wähle Attribute/Elemente direkt an. Für komponentenübergreifende Scopes ist data-instance praktisch.