Input Group

Add addons, buttons, and helper content to inputs.

@react.component
let make = () =>
  <InputGroup className="max-w-xs">

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/InputGroup
Copy

Usage

Copy<InputGroup>
  <InputGroup.Input placeholder="Search..." />
  <InputGroup.Addon>
    <Icons.Search />
  </InputGroup.Addon>
</InputGroup>

Align

Use the align prop on InputGroupAddon to position the addon relative to the input.

inline-start

Use align=InlineStart to position the addon at the start of the input. This is the default.

@react.component
let make = () =>
  <Field className="max-w-sm">

inline-end

Use align=InlineEnd to position the addon at the end of the input.

@react.component
let make = () =>
  <Field className="max-w-sm">

block-start

Use align=BlockStart to position the addon above the input.

@react.component
let make = () =>
  <Field.Group className="max-w-sm">

block-end

Use align=BlockEnd to position the addon below the input.

@react.component
let make = () =>
  <Field.Group className="max-w-sm">

Examples

Icon

@react.component
let make = () =>
  <div className="grid w-full max-w-sm gap-6">

Text

@react.component
let make = () =>
  <div className="grid w-full max-w-sm gap-6">

Button

@@directive("'use client'")

@react.component

Kbd

@react.component
let make = () =>
  <InputGroup className="max-w-sm">

Dropdown

@@directive("'use client'")

@react.component

Spinner

@react.component
let make = () =>
  <div className="grid w-full max-w-sm gap-4">

Textarea

@react.component
let make = () =>
  <div className="grid w-full max-w-md gap-4">

Custom Input

Add the data-slot="input-group-control" attribute to your custom input for automatic focus state handling.

Here's an example of a custom resizable textarea from a third-party library.

@@directive("'use client'")

@react.component

API Reference

InputGroup

The main component that wraps inputs and addons.

Copy<InputGroup>
  <InputGroupInput />
  <InputGroupAddon />
</InputGroup>

InputGroupAddon

Displays icons, text, buttons, or other content alongside inputs.

Copy<InputGroupAddon align=InlineEnd>
  <SearchIcon />
</InputGroupAddon>

For <InputGroupInput />, use the InlineStart or InlineEnd alignment. For <InputGroupTextarea />, use the BlockStart or BlockEnd alignment.

The InputGroupAddon component can have multiple InputGroupButton components and icons.

Copy<InputGroupAddon>
  <InputGroupButton> {"Button"->React.string} </InputGroupButton>
  <InputGroupButton> {"Button"->React.string} </InputGroupButton>
</InputGroupAddon>

InputGroupButton

Displays buttons within input groups.

Copy<InputGroupButton> {"Button"->React.string} </InputGroupButton>
<InputGroupButton size=IconXs ariaLabel="Copy">
  <CopyIcon />
</InputGroupButton>

InputGroupInput

Replacement for <Input /> when building input groups. This component has the input group styles pre-applied and uses the unified data-slot="input-group-control" for focus state handling.

All other props are passed through to the underlying <Input /> component.

Copy<InputGroup>
  <InputGroupInput placeholder="Enter text..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

InputGroupTextarea

Replacement for <Textarea /> when building input groups. This component has the textarea group styles pre-applied and uses the unified data-slot="input-group-control" for focus state handling.

All other props are passed through to the underlying <Textarea /> component.

Copy<InputGroup>
  <InputGroupTextarea placeholder="Enter message..." />
  <InputGroupAddon align=BlockEnd>
    <InputGroupButton> {"Send"->React.string} </InputGroupButton>
  </InputGroupAddon>
</InputGroup>