Components
Base UI

Form Components

Form components for building input interfaces. All components wrap Ant Design primitives with consistent token-driven styling.

Status: Stable

Button

Primary action trigger with variant support.

import { Button } from '@gtcx/ui';
 
<Button variant="primary">Submit</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="outline">Edit</Button>
<Button variant="ghost">More</Button>
<Button variant="destructive">Delete</Button>
<Button size="sm">Small</Button>
<Button loading>Loading...</Button>

Input

Text input with label and validation support.

import { Input, Label } from '@gtcx/ui';
 
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="jane@example.com" />

Select

Dropdown selection with search and multi-select.

import { Select } from '@gtcx/ui';
 
<Select
  options={[
    { value: 'us', label: 'United States' },
    { value: 'gb', label: 'United Kingdom' },
  ]}
  placeholder="Select country"
/>

Checkbox and Switch

Toggle controls for boolean values.

import { Checkbox, Switch } from '@gtcx/ui';
 
<Checkbox>Remember me</Checkbox>
<Switch defaultChecked />

Toggle and ToggleGroup

Segmented controls for option selection.

import { Toggle, ToggleGroup } from '@gtcx/ui';
 
<Toggle pressed>Bold</Toggle>
 
<ToggleGroup type="single" defaultValue="left">
  <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
  <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
  <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
</ToggleGroup>

RadioGroup

Radio button group for mutually exclusive options.

import { RadioGroup } from '@gtcx/ui';
 
<RadioGroup
  options={[
    { value: 'sm', label: 'Small' },
    { value: 'md', label: 'Medium' },
    { value: 'lg', label: 'Large' },
  ]}
  defaultValue="md"
/>

Textarea

Multi-line text input.

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

Form

Form layout with validation integration.

import { Form } from '@gtcx/ui';
 
<Form layout="vertical">
  <Form.Item label="Name" required>
    <Input />
  </Form.Item>
  <Form.Item label="Email">
    <Input type="email" />
  </Form.Item>
</Form>

Calendar and DatePicker

Date selection components.

import { Calendar, DatePicker } from '@gtcx/ui';
 
<DatePicker placeholder="Select date" />
<Calendar fullscreen={false} />

FileUpload

File upload with drag-and-drop and progress feedback.

import { FileUpload } from '@gtcx/ui';
 
<FileUpload
  accept=".pdf,.doc"
  maxSize={10 * 1024 * 1024}
  onUpload={handleUpload}
/>

Accessibility Notes

  • Provide explicit Label text for every input.
  • Ensure required fields are indicated in text, not color alone.
  • Use visible focus states for all controls.

Tokens to Customize

  • controlHeight
  • colorPrimary
  • colorError
TemplatesNavigation