Input Patterns

import { Input, Label } from '@gtcx/ui';
 
// Basic input with label
<div>
  <Label htmlFor="name">Full Name</Label>
  <Input id="name" placeholder="Enter your name" />
</div>
 
// With prefix/suffix
<Input prefix={<SearchIcon />} placeholder="Search..." />
<Input suffix=".com" placeholder="yoursite" />
 
// Disabled and read-only
<Input disabled value="Cannot edit" />
<Input readOnly value="Read-only value" />

<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium (default)" />
<Input size="lg" placeholder="Large" />

import { Select } from '@gtcx/ui';
 
<Select
  placeholder="Choose a country"
  options={[
    { value: 'ng', label: 'Nigeria' },
    { value: 'ke', label: 'Kenya' },
    { value: 'gh', label: 'Ghana' },
  ]}
  showSearch
/>

import { Textarea } from '@gtcx/ui';
 
<Textarea
  placeholder="Enter description..."
  rows={4}
  maxLength={500}
  showCount
/>

import { DatePicker, Calendar } from '@gtcx/ui';
 
<DatePicker placeholder="Select date" format="DD/MM/YYYY" />
<DatePicker.RangePicker />