Components / Forms

Field

Coordinates a control with its label, help text, error text, and validation state.

Preview

Invite a teammate

They will receive access to the Aurora workspace.

Work email

We only use this address for the invitation.

Install

Run in your project

npx @getweini/cli@latest add field

Use cases

Validated form field

Connect a label, help, and application error to the same control.

Native custom control

Use slot controlProps to wire a plain input into Field relationships.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import { Field, FieldDescription, FieldError, FieldLabel, Input } from './components'
const email = ref('')
</script>

<template>
  <Field invalid required>
    <FieldLabel>Email</FieldLabel>
    <Input v-model="email" type="email" />
    <FieldDescription>Used for account notifications.</FieldDescription>
    <FieldError>Enter a valid email address.</FieldError>
  </Field>
</template>

More examples

Email validation

Mounted error text becomes part of the control description.

Email validation

<script setup lang="ts">
import { ref } from 'vue'
import Field from './components/ui/field/Field.vue'
import FieldLabel from './components/ui/field/FieldLabel.vue'
import FieldDescription from './components/ui/field/FieldDescription.vue'
import FieldError from './components/ui/field/FieldError.vue'
import Input from './components/ui/input/Input.vue'
const email = ref('')
const invalid = ref(false)
</script>
<template>
  <Field :invalid="invalid" required>
    <FieldLabel>Email</FieldLabel>
    <Input v-model="email" type="email" name="email" />
    <FieldDescription>Used for account notices.</FieldDescription>
    <FieldError v-if="invalid">Enter a valid email address.</FieldError>
  </Field>
</template>

Plain native input

controlProps also works with native and third-party controls.

Plain native input

<script setup lang="ts">
import { ref } from 'vue'
import Field from './components/ui/field/Field.vue'
import FieldLabel from './components/ui/field/FieldLabel.vue'
const project = ref('')
</script>
<template>
  <Field v-slot="{ controlProps }" required>
    <FieldLabel>Project name</FieldLabel>
    <input v-bind="controlProps" v-model="project" name="project" />
  </Field>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Field
Name	Type	Default or requirement
`id`	string	generated
`disabled / required / invalid`	boolean	false
`default`	slot with { controlProps }	required

Weini form controls connect to Field automatically. You can pass control attributes explicitly; help and error text are added to aria-describedby when shown.

Implementation notes

Field owns relationships and state; the application owns all visible help and error copy.
An explicit control id or ARIA attribute remains authoritative.

Accessibility and localization

Mount FieldError when an error exists so it joins aria-describedby. Use Fieldset and FieldLegend for a group of related controls.