Tipos de Inputs Controlados

Input de Texto

function FormularioTexto() {
  const [formData, setFormData] = useState({
    nome: '',
    email: '',
    telefone: '',
    senha: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <form>
      <input
        type="text"
        name="nome"
        value={formData.nome}
        onChange={handleChange}
        placeholder="Nome completo"
      />
      
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />
      
      <input
        type="tel"
        name="telefone"
        value={formData.telefone}
        onChange={handleChange}
        placeholder="Telefone"
      />
      
      <input
        type="password"
        name="senha"
        value={formData.senha}
        onChange={handleChange}
        placeholder="Senha"
      />
    </form>
  );
}

Textarea

function FormularioComentario() {
  const [comentario, setComentario] = useState('');
  const caracteresRestantes = 500 - comentario.length;

  return (
    <div>
      <textarea
        value={comentario}
        onChange={(e) => setComentario(e.target.value)}
        placeholder="Deixe seu comentário..."
        rows="5"
        cols="50"
        maxLength="500"
      />
      <p>Caracteres restantes: {caracteresRestantes}</p>
    </div>
  );
}

Select

function FormularioSelect() {
  const [pais, setPais] = useState('');
  const [estado, setEstado] = useState('');

  const estados = {
    brasil: ['SP', 'RJ', 'MG', 'BA'],
    eua: ['NY', 'CA', 'TX', 'FL'],
    canada: ['ON', 'QC', 'BC', 'AB']
  };

  return (
    <form>
      <select value={pais} onChange={(e) => setPais(e.target.value)}>
        <option value="">Selecione um país</option>
        <option value="brasil">Brasil</option>
        <option value="eua">Estados Unidos</option>
        <option value="canada">Canadá</option>
      </select>

      {pais && (
        <select value={estado} onChange={(e) => setEstado(e.target.value)}>
          <option value="">Selecione um estado</option>
          {estados[pais].map(est => (
            <option key={est} value={est}>{est}</option>
          ))}
        </select>
      )}
    </form>
  );
}

Radio Buttons

function FormularioRadio() {
  const [plano, setPlano] = useState('basico');
  const [pagamento, setPagamento] = useState('mensal');

  const planos = [
    { id: 'basico', nome: 'Básico', preco: 29.90 },
    { id: 'pro', nome: 'Pro', preco: 59.90 },
    { id: 'empresa', nome: 'Empresa', preco: 99.90 }
  ];

  return (
    <form>
      <fieldset>
        <legend>Escolha seu plano:</legend>
        {planos.map(p => (
          <label key={p.id}>
            <input
              type="radio"
              name="plano"
              value={p.id}
              checked={plano === p.id}
              onChange={(e) => setPlano(e.target.value)}
            />
            {p.nome} - R$ {p.preco}/mês
          </label>
        ))}
      </fieldset>

      <fieldset>
        <legend>Forma de pagamento:</legend>
        <label>
          <input
            type="radio"
            name="pagamento"
            value="mensal"
            checked={pagamento === 'mensal'}
            onChange={(e) => setPagamento(e.target.value)}
          />
          Mensal
        </label>
        <label>
          <input
            type="radio"
            name="pagamento"
            value="anual"
            checked={pagamento === 'anual'}
            onChange={(e) => setPagamento(e.target.value)}
          />
          Anual (20% desconto)
        </label>
      </fieldset>
    </form>
  );
}

Checkboxes

Checkbox Único

function FormularioCheckbox() {
  const [aceiteTermos, setAceiteTermos] = useState(false);
  const [receberEmails, setReceberEmails] = useState(false);

  return (
    <form>
      <label>
        <input
          type="checkbox"
          checked={aceiteTermos}
          onChange={(e) => setAceiteTermos(e.target.checked)}
        />
        Aceito os termos e condições
      </label>

      <label>
        <input
          type="checkbox"
          checked={receberEmails}
          onChange={(e) => setReceberEmails(e.target.checked)}
        />
        Desejo receber emails promocionais
      </label>
    </form>
  );
}

Múltiplos Checkboxes

function FormularioInteresses() {
  const [interesses, setInteresses] = useState([]);

  const opcoes = [
    'JavaScript',
    'React',
    'Node.js',
    'Python',
    'Machine Learning',
    'DevOps'
  ];

  const handleCheckboxChange = (opcao) => {
    setInteresses(prev => {
      if (prev.includes(opcao)) {
        return prev.filter(item => item !== opcao);
      } else {
        return [...prev, opcao];
      }
    });
  };

  return (
    <form>
      <h3>Selecione seus interesses:</h3>
      {opcoes.map(opcao => (
        <label key={opcao}>
          <input
            type="checkbox"
            checked={interesses.includes(opcao)}
            onChange={() => handleCheckboxChange(opcao)}
          />
          {opcao}
        </label>
      ))}
      <p>Selecionados: {interesses.join(', ') || 'Nenhum'}</p>
    </form>
  );
}

Range Slider

function FormularioRange() {
  const [idade, setIdade] = useState(25);
  const [experiencia, setExperiencia] = useState(5);
  const [salario, setSalario] = useState(5000);

  return (
    <form>
      <label>
        Idade: {idade} anos
        <input
          type="range"
          min="18"
          max="65"
          value={idade}
          onChange={(e) => setIdade(e.target.value)}
        />
      </label>

      <label>
        Experiência: {experiencia} anos
        <input
          type="range"
          min="0"
          max="30"
          value={experiencia}
          onChange={(e) => setExperiencia(e.target.value)}
        />
      </label>

      <label>
        Salário esperado: R$ {salario}
        <input
          type="range"
          min="1000"
          max="20000"
          step="500"
          value={salario}
          onChange={(e) => setSalario(e.target.value)}
        />
      </label>
    </form>
  );
}

Date e Time

function FormularioDataHora() {
  const [evento, setEvento] = useState({
    data: '',
    hora: '',
    dataHora: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setEvento(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <form>
      <label>
        Data do evento:
        <input
          type="date"
          name="data"
          value={evento.data}
          onChange={handleChange}
          min={new Date().toISOString().split('T')[0]}
        />
      </label>

      <label>
        Hora do evento:
        <input
          type="time"
          name="hora"
          value={evento.hora}
          onChange={handleChange}
        />
      </label>

      <label>
        Data e hora completa:
        <input
          type="datetime-local"
          name="dataHora"
          value={evento.dataHora}
          onChange={handleChange}
        />
      </label>
    </form>
  );
}

Color Picker

function FormularioCor() {
  const [cores, setCores] = useState({
    primaria: '#1976d2',
    secundaria: '#dc004e',
    fundo: '#ffffff'
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setCores(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <div>
      <form>
        <label>
          Cor primária:
          <input
            type="color"
            name="primaria"
            value={cores.primaria}
            onChange={handleChange}
          />
        </label>

        <label>
          Cor secundária:
          <input
            type="color"
            name="secundaria"
            value={cores.secundaria}
            onChange={handleChange}
          />
        </label>

        <label>
          Cor de fundo:
          <input
            type="color"
            name="fundo"
            value={cores.fundo}
            onChange={handleChange}
          />
        </label>
      </form>

      <div style={{
        backgroundColor: cores.fundo,
        padding: '20px',
        marginTop: '20px'
      }}>
        <h2 style={{ color: cores.primaria }}>Título Principal</h2>
        <p style={{ color: cores.secundaria }}>Texto secundário</p>
      </div>
    </div>
  );
}

Formatação de Inputs

function FormularioFormatado() {
  const [telefone, setTelefone] = useState('');
  const [cpf, setCpf] = useState('');
  const [cartao, setCartao] = useState('');

  const formatarTelefone = (valor) => {
    const numero = valor.replace(/\D/g, '');
    if (numero.length <= 11) {
      const formatado = numero.replace(
        /(\d{2})(\d{5})(\d{4})/,
        '($1) $2-$3'
      );
      setTelefone(formatado);
    }
  };

  const formatarCPF = (valor) => {
    const numero = valor.replace(/\D/g, '');
    if (numero.length <= 11) {
      const formatado = numero.replace(
        /(\d{3})(\d{3})(\d{3})(\d{2})/,
        '$1.$2.$3-$4'
      );
      setCpf(formatado);
    }
  };

  const formatarCartao = (valor) => {
    const numero = valor.replace(/\D/g, '');
    if (numero.length <= 16) {
      const formatado = numero.replace(
        /(\d{4})(\d{4})(\d{4})(\d{4})/,
        '$1 $2 $3 $4'
      );
      setCartao(formatado);
    }
  };

  return (
    <form>
      <input
        type="text"
        value={telefone}
        onChange={(e) => formatarTelefone(e.target.value)}
        placeholder="(11) 98765-4321"
      />

      <input
        type="text"
        value={cpf}
        onChange={(e) => formatarCPF(e.target.value)}
        placeholder="123.456.789-00"
      />

      <input
        type="text"
        value={cartao}
        onChange={(e) => formatarCartao(e.target.value)}
        placeholder="1234 5678 9012 3456"
      />
    </form>
  );
}