Input

<input class="zui-input" type="text" placeholder="Enter your name" />

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

<Input type="text" placeholder="Enter your name" />

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

<Input type="text" placeholder="Enter your name" />

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

<Input type="text" placeholder="Enter your name" />

<script lang="ts">
import { Input } from '@mrmartineau/zui/svelte'
let name = $state('')
</script>

<Input type="text" placeholder="Enter your name" bind:value={name} />

<template>
<Input type="text" placeholder="Enter your name" />
</template>

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

<input class="zui-input" type="text" placeholder="Text" />
<input class="zui-input" type="email" placeholder="Email" />
<input class="zui-input" type="password" placeholder="Password" />
<input class="zui-input" type="number" placeholder="Number" />
<input class="zui-input" type="search" placeholder="Search" />
<input class="zui-input" type="url" placeholder="URL" />

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

<Input type="text" placeholder="Text" />
<Input type="email" placeholder="Email" />
<Input type="password" placeholder="Password" />
<Input type="number" placeholder="Number" />
<Input type="search" placeholder="Search" />
<Input type="url" placeholder="URL" />

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

<Input type="text" placeholder="Text" />
<Input type="email" placeholder="Email" />
<Input type="password" placeholder="Password" />
<Input type="number" placeholder="Number" />
<Input type="search" placeholder="Search" />
<Input type="url" placeholder="URL" />

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

<Input type="text" placeholder="Text" />
<Input type="email" placeholder="Email" />
<Input type="password" placeholder="Password" />
<Input type="number" placeholder="Number" />
<Input type="search" placeholder="Search" />
<Input type="url" placeholder="URL" />

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

<Input type="text" placeholder="Text" />
<Input type="email" placeholder="Email" />
<Input type="password" placeholder="Password" />
<Input type="number" placeholder="Number" />
<Input type="search" placeholder="Search" />
<Input type="url" placeholder="URL" />

<template>
<Input type="text" placeholder="Text" />
<Input type="email" placeholder="Email" />
<Input type="password" placeholder="Password" />
<Input type="number" placeholder="Number" />
<Input type="search" placeholder="Search" />
<Input type="url" placeholder="URL" />
</template>

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

<div class="zui-field">
<label class="zui-label" for="name">Full name</label>
<input class="zui-input" type="text" id="name" placeholder="Jane Doe" />
</div>

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

<Field>
<Label htmlFor="name">Full name</Label>
<Input type="text" id="name" placeholder="Jane Doe" />
</Field>

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

<Field>
<Label for="name">Full name</Label>
<Input type="text" id="name" placeholder="Jane Doe" />
</Field>

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

<Field>
<Label htmlFor="name">Full name</Label>
<Input type="text" id="name" placeholder="Jane Doe" />
</Field>

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

<Field>
<Label for="name">Full name</Label>
<Input type="text" id="name" placeholder="Jane Doe" />
</Field>

<template>
<Field>
<Label for="name">Full name</Label>
<Input type="text" id="name" placeholder="Jane Doe" />
</Field>
</template>

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

<input class="zui-input" type="email" value="not-an-email" aria-invalid="true" />

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

<Input type="email" defaultValue="not-an-email" aria-invalid="true" />

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

<Input type="email" value="not-an-email" aria-invalid="true" />

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

<Input type="email" defaultValue="not-an-email" aria-invalid="true" />

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

<Input type="email" value="not-an-email" aria-invalid="true" />

<template>
<Input type="email" value="not-an-email" aria-invalid="true" />
</template>

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

<input class="zui-input" type="text" value="Cannot edit" disabled />

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

<Input type="text" defaultValue="Cannot edit" disabled />

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

<Input type="text" value="Cannot edit" disabled />

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

<Input type="text" defaultValue="Cannot edit" disabled />

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

<Input type="text" value="Cannot edit" disabled />

<template>
<Input type="text" value="Cannot edit" disabled />
</template>

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