jamsrui_input_group_basic_usage_with_prefix_suffix.ts

1import React from 'react';
2import { InputGroup, InputGroupText, Input } from '@jamsrui/input-group';
3
4const QuickStartExample = () => {
5  return (
6    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
7      {/* Input group with text prefix */}
8      <InputGroup>
9        <InputGroupText>@</InputGroupText>
10        <Input placeholder="Username" />
11      </InputGroup>
12
13      {/* Input group with text suffix */}
14      <InputGroup>
15        <Input placeholder="Recipient's username" />
16        <InputGroupText>@example.com</InputGroupText>
17      </InputGroup>
18
19      {/* Input group with both prefix and suffix */}
20      <InputGroup>
21        <InputGroupText>$</InputGroupText>
22        <Input type="number" placeholder="Amount" />
23        <InputGroupText>.00</InputGroupText>
24      </InputGroup>
25    </div>
26  );
27};
28
29export default QuickStartExample;