Input

Input fields allow users to enter and edit text. They’re used for forms, search, and any text-based interaction.

Preview

States

Default

<Input placeholder="What guidance do you seek?" />

Focused

<Input
  placeholder="What guidance do you seek?"
  value={question}
  onChangeText={setQuestion}
/>

Error

Please enter a valid question

<Input
  value={question}
  error="Please enter a valid question"
/>

Disabled

<Input placeholder="Disabled input" disabled />

Sizes

Size	Height	Font Size	Usage
`sm`	36px	13px	Compact forms, filters
`md`	44px	15px	Default, most cases
`lg`	52px	17px	Primary inputs, search

With Label

Your QuestionBe specific and open-minded

<Input
  label="Your Question"
  placeholder="What would you like to know?"
  hint="Be specific and open-minded"
/>

Multiline (TextArea)

<Input
  multiline
  numberOfLines={4}
  placeholder="Describe your situation in detail..."
/>

With Icon

🔍

<Input
  icon={<SearchIcon />}
  iconPosition="left"
  placeholder="Search hexagrams..."
/>

API Reference

Props

Prop	Type	Default	Description
`value`	`string`	-	Input value
`placeholder`	`string`	-	Placeholder text
`label`	`string`	-	Label above input
`hint`	`string`	-	Helper text below input
`error`	`string`	-	Error message
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Input size
`disabled`	`boolean`	`false`	Disable input
`multiline`	`boolean`	`false`	Enable textarea mode
`numberOfLines`	`number`	`1`	Lines for multiline
`icon`	`ReactNode`	-	Icon element
`iconPosition`	`'left' \| 'right'`	`'left'`	Icon placement
`onChangeText`	`(text: string) => void`	-	Text change handler
`onFocus`	`() => void`	-	Focus handler
`onBlur`	`() => void`	-	Blur handler

Tokens Used

import { input } from '@synchronicity/tokens/components';

// Background per theme
input.background.light      // #faf8f3
input.background.dark       // #12121a
input.background.trueBlack  // #000000

// Text
input.text.light           // #1a1814
input.text.dark            // #f8f9fa

// Placeholder
input.placeholder.light    // #8c8579
input.placeholder.dark     // #6c757d

// Border
input.border.color.default.dark  // #24242f
input.border.color.focus         // #d4af37
input.border.color.error         // #ef4444
input.border.radius              // 8

Usage Guidelines

Do

Use clear, descriptive placeholders
Provide labels for important fields
Show validation errors clearly
Use appropriate input types (email, number, etc.)

Don’t

Use placeholder as the only label
Show error before user interacts
Make inputs too wide for their content
Require specific formats without examples

Accessibility

Label association: Labels are programmatically linked to inputs
Error announcement: Screen readers announce errors
Focus indicator: 2px gold outline
Touch target: Minimum 44px height
Placeholder contrast: 4.5:1 minimum

<Input
  label="Your Question"
  accessibilityLabel="Enter your question for the I Ching reading"
  accessibilityHint="Type the question you want guidance on"
  error={error}
/>

Complete Example

import { Input, Button } from '@synchronicity/react-native';
import { useState } from 'react';

function QuestionForm({ onSubmit }) {
  const [question, setQuestion] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = () => {
    if (question.trim().length < 10) {
      setError('Please enter a more detailed question');
      return;
    }
    setError('');
    onSubmit(question);
  };

  return (
    <View style={styles.form}>
      <Input
        label="Your Question"
        placeholder="What guidance do you seek today?"
        hint="Be specific and reflect on what matters most"
        value={question}
        onChangeText={setQuestion}
        error={error}
        multiline
        numberOfLines={3}
        size="lg"
      />

      <Button
        variant="primary"
        onPress={handleSubmit}
        disabled={!question.trim()}
        style={{ marginTop: 16 }}
      >
        Cast Hexagram
      </Button>
    </View>
  );
}