Checkbox

"use client";

import { Checkbox } from "astralis-ui";

export function CheckboxDemo() {
  return <Checkbox defaultChecked>Email me about product updates</Checkbox>;
}

"use client";

import { useState } from "react";
import { Checkbox, Text, VStack } from "astralis-ui";

export function CheckboxGroup() {
  const [selected, setSelected] = useState<string[]>(["react"]);

  return (
    <VStack gap="3" alignItems="start">
      <Checkbox.Group value={selected} onChange={setSelected}>
        <Checkbox value="react">React</Checkbox>
        <Checkbox value="vue">Vue</Checkbox>
        <Checkbox value="svelte">Svelte</Checkbox>
      </Checkbox.Group>
      <Text size="xs" color="muted">
        Selected: {selected.length ? selected.join(", ") : "none"}
      </Text>
    </VStack>
  );
}

"use client";

import { Checkbox, HStack, VStack } from "astralis-ui";

export function CheckboxStates() {
  return (
    <VStack gap="4" alignItems="start">
      <HStack gap="5">
        <Checkbox size="sm" defaultChecked>sm</Checkbox>
        <Checkbox size="md" defaultChecked>md</Checkbox>
        <Checkbox size="lg" defaultChecked>lg</Checkbox>
      </HStack>
      <HStack gap="5">
        <Checkbox colorScheme="green" defaultChecked>green</Checkbox>
        <Checkbox colorScheme="purple" defaultChecked>purple</Checkbox>
        <Checkbox indeterminate>indeterminate</Checkbox>
        <Checkbox disabled defaultChecked>disabled</Checkbox>
      </HStack>
    </VStack>
  );
}