Input Group — Componentes

🚀 saastro/ui (Astro)

$ USD

⚛️ shadcn/ui (React)

Installation

npx saastro add input-group

Usage

---
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui-saastro/input-group";
---

<InputGroup>
  <InputGroupAddon>$</InputGroupAddon>
  <InputGroupInput type="number" placeholder="0.00" />
</InputGroup>

Props

InputGroup

Prop	Type	Default	Description
size	`"default" \| "sm" \| "lg"`	`"default"`	Size of the group

InputGroupAddon

Prop	Type	Default	Description
size	`"default" \| "sm" \| "lg"`	`"default"`	Size of the addon
position	`"start" \| "end"`	`"start"`	Position of the addon

InputGroupInput

Prop	Type	Default	Description
size	`"default" \| "sm" \| "lg"`	`"default"`	Size of the input
type	`string`	`"text"`	Input type
placeholder	`string`	-	Placeholder text
disabled	`boolean`	`false`	Disable the input

InputGroupButton

Prop	Type	Default	Description
variant	`"default" \| "secondary" \| "outline" \| "ghost"`	`"default"`	Button variant
size	`"default" \| "sm" \| "lg"`	`"default"`	Button size
position	`"start" \| "end"`	`"end"`	Position of the button

Examples

With Suffix Addon

---
import {
  InputGroup,
  InputGroupInput,
  InputGroupAddon,
} from "@/components/ui-saastro/input-group";
---

<InputGroup>
  <InputGroupInput placeholder="username" />
  <InputGroupAddon position="end">@example.com</InputGroupAddon>
</InputGroup>

With Button

---
import {
  InputGroup,
  InputGroupInput,
  InputGroupButton,
} from "@/components/ui-saastro/input-group";
---

<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupButton>Search</InputGroupButton>
</InputGroup>

Currency Input

---
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui-saastro/input-group";
---

<InputGroup>
  <InputGroupAddon>$</InputGroupAddon>
  <InputGroupInput type="number" placeholder="0.00" />
  <InputGroupAddon position="end">USD</InputGroupAddon>
</InputGroup>

Different Sizes

---
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui-saastro/input-group";
---

<InputGroup size="sm">
  <InputGroupAddon size="sm">@</InputGroupAddon>
  <InputGroupInput size="sm" placeholder="Small" />
</InputGroup>

<InputGroup size="lg">
  <InputGroupAddon size="lg">@</InputGroupAddon>
  <InputGroupInput size="lg" placeholder="Large" />
</InputGroup>