Input

A text input component with consistent behavior, validation, and formatting across all platforms.

Features

• Multiple input types (text, email, password, number)
• Built-in validation
• Error states and messages
• Prefix/suffix icons
• Character limits
• Auto-formatting (phone, currency, etc.)
• Accessibility compliant

Usage

Web (React)

import { Input } from '@cuppa/ui'

function MyForm() {
  const [value, setValue] = useState('')

  return (
    <>
      <Input
        label="Email"
        type="email"
        placeholder="Enter your email"
        value={value}
        onChange={setValue}
        required
      />

      <Input
        label="Password"
        type="password"
        error="Password must be at least 8 characters"
      />

      <Input
        label="Search"
        prefix={<SearchIcon />}
        placeholder="Search..."
      />
    </>
  )
}

iOS (SwiftUI)

import CuppaUI

struct MyView: View {
  @State private var email = ""
  @State private var password = ""

  var body: some View {
    VStack {
      CuppaInput(
        label: "Email",
        text: $email,
        type: .email,
        placeholder: "Enter your email"
      )

      CuppaInput(
        label: "Password",
        text: $password,
        type: .password,
        error: "Password must be at least 8 characters"
      )
    }
  }
}

Android (Jetpack Compose)

import com.cuppa.ui.components.CuppaInput
import androidx.compose.runtime.*

@Composable
fun MyScreen() {
  var email by remember { mutableStateOf("") }
  var password by remember { mutableStateOf("") }

  Column {
    CuppaInput(
      label = "Email",
      value = email,
      onValueChange = { email = it },
      type = InputType.Email,
      placeholder = "Enter your email"
    )

    CuppaInput(
      label = "Password",
      value = password,
      onValueChange = { password = it },
      type = InputType.Password,
      error = "Password must be at least 8 characters"
    )
  }
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | - | Input label text | | type | string | 'text' | Input type (text, email, password, number) | | value | string | - | Current input value | | onChange | function | - | Value change handler | | placeholder | string | - | Placeholder text | | error | string | - | Error message to display | | disabled | boolean | false | Disable input | | required | boolean | false | Mark as required field | | maxLength | number | - | Maximum character limit | | prefix | element | - | Icon/text before input | | suffix | element | - | Icon/text after input |

Input Types

Text

Standard text input.

Email

Email validation and keyboard optimization.

Password

Obscured text with show/hide toggle.

Number

Numeric input with formatting.

Phone

Phone number formatting (auto-formatted to locale).

Currency

Currency input with proper decimal handling.

Validation

Built-in Validators

<Input
  type="email"
  validate="email"
  onValidate={(isValid) => console.log(isValid)}
/>

<Input
  type="text"
  validate={(value) => value.length >= 3}
  error={errors.name}
/>

Examples

Search Input

<Input
  type="text"
  prefix={<SearchIcon />}
  placeholder="Search components..."
  onChange={handleSearch}
/>

Password with Toggle

<Input
  type="password"
  suffix={<EyeIcon />}
  label="Password"
/>

Character Limit

<Input
  label="Bio"
  maxLength={160}
  showCount
  placeholder="Tell us about yourself"
/>

Accessibility

• Proper label association
• ARIA attributes for errors
• Keyboard navigation
• Screen reader support
• Focus indicators

Best Practices

1. Always provide clear labels
2. Use appropriate input types
3. Show error messages inline
4. Provide helpful placeholder text
5. Use validation for better UX