Field

Component used to group a form components.

View Source 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-elements 
• winduum-stimulus 
• winduum-vue 
• winduum-react 

Styles

Variants

• default 

Scripts

The Field script validates the field on change and renders the validation message and icon when the control is invalid.

Examples

Basic

winduum-elements

<x-field class="x-field">
    <label class="x-label">Label</label>
    <x-control class="x-control">
        <input type="text" required>
    </x-control>
    <em class="x-info">Info message</em>
</x-field>

winduum-stimulus

<div data-controller="x-field" class="x-field">
    <label class="x-label">Label</label>
    <div data-controller="x-control" class="x-control">
        <input type="text" required>
    </div>
    <em class="x-info">Info message</em>
</div>

winduum-vue

<script setup lang="ts">
    import { Field } from '@/components/field'
    import { Label } from '@/components/label'
    import { Control } from '@/components/control'
    import { Info } from '@/components/info'
</script>

<template>
    <Field>
        <Label>Label</Label>
        <Control>
            <input type="text" required>
        </Control>
        <Info as="em">Info message</Info>
    </Field>
</template>

winduum-react

import { Field } from "@/components/field"
import { Label } from "@/components/label"
import { Control } from "@/components/control"
import { Info } from "@/components/info"

export function Example() {
    return (
        <Field>
            <Label>Label</Label>
            <Control>
                <input type="text" required />
            </Control>
            <Info as="em">Info message</Info>
        </Field>
    )
}