Implementation:TobikoData Sqlmesh Input Component

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Design_System, Forms
Last Updated	2026-02-07 20:00 GMT

Overview

Input_Component provides a flexible form input wrapper with label, info text, and consistent styling across text fields and selectors.

Description

The Input component implements a compound component pattern for building form inputs with consistent layout and styling. It serves as a wrapper container that handles labels, info text, sizing, and disabled states while delegating the actual input rendering to children. The component supports two rendering modes: render prop pattern where children receive styling props as a function, or direct children for pre-styled inputs. It includes three sub-components: Input.Label for field labels with size-aware typography, Input.Info for helper text and validation messages, and convenience exports Input.Textfield and Input.Selector for common input types. The component applies consistent focus styles with ring effects and border highlighting, and handles disabled state styling with opacity and cursor changes.

Usage

Use Input as a wrapper for form fields throughout the application. It provides consistent labeling, sizing, and styling patterns. Use the render prop pattern for custom inputs or the sub-components for standard text and select fields.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/library/components/input/Input.tsx

Signature

export interface PropsInput {
  label?: string
  info?: string
  size?: Size
  disabled?: boolean
  required?: boolean
  autoFocus?: boolean
  className?: string
  children?: ({
    disabled,
    required,
    autoFocus,
    size,
    className,
  }: {
    className: string
    disabled: boolean
    required: boolean
    autoFocus: boolean
    size: Size
  }) => React.ReactNode | React.ReactNode
}

function Input(props: PropsInput): JSX.Element

Input.Label = InputLabel
Input.Info = InputInfo
Input.Textfield = Textfield
Input.Selector = Selector

Import

import Input from '@components/input/Input'

I/O Contract

Inputs

Name	Type	Required	Description
label	string	No	Label text displayed above input
info	string	No	Helper text displayed below input
size	Size	No	Size variant (sm, md, lg)
disabled	boolean	No	Disable input interactions
required	boolean	No	Mark field as required
autoFocus	boolean	No	Auto-focus on mount
className	string	No	Additional CSS classes
children	Function or React.ReactNode	No	Input element or render function

Outputs

Name	Type	Description
JSX.Element	React component	Wrapped input with label and info text

Usage Examples

import Input from '@components/input/Input'
import { EnumSize } from '~/types/enum'

function UserForm() {
  const [name, setName] = useState('')

  return (
    <form>
      {/* Using render prop pattern */}
      <Input
        label="Username"
        info="Enter your username"
        size={EnumSize.md}
        required
      >
        {({ className, disabled, required, autoFocus, size }) => (
          <input
            type="text"
            className={className}
            disabled={disabled}
            required={required}
            autoFocus={autoFocus}
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        )}
      </Input>

      {/* Using sub-components */}
      <Input
        label="Email"
        info="We'll never share your email"
        size={EnumSize.md}
      >
        <Input.Textfield
          type="email"
          placeholder="email@example.com"
        />
      </Input>
    </form>
  )
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment