Implementation:TobikoData Sqlmesh Common Input
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Components |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
A styled text input component with size variants, focus management, and special handling for file inputs.
Description
The Input component is a React input element with consistent styling using class-variance-authority for size management. It provides seven size options (2xs through 2xl) with matching height, padding, and border radius. The component includes focus-visible ring styling for keyboard accessibility and special styling for file input types, including custom file selector button styling. All inputs have transition effects on color changes and support custom placeholder colors through CSS variables.
Usage
Use Input for all text-based form fields including text, email, password, search, number, and file inputs. The component handles focus states automatically and provides consistent sizing across different input types. For file inputs, the component applies translucent background styling and custom file selector button appearance.
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/common/src/components/Input/Input.tsx
Signature
export interface InputProps extends React.ComponentProps<'input'> {
inputSize?: Size
}
export const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type = 'text', readOnly, inputSize = 's', ...props }, ref) => {
// Implementation
},
)
Import
import { Input } from '@sqlmesh-common/components/Input/Input'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| inputSize | Size | No | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' (default: 's') |
| type | string | No | HTML input type (default: 'text') |
| readOnly | boolean | No | Makes input read-only |
| className | string | No | Additional CSS classes |
| ref | React.Ref<HTMLInputElement> | No | Forward ref to input element |
| ...props | React.ComponentProps<'input'> | No | All standard HTML input attributes |
Outputs
| Name | Type | Description |
|---|---|---|
| element | React.ReactElement | Styled input element |
Usage Examples
// Basic text input (default)
<Input placeholder="Enter name..." />
// Different input types
<Input type="email" placeholder="email@example.com" />
<Input type="password" />
<Input type="search" placeholder="Search..." />
<Input type="number" min={0} max={100} />
// Different sizes
<Input inputSize="xs" placeholder="Compact input" />
<Input inputSize="l" placeholder="Large input" />
// Read-only state
<Input value="Read Only Value" readOnly />
// File input with custom styling
<Input type="file" accept=".csv,.json" />
// Controlled input
const [value, setValue] = useState('')
<Input
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Type something..."
/>
// With validation
<Input
type="email"
required
pattern="[^@]+@[^@]+\.[^@]+"
inputSize="m"
/>