Label

<div class="zui-field">
<label class="zui-label" for="demo">Email address</label>
<input class="zui-input" type="email" id="demo" placeholder="you@example.com" />
</div>

import { Field, Label, Input } from '@mrmartineau/zui/react'

<Field>
<Label htmlFor="demo">Email address</Label>
<Input type="email" id="demo" placeholder="you@example.com" />
</Field>

---
import { Field, Label, Input } from '@mrmartineau/zui/astro'
---

<Field>
<Label for="demo">Email address</Label>
<Input type="email" id="demo" placeholder="you@example.com" />
</Field>

import { Field, Label, Input } from '@mrmartineau/zui/solid'

<Field>
<Label htmlFor="demo">Email address</Label>
<Input type="email" id="demo" placeholder="you@example.com" />
</Field>

<script lang="ts">
import { Field, Label, Input } from '@mrmartineau/zui/svelte'
</script>

<Field>
<Label for="demo">Email address</Label>
<Input type="email" id="demo" placeholder="you@example.com" />
</Field>

<template>
<Field>
<Label for="demo">Email address</Label>
<Input type="email" id="demo" placeholder="you@example.com" />
</Field>
</template>

<script setup>
import { Field, Label, Input } from '@mrmartineau/zui/vue'
</script>

<div class="zui-field">
<label class="zui-label zui-label-required" for="req">Required field</label>
<input class="zui-input" type="text" id="req" required />
</div>

import { Field, Label, Input } from '@mrmartineau/zui/react'

<Field>
<Label htmlFor="req" className="zui-label-required">Required field</Label>
<Input type="text" id="req" required />
</Field>

---
import { Field, Label, Input } from '@mrmartineau/zui/astro'
---

<Field>
<Label for="req" class="zui-label-required">Required field</Label>
<Input type="text" id="req" required />
</Field>

import { Field, Label, Input } from '@mrmartineau/zui/solid'

<Field>
<Label htmlFor="req" class="zui-label-required">Required field</Label>
<Input type="text" id="req" required />
</Field>

<script lang="ts">
import { Field, Label, Input } from '@mrmartineau/zui/svelte'
</script>

<Field>
<Label for="req" class="zui-label-required">Required field</Label>
<Input type="text" id="req" required />
</Field>

<template>
<Field>
<Label for="req" class="zui-label-required">Required field</Label>
<Input type="text" id="req" required />
</Field>
</template>

<script setup>
import { Field, Label, Input } from '@mrmartineau/zui/vue'
</script>

<div class="zui-field">
<label class="zui-label" for="desc">
  Username
  <span class="zui-label-description">Must be 3-20 characters, letters and numbers only.</span>
</label>
<input class="zui-input" type="text" id="desc" />
</div>

import { Field, Label, Input } from '@mrmartineau/zui/react'

<Field>
<Label htmlFor="desc">
  Username
  <span className="zui-label-description">Must be 3-20 characters, letters and numbers only.</span>
</Label>
<Input type="text" id="desc" />
</Field>

---
import { Field, Label, Input } from '@mrmartineau/zui/astro'
---

<Field>
<Label for="desc">
  Username
  <span class="zui-label-description">Must be 3-20 characters, letters and numbers only.</span>
</Label>
<Input type="text" id="desc" />
</Field>

import { Field, Label, Input } from '@mrmartineau/zui/solid'

<Field>
<Label htmlFor="desc">
  Username
  <span class="zui-label-description">Must be 3-20 characters, letters and numbers only.</span>
</Label>
<Input type="text" id="desc" />
</Field>

<script lang="ts">
import { Field, Label, Input } from '@mrmartineau/zui/svelte'
</script>

<Field>
<Label for="desc">
  Username
  <span class="zui-label-description">Must be 3-20 characters, letters and numbers only.</span>
</Label>
<Input type="text" id="desc" />
</Field>

<template>
<Field>
<Label for="desc">
Username
<span class="zui-label-description">Must be 3-20 characters, letters and numbers only.</span>
</Label>
<Input type="text" id="desc" />
</Field>
</template>

<script setup>
import { Field, Label, Input } from '@mrmartineau/zui/vue'
</script>