Input
A styled text input for forms.
Usage
<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 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" />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>With Label
<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>Invalid State
<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>Disabled
<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>Shape
Use the shape prop to change the corners. It works the same as on Button: default (rounded), hard (square), soft (pill) and squircle.
A squircle is a rounded square with smooth corners. Browsers without corner-shape support show normal rounded corners. To make squircle the default everywhere, see Squircle.
<div class="zui-field">
<label class="zui-label" for="default-input">Default (rounded)</label>
<input class="zui-input" type="text" id="default-input" placeholder="Type here" />
</div>
<div class="zui-field">
<label class="zui-label" for="hard-input">Hard</label>
<input class="zui-input zui-input-shape-hard" type="text" id="hard-input" placeholder="Type here" />
</div>
<div class="zui-field">
<label class="zui-label" for="soft-input">Soft</label>
<input class="zui-input zui-input-shape-soft" type="text" id="soft-input" placeholder="Type here" />
</div>
<div class="zui-field">
<label class="zui-label" for="squircle-input">Squircle</label>
<input class="zui-input zui-input-shape-squircle" type="text" id="squircle-input" placeholder="Type here" />
</div>import { Field, Label, Input } from '@mrmartineau/zui/react'
<Field>
<Label htmlFor="default-input">Default (rounded)</Label>
<Input type="text" id="default-input" placeholder="Type here" />
</Field>
<Field>
<Label htmlFor="hard-input">Hard</Label>
<Input shape="hard" type="text" id="hard-input" placeholder="Type here" />
</Field>
<Field>
<Label htmlFor="soft-input">Soft</Label>
<Input shape="soft" type="text" id="soft-input" placeholder="Type here" />
</Field>
<Field>
<Label htmlFor="squircle-input">Squircle</Label>
<Input shape="squircle" type="text" id="squircle-input" placeholder="Type here" />
</Field>---
import { Field, Label, Input } from '@mrmartineau/zui/astro'
---
<Field>
<Label for="default-input">Default (rounded)</Label>
<Input type="text" id="default-input" placeholder="Type here" />
</Field>
<Field>
<Label for="hard-input">Hard</Label>
<Input shape="hard" type="text" id="hard-input" placeholder="Type here" />
</Field>
<Field>
<Label for="soft-input">Soft</Label>
<Input shape="soft" type="text" id="soft-input" placeholder="Type here" />
</Field>
<Field>
<Label for="squircle-input">Squircle</Label>
<Input shape="squircle" type="text" id="squircle-input" placeholder="Type here" />
</Field>import { Field, Label, Input } from '@mrmartineau/zui/solid'
<Field>
<Label for="default-input">Default (rounded)</Label>
<Input type="text" id="default-input" placeholder="Type here" />
</Field>
<Field>
<Label for="hard-input">Hard</Label>
<Input shape="hard" type="text" id="hard-input" placeholder="Type here" />
</Field>
<Field>
<Label for="soft-input">Soft</Label>
<Input shape="soft" type="text" id="soft-input" placeholder="Type here" />
</Field>
<Field>
<Label for="squircle-input">Squircle</Label>
<Input shape="squircle" type="text" id="squircle-input" placeholder="Type here" />
</Field><script lang="ts">
import { Field, Label, Input } from '@mrmartineau/zui/svelte'
</script>
<Field>
<Label for="default-input">Default (rounded)</Label>
<Input type="text" id="default-input" placeholder="Type here" />
</Field>
<Field>
<Label for="hard-input">Hard</Label>
<Input shape="hard" type="text" id="hard-input" placeholder="Type here" />
</Field>
<Field>
<Label for="soft-input">Soft</Label>
<Input shape="soft" type="text" id="soft-input" placeholder="Type here" />
</Field>
<Field>
<Label for="squircle-input">Squircle</Label>
<Input shape="squircle" type="text" id="squircle-input" placeholder="Type here" />
</Field><template>
<Field>
<Label for="default-input">Default (rounded)</Label>
<Input type="text" id="default-input" placeholder="Type here" />
</Field>
<Field>
<Label for="hard-input">Hard</Label>
<Input shape="hard" type="text" id="hard-input" placeholder="Type here" />
</Field>
<Field>
<Label for="soft-input">Soft</Label>
<Input shape="soft" type="text" id="soft-input" placeholder="Type here" />
</Field>
<Field>
<Label for="squircle-input">Squircle</Label>
<Input shape="squircle" type="text" id="squircle-input" placeholder="Type here" />
</Field>
</template>
<script setup>
import { Field, Label, Input } from '@mrmartineau/zui/vue'
</script>CSS custom properties
Set these on :root, on a wrapper, or on the element. See Component custom properties.
| Property | Default | Description |
|---|---|---|
--zui-input-radius |
var(--radius-lg) |
Border radius |
--zui-input-border |
var(--color-border) |
Border colour |
--zui-input-bg |
var(--color-background) |
Background colour |
--zui-input-fg |
var(--color-text) |
Text colour |
--zui-input-padding-block |
var(--space-3xs) |
Vertical padding |
--zui-input-padding-inline |
var(--space-xs) |
Horizontal padding |
--zui-input-font-size |
var(--step-0) |
Font size |
--zui-input-focus-border |
var(--color-theme) |
Border colour on focus |