Input

A styled text input for forms.

Usage

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

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

Input Types

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

With Label

Full name

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

Invalid State

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

Disabled

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