Field

<div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-3);min-width:260px;">
  <div class="aura-field-group">
    <label class="aura-label" for="aura-field-1">Workspace name</label>
    <input id="aura-field-1" class="aura-field" value placeholder="Acme" aria-describedby="aura-field-1-hint">
    <span class="aura-field-hint" id="aura-field-1-hint">Lowercase letters and dashes.</span>
  </div>
  <div class="aura-field-group">
    <label class="aura-label" for="owner">Owner email</label>
    <input id="owner" class="aura-field" value="ann@" aria-invalid="true" aria-describedby="owner-hint owner-error">
    <span class="aura-field-hint" id="owner-hint">We never share this.</span>
    <span class="aura-field-error" id="owner-error">That is not an email address.</span>
  </div>
  <span class="aura-text aura-text--caption aura-text--muted" style="">Type to see the controlled value.</span>
</div>

import { useState } from 'react';
import { Field, Stack, Typography } from '@ilomee/aura-react';

export default function Demo() {
  const [name, setName] = useState('');

  return (
    <Stack gap={3} style={{ minWidth: 260 }}>
      <Field
        label="Workspace name"
        value={name}
        onValueChange={setName}
        placeholder="Acme"
        hint="Lowercase letters and dashes."
      />
      {/* Both messages, to show they coexist: a hint is a standing instruction and an error is
          what is wrong now, so hiding the first when the second appears removes the sentence
          that was helping. `id` is pinned only because the stacks are diffed against each
          other — left out, each framework generates its own. */}
      <Field label="Owner email" id="owner" defaultValue="ann@" hint="We never share this." error="That is not an email address." />
      <Typography variant="caption" tone="muted">
        {name ? `Hello, ${name}` : 'Type to see the controlled value.'}
      </Typography>
    </Stack>
  );
}

<script setup lang="ts">
import { ref } from 'vue';
import { Field } from '@ilomee/aura-vue';

const name = ref('');
</script>

<template>
  <Field label="Name" v-model="name" />
</template>

<script lang="ts">
  import { Field } from '@ilomee/aura-svelte';

  let name = $state('');
</script>

<Field label="Name" bind:value={name} />

import { AuraField } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraField],
  template: `<aura-field label="Name" [(value)]="name"></aura-field>`,
})
export class DemoComponent {
  name = '';
}