A text input component with prefix/suffix slots, feedback color states, and size variants that share the same sizing system as the button component.
Apply semantic feedback colors to indicate validation state or context.
---
import Input from "../Input.astro";
import { stack } from "@pindoba/styled-system/patterns";
---
<div class={stack({ gap: "md", direction: "column" })}>
<Input feedback="neutral" placeholder="Neutral" />
<Input feedback="primary" placeholder="Primary" />
<Input feedback="success" placeholder="Success" />
<Input feedback="danger" placeholder="Danger" />
<Input feedback="warning" placeholder="Warning" />
</div>Inputs come in four sizes that share the same height system as buttons.
---
import Input from "../Input.astro";
import { stack } from "@pindoba/styled-system/patterns";
---
<div class={stack({ gap: "md", direction: "column" })}>
<Input size="xs" placeholder="Extra Small" />
<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />
</div>Use fieldPrefix and fieldSuffix slots to add icons, labels, or controls inside the input wrapper.
---
import Input from "../Input.astro";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
---
<div class={stack({ gap: "md", direction: "column" })}>
<Input placeholder="Search...">
<span
slot="fieldPrefix"
class={css({ px: "xs", color: "neutral.text.muted" })}>🔍</span
>
</Input>
<Input placeholder="Enter amount">
<span
slot="fieldPrefix"
class={css({ px: "xs", color: "neutral.text.muted" })}>$</span
>
<span
slot="fieldSuffix"
class={css({ px: "xs", color: "neutral.text.muted" })}>USD</span
>
</Input>
</div>The passThrough prop provides escape hatches for each slot: style accepts a Panda CSS SystemStyleObject and props forwards arbitrary HTML attributes.
---
import Input from "../Input.astro";
import { stack } from "@pindoba/styled-system/patterns";
---
<div class={stack({ gap: "xl", direction: "column" })}>
<div>
<h3>Custom style via passThrough</h3>
<Input
placeholder="Custom root style"
passThrough={{
root: { style: { borderRadius: "full" } },
input: { style: { fontStyle: "italic" } },
}}
/>
</div>
<div>
<h3>Custom props via passThrough</h3>
<Input
placeholder="Search..."
passThrough={{
input: {
props: {
"aria-label": "Search input",
"data-testid": "search-input",
},
},
}}
/>
</div>
</div>| Prop | |
|---|---|
feedback | |
size | |
type | |
passThrough | |
...rest | |