TextInput

import { TextInput } from 'fluxo-ui';

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

  return (
    <TextInput
      placeholder="Enter some text..."
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

<TextInput
  label="Full Name"
  placeholder="John Doe"
/>

<TextInput
  label="Search"
  placeholder="Search..."
  rightIcon={<span>🔍</span>}
  value={value}
  onChange={(e) => setValue(e.value)}
/>
<TextInput
  label="Email"
  placeholder="user@example.com"
  leftIcon={<span>✉</span>}
  value={value}
  onChange={(e) => setValue(e.value)}
/>

<TextInput label="Normal" placeholder="Normal state" value={value} onChange={(e) => setValue(e.value)} />
<TextInput label="Disabled" placeholder="Disabled state" value={value} onChange={(e) => setValue(e.value)} disabled />
<TextInput label="Read Only" value="Read only value" readonly onChange={(e) => setValue(e.value)} />
<TextInput label="Required" placeholder="Required field" value={value} onChange={(e) => setValue(e.value)} required />

const [value, setValue] = useState('');
const [error, setError] = useState('');

const handleChange = (e) => {
  const newValue = e.target.value;
  setValue(newValue);

  if (newValue.length < 3 && newValue.length > 0) {
    setError('Must be at least 3 characters');
  } else {
    setError('');
  }
};

<TextInput
  label="Username"
  placeholder="Enter username"
  value={value}
  onChange={handleChange}
  error={error}
/>