Label

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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" />

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

<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" />

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

<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" />

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

<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" />

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

<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" />

<template>
<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" />
</template>

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