Input Group

Input with addons, prefixes, and suffixes.

https://

addon position

inline-start

inline-end

none

addon text

placeholder

#Installation

bunx --bun barefoot add input-group

#Usage

https://

1import {2  InputGroup,3  InputGroupAddon,4  InputGroupText,5  InputGroupInput,6} from "@/components/ui/input-group"78function InputGroupDemo() {9  return (10    <InputGroup>11      <InputGroupAddon>12        <InputGroupText>https://</InputGroupText>13      </InputGroupAddon>14      <InputGroupInput placeholder="example.com" />15    </InputGroup>16  )17}

#Examples

#Prefix & Suffix

https://

USD

1import {2  InputGroup,3  InputGroupAddon,4  InputGroupText,5  InputGroupInput,6} from "@/components/ui/input-group"78function PrefixSuffix() {9  return (10    <div className="flex flex-col gap-4 max-w-sm">11      <InputGroup>12        <InputGroupAddon>13          <InputGroupText>https://</InputGroupText>14        </InputGroupAddon>15        <InputGroupInput placeholder="example.com" />16      </InputGroup>1718      <InputGroup>19        <InputGroupInput placeholder="Enter amount" />20        <InputGroupAddon align="inline-end">21          <InputGroupText>USD</InputGroupText>22        </InputGroupAddon>23      </InputGroup>2425      <InputGroup>26        <InputGroupAddon>27          <InputGroupText>28            <SearchIcon />29          </InputGroupText>30        </InputGroupAddon>31        <InputGroupInput placeholder="Search..." />32      </InputGroup>33    </div>34  )35}

#With Button

1"use client"23import { createSignal } from "@barefootjs/client"4import {5  InputGroup,6  InputGroupAddon,7  InputGroupButton,8  InputGroupText,9  InputGroupInput,10} from "@/components/ui/input-group"1112function WithButton() {13  const [value, setValue] = createSignal("")1415  return (16    <InputGroup>17      <InputGroupInput18        placeholder="Enter text to copy..."19        value={value()}20        onInput={(e) => setValue(e.target.value)}21      />22      <InputGroupAddon align="inline-end">23        <InputGroupButton24          onClick={() => navigator.clipboard.writeText(value())}25        >26          Copy27        </InputGroupButton>28      </InputGroupAddon>29    </InputGroup>30  )31}

#Password Toggle

1"use client"23import { createSignal } from "@barefootjs/client"4import {5  InputGroup,6  InputGroupAddon,7  InputGroupButton,8  InputGroupText,9  InputGroupInput,10} from "@/components/ui/input-group"1112function PasswordToggle() {13  const [visible, setVisible] = createSignal(false)1415  return (16    <InputGroup>17      <InputGroupAddon>18        <InputGroupText><LockIcon /></InputGroupText>19      </InputGroupAddon>20      <InputGroupInput21        type={visible() ? "text" : "password"}22        placeholder="Enter password"23      />24      <InputGroupAddon align="inline-end">25        <InputGroupButton26          size="icon-xs"27          onClick={() => setVisible(v => !v)}28          aria-label={visible() ? "Hide password" : "Show password"}29        >30          {visible() ? <EyeOffIcon /> : <EyeIcon />}31        </InputGroupButton>32      </InputGroupAddon>33    </InputGroup>34  )35}

#Disabled

https://

1import {2  InputGroup,3  InputGroupAddon,4  InputGroupText,5  InputGroupInput,6} from "@/components/ui/input-group"78function Disabled() {9  return (10    <InputGroup data-disabled="true">11      <InputGroupAddon>12        <InputGroupText>https://</InputGroupText>13      </InputGroupAddon>14      <InputGroupInput placeholder="example.com" disabled />15    </InputGroup>16  )17}

#With Textarea

Description

1import {2  InputGroup,3  InputGroupAddon,4  InputGroupText,5  InputGroupTextarea,6} from "@/components/ui/input-group"78function WithTextarea() {9  return (10    <InputGroup>11      <InputGroupAddon align="block-start">12        <InputGroupText>Description</InputGroupText>13      </InputGroupAddon>14      <InputGroupTextarea placeholder="Type your message..." rows={3} />15    </InputGroup>16  )17}

#API Reference

InputGroup

Prop	Type	Default	Description
className	string	-	Additional CSS class names.
children	Child	-	Input controls and addons to render inside the group.
data-disabled	'true'	-	Set to "true" to apply disabled styling to addons.

InputGroupAddon

Prop	Type	Default	Description
align	'inline-start' \| 'inline-end' \| 'block-start' \| 'block-end'	'inline-start'	Position of the addon relative to the input control.
className	string	-	Additional CSS class names.
children	Child	-	Content to display in the addon (text, icons, buttons).

InputGroupButton

Prop	Type	Default	Description
size	'xs' \| 'sm' \| 'icon-xs' \| 'icon-sm'	'xs'	Size of the button.
type	'button' \| 'submit' \| 'reset'	'button'	The HTML button type.
className	string	-	Additional CSS class names.
children	Child	-	Button content (text, icons).

InputGroupInput

Prop	Type	Default	Description
type	'text' \| 'email' \| 'password' \| 'number' \| 'search' \| 'tel' \| 'url'	'text'	The type of the input.
placeholder	string	-	Placeholder text shown when input is empty.
className	string	-	Additional CSS class names.