FormElementsContainer since v0.45.0 themeable

A div that ensure all child elements are well aligned.

Preview

First Name

Second Name

ZipCode

City

Properties

Name

Type

Default

Value

class

String

id

String

Example

<template>
    <FormElementsContainer class="bg-stone-300"
                           id="CreatePersonFormElements">
        <FormInput label="First Name"
                   description="Please enter your first name."
                   :show-format-hint="true"
                   format="John Doe" />
        <FormInput label="Second Name"
                   description="Please enter your second name."
                   :show-format-hint="true"
                   format="John Doe" />
        <FormInput label="ZipCode"
                   description="Please enter a valid zip code."
                   :show-format-hint="true"
                   format="85080" />
        <FormInput label="City"
                   description="Please enter a valid zip city name."
                   :show-format-hint="true"
                   format="New York" />
        <NavButton type="button">Submit</NavButton>
    </FormElementsContainer>
</template>

<script setup>
import { FormElementsContainer, FormInput, NavButton } from '@discue/ui-components';
</script>