@tcn/ui-inputs

A comprehensive collection of form input components including text inputs, selects, date pickers, and specialized input types designed for modern web applications.

Overview

@tcn/ui-inputs provides a complete set of accessible, customizable input components that cover all common form input needs. These components are built with accessibility in mind and integrate seamlessly with the Blackcat UI design system.

What's Included

Basic Input Components

• Input: Standard text input with support for all HTML input types
• Textarea: Multi-line text input with resizing capabilities
• Select: Dropdown selection component with search and keyboard navigation
• Radio: Radio button components with proper grouping and accessibility
• Checkbox: Checkbox components with support for indeterminate states

Advanced Input Types

• DatePicker: Full-featured date and time selection with calendar interface
• ColorInput: Color picker with hex, RGB, and HSL support
• PhoneNumberInput: International phone number input with country codes
• UnitInput: Input for values with units (e.g., "10px", "2.5rem")
• Slider: Range slider for numeric value selection

Specialized Components

• ComboBox: Searchable dropdown with custom input support
• MultiComboBox: Multi-selection combo box with tags
• Multiselect: Multi-selection dropdown with inline value display
• MaskInput: Input with pattern masking for formatted data entry
• Switch: Toggle switch component for boolean values

Supporting Components

• Suggestions: Autocomplete suggestion system
• Options: Standardized option components for selects and lists
• Input Rows: Layout components for organizing form inputs

Key Features

• Accessibility First: Built with ARIA attributes and keyboard navigation
• Design System Integration: Seamlessly works with Blackcat UI themes and spacing
• TypeScript Support: Full type safety with excellent IntelliSense
• Responsive Design: Adapts to different screen sizes and densities
• Customizable: Extensive styling and behavior customization options
• Performance Optimized: Efficient rendering with minimal re-renders
• Form Integration: Works with any form library or state management system

Usage

Basic Text Input

import { Input } from '@tcn/ui-inputs';

function MyForm() {
  const [value, setValue] = useState('');
  
  return (
    <Input
      value={value}
      onChange={setValue}
      placeholder="Enter your name"
      width="300px"
    />
  );
}

Date Selection

import { DatePicker } from '@tcn/ui-inputs';

function DateSelector() {
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
  
  return (
    <DatePicker
      value={selectedDate}
      onChange={setSelectedDate}
      showTime={true}
      min={new Date()}
      placeholder="Select date and time"
    />
  );
}

Dropdown Selection

import { Select, Option } from '@tcn/ui-inputs';

function CountrySelector() {
  const [country, setCountry] = useState('');
  
  return (
    <Select value={country} onChange={setCountry}>
      <Option value="us" label="United States" />
      <Option value="ca" label="Canada" />
      <Option value="mx" label="Mexico" />
    </Select>
  );
}

Multi-Selection

import { Multiselect, Option } from '@tcn/ui-inputs';

function TagSelector() {
  const [tags, setTags] = useState<string[]>([]);
  
  return (
    <Multiselect value={tags} onChange={setTags}>
      <Option value="react" label="React" />
      <Option value="typescript" label="TypeScript" />
      <Option value="css" label="CSS" />
    </Multiselect>
  );
}

Color Selection

import { ColorInput } from '@tcn/ui-inputs';

function ColorPicker() {
  const [color, setColor] = useState('#ff0000');
  
  return (
    <ColorInput
      value={color}
      onChange={setColor}
      showSwatch={true}
      showInput={true}
    />
  );
}

Component Features

Input Validation

• Built-in error handling and display
• Custom validation support
• Real-time validation feedback
• Accessibility-compliant error messages

Keyboard Navigation

• Full keyboard support for all components
• Tab order management
• Arrow key navigation in lists
• Enter and Escape key handling

Mobile Optimization

• Touch-friendly interfaces
• Responsive design patterns
• Mobile-specific interactions
• Optimized for small screens

Internationalization

• RTL language support
• Locale-aware date formatting
• Country code handling
• Multi-language placeholder support

Design System Integration

All components automatically integrate with:

• Spacing Scale: Consistent margins, padding, and gaps
• Color System: Primary, secondary, and accent color schemes
• Typography: Font sizes and weights that match your design
• Scalar Support: Automatic scaling for different screen densities
• Theme Support: Light and dark theme compatibility

Accessibility Features

• ARIA Attributes: Proper labeling and state management
• Screen Reader Support: Semantic markup and descriptions
• Focus Management: Clear focus indicators and focus trapping
• Keyboard Navigation: Full keyboard support for all interactions
• High Contrast: Designed for various visual accessibility needs

When to Use

Choose @tcn/ui-inputs when you need:

• Comprehensive form input components
• Accessible input controls
• Consistent input styling across your UI
• Advanced input types like date pickers and color inputs
• Components that integrate with your design system

Customization

Components support extensive customization through:

• CSS Custom Properties: Dynamic styling changes
• CSS Modules: Scoped styling with design system integration
• Props Interface: Flexible configuration through component props
• Theme Integration: Automatic adaptation to different themes
• Layout Components: Flexible arrangement and spacing

Performance

• Efficient Rendering: Minimal re-renders and optimized updates
• Bundle Optimization: Tree-shakeable components for smaller bundles
• Memory Management: Proper cleanup and event handling
• Lazy Loading: Support for on-demand component loading

License

Apache-2.0