Fulldev UI

Docs Components Blocks Showcase

Input

---
import Input from 'fulldev-ui/components/Input.astro'
---

<Input
  label="Email"
  icon="mail"
  name="input"
  type="email"
  placeholder="This is an input"
/>

Props

PropTypeDefault
variant'outline'outline
color'base' | 'brand'-
labelstring-
iconstring-
radius'none' | 'auto' | 'full'auto
asHTMLTaginput
HTML AttributesPolymorphic<input>-

Examples

---
import Input from 'fulldev-ui/components/Input.astro'
---

<Input label="Name" icon="mail" name="name" type="email" />
---
import Input from 'fulldev-ui/components/Input.astro'
---

<Input size="sm" name="name" />
<Input size="md" name="name" />
<Input size="lg" name="name" />
---
import Input from 'fulldev-ui/components/Input.astro'
---

<Input color="base" name="name" />
<Input color="brand" name="name" />
---
import Input from 'fulldev-ui/components/Input.astro'
---

<Input radius="none" name="name" />
<Input radius="auto" name="name" />
<Input radius="full" name="name" />