Input Group

입력 필드에 부가 요소를 결합하는 컴포넌트

Basic Usage

Input 앞이나 뒤에 아이콘, 텍스트, 버튼을 추가할 수 있습니다.

tsx

<InputGroup>
  <InputGroupAddon>
    <Search className="size-4" />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search..." />
</InputGroup>

With Text

텍스트를 포함한 addon을 추가할 수 있습니다.

https://

@gmail.com

tsx

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

<InputGroup>
  <InputGroupAddon>
    <Mail className="size-4" />
  </InputGroupAddon>
  <InputGroupInput placeholder="username" />
  <InputGroupAddon align="inline-end">
    <InputGroupText>@gmail.com</InputGroupText>
  </InputGroupAddon>
</InputGroup>

With Button

버튼을 포함한 인풋 그룹입니다.

tsx

<InputGroup>
  <InputGroupInput type="password" placeholder="Password" />
  <InputGroupAddon align="inline-end">
    <InputGroupButton size="icon-xs">
      <Eye className="size-4" />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

<InputGroup>
  <InputGroupInput placeholder="Copy this text" />
  <InputGroupAddon align="inline-end">
    <InputGroupButton>
      <Copy className="size-4" />
      Copy
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

With Keyboard Shortcut

키보드 단축키를 표시할 수 있습니다.

Ctrl+K

tsx

<InputGroup>
  <InputGroupAddon>
    <Search className="size-4" />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon align="inline-end">
    <Kbd>Ctrl+K</Kbd>
  </InputGroupAddon>
</InputGroup>

With Textarea

Textarea와 함께 사용할 수 있습니다.

tsx

<InputGroup>
  <InputGroupTextarea placeholder="Type your message..." />
  <InputGroupAddon align="block-end">
    <InputGroupButton size="sm">
      <Send className="size-4" />
      Send
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Usage

tsx

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupInput,
  InputGroupTextarea,
} from '@gpters-internal/ui';

function Example() {
  return (
    <InputGroup>
      <InputGroupAddon>
        <Search className="size-4" />
      </InputGroupAddon>
      <InputGroupInput placeholder="Search..." />
    </InputGroup>
  );
}