@atom-design-mog/controls

A flexible and lightweight Controls Component for React Native — supporting Checkbox, Radio, and Toggle in a clean, consistent, design-system-friendly way. Part of the Atom Design System.

🚀 Installation

Install with npm:

npm install @atom-design-mog/controls

Or with yarn:

yarn add @atom-design-mog/controls

🎮 Import

import Controls from '@atom-design-mog/controls';

🎛 Usage Examples

1. Checkbox Group

const [checkboxValue, setCheckboxValue] = useState([]);

<Controls
  type="checkbox"
  options={[
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' },
  ]}
  value={checkboxValue}
  onChange={setCheckboxValue}
  checkAll={true}
/>

2. Radio Group

const [radioValue, setRadioValue] = useState('2');

<Controls
  type="radio"
  options={[
    { label: 'Option A', value: 'A' },
    { label: 'Option B', value: 'B' },
  ]}
  value={radioValue}
  onChange={setRadioValue}
  layout="row"
/>

3. Toggle

const [toggleValue, setToggleValue] = useState(false);

<Controls
  type="toggle"
  label="Enable feature"
  value={toggleValue}
  onChange={setToggleValue}
/>

🧩 Props

| Prop | Type | Used For | Description | | -------------- | ----------------------------------- | --------------- | ----------------------------------------------------- | | type | 'checkbox' \| 'radio' \| 'toggle' | all | Type of control | | options | [{ label, value }] | checkbox, radio | Options to select | | value | array | string | boolean | all | Checkbox → arrayRadio → valueToggle → boolean | | onChange | function | all | Returns updated value back to parent | | label | string | toggle | Label next to toggle switch | | layout | 'row' \| 'column' | radio | Direction of radio items | | checkAll | boolean | checkbox | Enables “Check All” | | onCheckAll | function | checkbox | Callback when all items checked/un-checked |

⭐ Features

• Supports checkbox, radio, and toggle controls
• Checkbox supports “Check All” and indeterminate state
• Radio supports row or column layouts
• Toggle supports a label and custom styling via props
• Fully controlled component — the parent owns state
• Lightweight and easy to integrate into any design system

🧪 Example Test Screen

import React, { useState } from 'react';
import { View, Text, ScrollView } from 'react-native';
import Controls from '@atom-design-mog/controls';

export default function TestControlsScreen() {
  const [checkboxValue, setCheckboxValue] = useState([]);
  const [radioValue, setRadioValue] = useState('1');
  const [toggleValue, setToggleValue] = useState(false);

  const options = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' },
  ];

  return (
    <ScrollView style={{ flex: 1 }}>
      <View style={{ padding: 20, gap: 28 }}>
        <View>
          <Text style={{ fontSize: 16, marginBottom: 8 }}>Checkbox Selection</Text>
          <Controls
            type="checkbox"
            options={options}
            value={checkboxValue}
            onChange={setCheckboxValue}
            checkAll
          />
        </View>

        <View>
          <Text style={{ fontSize: 16, marginBottom: 8 }}>Radio Buttons (Row)</Text>
          <Controls
            type="radio"
            options={options}
            value={radioValue}
            onChange={setRadioValue}
            layout="row"
          />
        </View>

        <View>
          <Text style={{ fontSize: 16, marginBottom: 8 }}>Toggle Control</Text>
          <Controls
            type="toggle"
            label="Enable notifications"
            value={toggleValue}
            onChange={setToggleValue}
          />
        </View>
      </View>
    </ScrollView>
  );
}

👤 Author

Avi Gupta