InputGroup

free

InputGroup joins related fields and controls so they read as one input row.

import { PiMagnifyingGlass } from 'react-icons/pi'
import Button from '@/components/ui/button';
import Input from '@/components/ui/input';
import InputGroup from '@/components/ui/input-group';

Installation

Add this component with the NateUI CLI.

npx nateui@latest add InputGroup

pnpm dlx nateui@latest add InputGroup

yarn dlx nateui@latest add InputGroup

Examples

Addons

.nateui.dev

https://

.com

import Input from '@/components/ui/input';
import InputGroup from '@/components/ui/input-group';

export default function AddonsDemo() {

With Buttons

import {
    PiMagnifyingGlass,
    PiMicrophone,
    PiPaperPlaneTilt,

Button Group

import { useState } from 'react';
import Button from '@/components/ui/button';
import InputGroup from '@/components/ui/input-group';

Size

import Button from '@/components/ui/button';
import Input from '@/components/ui/input';
import InputGroup from '@/components/ui/input-group';

Mixed Controls

Plan

import Button from '@/components/ui/button';
import Input from '@/components/ui/input';
import InputGroup from '@/components/ui/input-group';
import Select from '@/components/ui/select';

API

InputGroup is a compound component: InputGroup joins controls into one row and sizes the Addon, while InputGroup.Addon renders non-editable affix content. Set sizes on Button, Input, Select, or MultiValueInput directly.

InputGroup

InputGroup reads the props below and sizes the Addon.

Prop	Description	Type	Default
`children`	Inputs, buttons, selects, addons, or compatible controls rendered as one joined row.	`ReactNode`	-
`className`	Class names applied to the group root.	`string`	-
`ref`	Ref forwarded to the group root element.	`Ref<HTMLDivElement>`	-
`size`	Control size for the group, applied to the Addon.	`ControlSize`	`'md'`

InputGroup.Addon

Addon reads the props below and renders a non-editable segment inside an InputGroup.

Prop	Description	Type	Default
`children`	Addon content, such as a unit, symbol, domain suffix, or short label.	`ReactNode`	-
`className`	Class names applied to the addon root.	`string`	-
`ref`	Ref forwarded to the addon root element.	`Ref<HTMLDivElement>`	-
`size`	Control size for the addon.	`ControlSize`	`'md'`

Types

type ControlSize = 'sm' | 'md' | 'lg';