Input Group

Composed input group with addons, buttons, and slant presentation.

https://

Installation

npx shadcn@latest add @gameone/input-group

Registry dependencies: gameone-utils, button, input, textarea

Usage

Import

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

Example

<InputGroup>
  <InputGroupAddon>https://</InputGroupAddon>
  <InputGroupInput placeholder="example.com" />
</InputGroup>

Examples

Default

https://

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

export function InputGroupDefault() {
  return (
    <InputGroup>
      <InputGroupAddon>https://</InputGroupAddon>
      <InputGroupInput placeholder="example.com" />
    </InputGroup>
  )
}

Slant

Angled clip-path input group matching the Game One slant geometry.

https://

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

export function InputGroupSlant() {
  return (
    <InputGroup variant="slant">
      <InputGroupAddon>https://</InputGroupAddon>
      <InputGroupInput placeholder="example.com" />
    </InputGroup>
  )
}

Select Multi Select