104Get started
HextaUI

Input: With a button

Side by side with a gap, or joined into one control inside a <ButtonGroup />, where the input takes the remaining width.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Input } from "@/components/ui/input"

export function InputWithButton() {
  return (
    <form className="flex w-full max-w-sm flex-col gap-4">
      <div className="flex gap-2">
        <Input type="email" aria-label="Email" placeholder="[email protected]" />
        <Button type="submit">Subscribe</Button>
      </div>
      <ButtonGroup className="w-full">
        <Input type="search" aria-label="Search" placeholder="Search…" />
        <Button variant="outline">Search</Button>
      </ButtonGroup>
    </form>
  )
}

Add this example

This adds the example as components/examples/input/with-button.tsx, together with the Input component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/input-with-button.json

To add only the component, follow the Input installation.

Props in this example

The Input props this example sets, from the API reference.

Input

PropTypeDefault
type
string"text"

Every prop is in the Input API reference.

More Input examples

See them all, with keyboard support and accessibility notes, on the Input page.

Related components