Checkbox

import { Checkbox } from '@skyroc/native-ui';
import { View } from 'react-native';

const CheckboxBasic = () => {
  return (
    <View className="gap-3 bg-background p-4">
      <Checkbox defaultChecked>Checkbox</Checkbox>
      <Checkbox>Unchecked</Checkbox>
      <Checkbox checked="indeterminate">Indeterminate</Checkbox>
    </View>
  );
};

export { CheckboxBasic };

import { Checkbox, CheckboxGroup } from '@skyroc/native-ui';
import type { ThemeColor } from '@skyroc/native-ui';
import { View } from 'react-native';

const COLORS = ['primary', 'destructive', 'success', 'warning', 'info', 'accent', 'carbon', 'secondary'];

const CheckboxColor = () => {
  return (
    <View className="gap-4 bg-background p-4">
      {COLORS.map(c => (
        <CheckboxGroup
          color={c as ThemeColor}
          defaultValue={['a']}
          direction="horizontal"
          key={c}
        >
          <Checkbox name="a">{c}</Checkbox>
          <Checkbox name="b">B</Checkbox>
        </CheckboxGroup>
      ))}
    </View>
  );
};

export { CheckboxColor };

import { Checkbox } from '@skyroc/native-ui';
import { View } from 'react-native';

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const;

const CheckboxSize = () => {
  return (
    <View className="gap-3 bg-background p-4">
      {SIZES.map(s => (
        <Checkbox
          key={s}
          defaultChecked
          size={s}
        >
          {s}
        </Checkbox>
      ))}
    </View>
  );
};

export { CheckboxSize };

import { Checkbox } from '@skyroc/native-ui';
import { View } from 'react-native';

const CheckboxShape = () => {
  return (
    <View className="gap-3 bg-background p-4">
      <Checkbox
        defaultChecked
        shape="round"
      >
        Round (default)
      </Checkbox>
      <Checkbox
        defaultChecked
        shape="square"
      >
        Square
      </Checkbox>
    </View>
  );
};

export { CheckboxShape };

import { Checkbox } from '@skyroc/native-ui';
import { View } from 'react-native';

const CheckboxIconSize = () => {
  return (
    <View className="gap-3 bg-background p-4">
      <Checkbox
        defaultChecked
        iconSize={16}
      >
        16px
      </Checkbox>
      <Checkbox
        defaultChecked
        iconSize={28}
      >
        28px
      </Checkbox>
      <Checkbox
        defaultChecked
        iconSize={40}
      >
        40px
      </Checkbox>
    </View>
  );
};

export { CheckboxIconSize };

import { Checkbox } from '@skyroc/native-ui';
import { View } from 'react-native';

const CheckboxDisabled = () => {
  return (
    <View className="gap-3 bg-background p-4">
      <Checkbox disabled>Disabled</Checkbox>
      <Checkbox
        defaultChecked
        disabled
      >
        Disabled & Checked
      </Checkbox>
    </View>
  );
};

export { CheckboxDisabled };

import { Checkbox } from '@skyroc/native-ui';
import { View } from 'react-native';

const CheckboxLabelPosition = () => {
  return (
    <View className="gap-3 bg-background p-4">
      <Checkbox labelPosition="right">Label on right</Checkbox>
      <Checkbox labelPosition="left">Label on left</Checkbox>
      <Checkbox labelDisabled>Label not pressable (labelDisabled)</Checkbox>
    </View>
  );
};

export { CheckboxLabelPosition };

import { Checkbox } from '@skyroc/native-ui';
import { View } from 'react-native';

const CheckboxMultilineLabel = () => {
  return (
    <View className="gap-3 bg-background p-4">
      <Checkbox defaultChecked>
        A fairly long label that wraps onto more than one line so the control stays aligned with the first line rather
        than the block center.
      </Checkbox>
      <Checkbox>{2024}</Checkbox>
    </View>
  );
};

export { CheckboxMultilineLabel };

import { Button, Checkbox } from '@skyroc/native-ui';
import { useState } from 'react';
import { View } from 'react-native';

const CheckboxControlled = () => {
  const [controlled, setControlled] = useState(false);

  return (
    <View className="gap-3 bg-background p-4">
      <Checkbox
        checked={controlled}
        onCheckedChange={setControlled}
      >
        {controlled ? 'Checked' : 'Unchecked'}
      </Checkbox>
      <Button
        size="sm"
        onPress={() => setControlled(v => !v)}
      >
        Toggle
      </Button>
    </View>
  );
};

export { CheckboxControlled };

import { Checkbox, CheckboxGroup, Text } from '@skyroc/native-ui';
import type { CheckedState } from '@skyroc/native-ui';
import { useState } from 'react';
import { View } from 'react-native';

const FRUIT_ITEMS = [
  { label: 'Apple', value: 'apple' },
  { label: 'Orange', value: 'orange' },
  { label: 'Banana', value: 'banana' },
  { label: 'Grape', value: 'grape' }
];

const CheckboxGroupBasic = () => {
  const [groupValue, setGroupValue] = useState<string[]>(['apple']);
  const [lastChanged, setLastChanged] = useState('-');

  // 全选 / 半选：父级选中态由子集数量推导
  const parentChecked: CheckedState =
    groupValue.length === 0 ? false : groupValue.length === FRUIT_ITEMS.length || 'indeterminate';

  function handleToggleAll(checked: boolean) {
    setGroupValue(checked ? FRUIT_ITEMS.map(item => item.value) : []);
  }

  return (
    <View className="gap-3 bg-background p-4">
      <Checkbox
        checked={parentChecked}
        onCheckedChange={handleToggleAll}
      >
        Check all
      </Checkbox>

      <CheckboxGroup
        className="pl-6"
        value={groupValue}
        onChange={setGroupValue}
      >
        {FRUIT_ITEMS.map(item => (
          <Checkbox
            key={item.value}
            name={item.value}
            onCheckedChange={checked => setLastChanged(`${item.label} → ${checked}`)}
          >
            {item.label}
          </Checkbox>
        ))}
      </CheckboxGroup>

      <Text className="text-sm text-muted-foreground">Selected: {groupValue.join(', ') || 'none'}</Text>
      <Text className="text-sm text-muted-foreground">Last changed: {lastChanged}</Text>
    </View>
  );
};

export { CheckboxGroupBasic };

import { Checkbox, CheckboxGroup, Text } from '@skyroc/native-ui';
import { useState } from 'react';
import { View } from 'react-native';

const FRUIT_ITEMS = [
  { label: 'Apple', value: 'apple' },
  { label: 'Orange', value: 'orange' },
  { label: 'Banana', value: 'banana' },
  { label: 'Grape', value: 'grape' }
];

const CheckboxMax = () => {
  const [maxValue, setMaxValue] = useState<string[]>([]);

  return (
    <View className="gap-3 bg-background p-4">
      <CheckboxGroup
        direction="horizontal"
        max={2}
        value={maxValue}
        onChange={setMaxValue}
      >
        {FRUIT_ITEMS.map(item => (
          <Checkbox
            key={item.value}
            name={item.value}
          >
            {item.label}
          </Checkbox>
        ))}
      </CheckboxGroup>
      <Text className="text-sm text-muted-foreground">Selected: {maxValue.join(', ') || 'none'}</Text>
    </View>
  );
};

export { CheckboxMax };

import { Checkbox, CheckboxGroup } from '@skyroc/native-ui';
import { View } from 'react-native';

const CheckboxHorizontalGroup = () => {
  return (
    <View className="bg-background p-4">
      <CheckboxGroup
        defaultValue={['a']}
        direction="horizontal"
      >
        <Checkbox name="a">A</Checkbox>
        <Checkbox name="b">B</Checkbox>
        <Checkbox name="c">C</Checkbox>
        <Checkbox name="d">D</Checkbox>
      </CheckboxGroup>
    </View>
  );
};

export { CheckboxHorizontalGroup };

import { Checkbox, CheckboxGroup } from '@skyroc/native-ui';
import { View } from 'react-native';

const CheckboxSquareGroup = () => {
  return (
    <View className="bg-background p-4">
      <CheckboxGroup
        color="warning"
        defaultValue={['x']}
        shape="square"
      >
        <Checkbox name="x">X</Checkbox>
        <Checkbox name="y">Y</Checkbox>
        <Checkbox name="z">Z</Checkbox>
      </CheckboxGroup>
    </View>
  );
};

export { CheckboxSquareGroup };

import Feather from '@expo/vector-icons/Feather';
import { Checkbox } from '@skyroc/native-ui';
import { View } from 'react-native';

const CheckboxCustomIcon = () => {
  return (
    <View className="gap-3 bg-background p-4">
      <Checkbox
        defaultChecked
        shape="square"
        checkedIcon={
          <Feather
            color="#fff"
            name="star"
            size={12}
          />
        }
      >
        Custom checked icon
      </Checkbox>
      <Checkbox
        checked="indeterminate"
        shape="square"
        indeterminateIcon={
          <Feather
            color="#fff"
            name="more-horizontal"
            size={12}
          />
        }
      >
        Custom indeterminate icon
      </Checkbox>
    </View>
  );
};

export { CheckboxCustomIcon };

import { Checkbox, CheckboxCard } from '@skyroc/native-ui';
import { View } from 'react-native';

const CheckboxStyles = () => {
  return (
    <View className="gap-3 bg-background p-4">
      <Checkbox
        className="rounded-lg bg-muted p-3"
        defaultChecked
      >
        className 作用于根容器
      </Checkbox>

      <Checkbox
        defaultChecked
        shape="square"
        classNames={{
          indicator: 'border-2 border-primary',
          indicatorIcon: 'accent-warning',
          label: 'font-semibold text-primary',
          root: 'rounded-lg border border-primary p-3'
        }}
      >
        classNames 按 slot 覆盖
      </Checkbox>

      <CheckboxCard
        defaultChecked
        description="卡片的 slot 同样可以逐个覆盖"
        label="CheckboxCard"
        classNames={{
          description: 'text-primary/70',
          label: 'text-base text-primary',
          root: 'border-primary bg-primary/5'
        }}
      />
    </View>
  );
};

export { CheckboxStyles };

import Feather from '@expo/vector-icons/Feather';
import { CheckboxCard } from '@skyroc/native-ui';
import { View } from 'react-native';

const CheckboxCardBasic = () => {
  return (
    <View className="gap-3 bg-background p-4">
      <CheckboxCard
        color="primary"
        defaultChecked
        description="Fast and reliable"
        icon={
          <Feather
            color="#3b82f6"
            name="wifi"
            size={20}
          />
        }
        label="Wi-Fi"
      />
      <CheckboxCard
        checkboxPosition="right"
        color="warning"
        description="Mobile data connection"
        icon={
          <Feather
            color="#22c55e"
            name="smartphone"
            size={20}
          />
        }
        label="Cellular"
        shape="square"
      />
      <CheckboxCard
        color="success"
        description="Direct device connection"
        disabled
        icon={
          <Feather
            color="#8b5cf6"
            name="bluetooth"
            size={20}
          />
        }
        label="Bluetooth"
      />
    </View>
  );
};

export { CheckboxCardBasic };

import Feather from '@expo/vector-icons/Feather';
import { CheckboxCard, CheckboxGroup } from '@skyroc/native-ui';
import { View } from 'react-native';

const CARD_ITEMS = [
  {
    description: 'Fast and reliable',
    icon: (
      <Feather
        color="#3b82f6"
        name="wifi"
        size={20}
      />
    ),
    label: 'Wi-Fi',
    value: 'wifi'
  },
  {
    description: 'Mobile data connection',
    icon: (
      <Feather
        color="#22c55e"
        name="smartphone"
        size={20}
      />
    ),
    label: 'Cellular',
    value: 'cellular'
  },
  {
    description: 'Direct device connection',
    icon: (
      <Feather
        color="#8b5cf6"
        name="bluetooth"
        size={20}
      />
    ),
    label: 'Bluetooth',
    value: 'bluetooth'
  }
];

const CheckboxCardInGroup = () => {
  return (
    <View className="gap-3 bg-background p-4">
      <CheckboxGroup
        color="info"
        defaultValue={['wifi']}
        max={2}
      >
        {CARD_ITEMS.map(item => (
          <CheckboxCard
            key={item.value}
            description={item.description}
            icon={item.icon}
            label={item.label}
            name={item.value}
          />
        ))}
      </CheckboxGroup>
    </View>
  );
};

export { CheckboxCardInGroup };

import Feather from '@expo/vector-icons/Feather';
import { CheckboxGroupCard, Text } from '@skyroc/native-ui';
import { useState } from 'react';
import { View } from 'react-native';

const CARD_ITEMS = [
  {
    description: 'Fast and reliable',
    icon: (
      <Feather
        color="#3b82f6"
        name="wifi"
        size={20}
      />
    ),
    label: 'Wi-Fi',
    value: 'wifi'
  },
  {
    description: 'Mobile data connection',
    icon: (
      <Feather
        color="#22c55e"
        name="smartphone"
        size={20}
      />
    ),
    label: 'Cellular',
    value: 'cellular'
  },
  {
    description: 'Direct device connection',
    icon: (
      <Feather
        color="#8b5cf6"
        name="bluetooth"
        size={20}
      />
    ),
    label: 'Bluetooth',
    value: 'bluetooth'
  }
];

const CheckboxCardGroup = () => {
  const [cardGroupValue, setCardGroupValue] = useState<string[]>(['wifi']);

  return (
    <View className="gap-3 bg-background p-4">
      <CheckboxGroupCard
        checkboxPosition="right"
        color="info"
        items={CARD_ITEMS}
        value={cardGroupValue}
        onChange={setCardGroupValue}
      />
      <Text className="text-sm text-muted-foreground">Selected: {cardGroupValue.join(', ') || 'none'}</Text>
    </View>
  );
};

export { CheckboxCardGroup };