Introducing AlienX extension – The next evolution of UI development.Check it out on VS Code

Enjoy AlienUI? Give it a star on Github ⭐

Checkbox

A customizable checkbox component to toggle options on and off.

Galaxy Checkbox

An intergalactic checkbox for cosmic forms.

Preview

Checkboxes
import React from "react";
import { View, Text, Pressable } from "react-native";

const CheckBox = () => {
  return (
    <View className="p-4">
      <Text className="sr-only">Checkboxes</Text>
      <View className="space-y-2">
        <Pressable className="flex flex-row items-center gap-4 p-2 rounded bg-white">
          <View className="w-5 h-5 border border-gray-300 rounded bg-white"></View>
          <Text className="text-base font-medium text-gray-900">John Clapton</Text>
        </Pressable>
        <Pressable className="flex flex-row items-center gap-4 p-2 rounded bg-white">
          <View className="w-5 h-5 border border-gray-300 rounded bg-white"></View>
          <Text className="text-base font-medium text-gray-900">Peter Mayer</Text>
        </Pressable>
        <Pressable className="flex flex-row items-center gap-4 p-2 rounded bg-white">
          <View className="w-5 h-5 border border-gray-300 rounded bg-white"></View>
          <Text className="text-base font-medium text-gray-900">Eric King</Text>
        </Pressable>
      </View>
    </View>
  );
};

export default CheckBox;

Usage Example

import React from "react";
import { View } from "react-native";
import CheckBox from "./components/CheckBox/GalaxyCheckBox";

const App = () => {
  return (
    <View>
      <CheckBox />
    </View>
  );
};

export default App;