📋 React Native Form Handling (Radio, Checkbox, Select) – TypeScript

মোবাইল অ্যাপ্লিকেশনে Form খুব গুরুত্বপূর্ণ একটি অংশ। যেমন – Login, Register, Survey, Feedback ইত্যাদি। এই টপিকে আমরা শিখবো কিভাবে React Native (TypeScript) ব্যবহার করে Radio Button, Checkbox, Select (Picker) এবং সম্পূর্ণ Form Handling করা হয়।

🔘 ১. Radio Button (Single Choice)

Radio Button ব্যবহার করা হয় যখন ইউজারকে একাধিক অপশন থেকে একটি মাত্র অপশন সিলেক্ট করতে হয়।

📌 Example: Gender Selection

import { View, Text, Pressable } from 'react-native';
import { useState } from 'react';

const RadioExample = () => {
  const [gender, setGender] = useState('');

  return (
    
      {['Male', 'Female'].map(item => (
         setGender(item)}>
          
            {gender === item ? '🔘' : '⚪'} {item}
          
        
      ))}
    
  );
};
  

✅ Output: ইউজার Male অথবা Female এর মধ্যে যেকোনো একটি সিলেক্ট করতে পারবে। একবারে শুধুমাত্র একটি অপশন সিলেক্ট থাকবে।

☑️ ২. Checkbox (Multiple Choice)

Checkbox ব্যবহার করা হয় যখন ইউজার একাধিক অপশন একসাথে সিলেক্ট করতে পারে।

📌 Example: Skills Selection

import { View, Text, Pressable } from 'react-native';
import { useState } from 'react';

const CheckboxExample = () => {
  const [skills, setSkills] = useState([]);

  const toggleSkill = (skill: string) => {
    setSkills(prev =>
      prev.includes(skill)
        ? prev.filter(s => s !== skill)
        : [...prev, skill]
    );
  };

  return (
    
      {['React', 'Node', 'MongoDB'].map(skill => (
         toggleSkill(skill)}>
          
            {skills.includes(skill) ? '☑️' : '⬜'} {skill}
          
        
      ))}
    
  );
};
  

✅ Output: ইউজার একাধিক স্কিল একসাথে সিলেক্ট করতে পারবে (React + Node + MongoDB ইত্যাদি)।

🔽 ৩. Select / Picker Dropdown

Dropdown বা Select ব্যবহার করা হয় যখন অনেক অপশন থেকে একটি অপশন বেছে নিতে হয়।

import { View } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import { useState } from 'react';

const SelectExample = () => {
  const [city, setCity] = useState('Kolkata');

  return (
    
      
      
      
    
  );
};
  

✅ Output: ইউজার dropdown থেকে শহর নির্বাচন করতে পারবে।

📝 ৪. Complete Form Handling (All Together)

এখন আমরা সবকিছু একসাথে ব্যবহার করে একটি পূর্ণাঙ্গ ফর্ম বানাবো।

import { View, Text, TextInput, Button } from 'react-native';
import { useState } from 'react';

const FormExample = () => {
  const [name, setName] = useState('');
  const [gender, setGender] = useState('');

  const handleSubmit = () => {
    console.log({ name, gender });
  };

  return (
    
      

      
    
  );
};
  

✅ Output: ইউজার নাম লিখে Submit করলে ডাটা console বা API তে পাঠানো যাবে।

✨ Summary

• Radio → একটিমাত্র অপশন
• Checkbox → একাধিক অপশন
• Select / Picker → Dropdown নির্বাচন
• useState → Form state handle
• TypeScript → Type safety নিশ্চিত করে