@gradio/checkbox

import Checkbox from "@gradio/checkbox";
import { BaseCheckbox } from "@gradio/checkbox";

import Example from "@gradio/checkbox/example";

import Checkbox, { BaseCheckbox } from "@gradio/checkbox";
import type { Gradio, LoadingStatus, SelectData } from "@gradio/utils";

// Standalone checkbox usage
<BaseCheckbox
  bind:value={checked}
  label="Accept Terms"
  interactive={true}
  on:change={(e) => console.log('Value changed:', e.detail)}
  on:select={(e) => console.log('Selected:', e.detail)}
/>

// Full Gradio-integrated checkbox
<Checkbox
  bind:value={checked}
  label="Enable Feature"
  interactive={true}
  info="This enables additional functionality"
  gradio={gradioInstance}
  loading_status={loadingStatus}
/>

/**
 * Main Gradio checkbox component with full ecosystem integration
 * 
 * Component Props:
 */
interface CheckboxProps {
  // Layout and styling
  elem_id?: string;                    // HTML element ID (default: "")
  elem_classes?: string[];             // CSS classes for styling (default: [])
  visible?: boolean;                   // Component visibility (default: true)
  container?: boolean;                 // Whether to wrap in container (default: true)
  scale?: number | null;               // Layout scaling factor (default: null)
  min_width?: number | undefined;      // Minimum width constraint (default: undefined)
  
  // Core checkbox properties
  value?: boolean;                     // Checkbox checked state (default: false)
  value_is_output?: boolean;           // Internal state tracking (default: false)
  label?: string;                      // Checkbox label text (default: "Checkbox")
  info?: string | undefined;           // Optional info text, markdown supported (default: undefined)
  interactive: boolean;                // Whether component accepts user input (required)
  
  // Gradio integration (required)
  loading_status: LoadingStatus;       // Loading/processing status object
  gradio: Gradio<CheckboxEvents>;      // Gradio instance for event handling
}

/**
 * Event types for main Checkbox component
 */
interface CheckboxEvents {
  change: never;                       // Fired when checkbox value changes
  select: SelectData;                  // Fired with SelectData when user interacts
  input: never;                        // Fired on user input (when not output mode)
  clear_status: LoadingStatus;         // Fired to clear loading status
}

/**
 * Component methods available through component instance
 */
interface CheckboxMethods {
  handle_change(): void;               // Internal method handling value changes and events
}

/**
 * Standalone checkbox component without Gradio dependencies
 * 
 * Component Props:
 */
interface BaseCheckboxProps {
  value?: boolean;                     // Checkbox checked state (default: false)
  label?: string;                      // Checkbox label text (default: "Checkbox")
  interactive: boolean;                // Whether component accepts user input (required)
}

/**
 * Events dispatched by BaseCheckbox component
 */
interface BaseCheckboxEvents {
  change: boolean;                     // Dispatched when value changes, payload is new value
  select: SelectData;                  // Dispatched on user interaction with selection data
}

/**
 * Component methods available in BaseCheckbox
 */
interface BaseCheckboxMethods {
  handle_enter(event: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }): Promise<void>;
  handle_input(event: Event & { currentTarget: EventTarget & HTMLInputElement }): Promise<void>;
}

<script lang="ts">
  import { BaseCheckbox } from "@gradio/checkbox";
  import type { SelectData } from "@gradio/utils";
  
  let checked = false;
  
  function handleChange(event: CustomEvent<boolean>) {
    console.log('Checkbox changed:', event.detail);
  }
  
  function handleSelect(event: CustomEvent<SelectData>) {
    console.log('Selection event:', event.detail);
  }
</script>

<BaseCheckbox
  bind:value={checked}
  label="Enable notifications"
  interactive={true}
  on:change={handleChange}
  on:select={handleSelect}
/>

/**
 * Display component for checkbox values in gallery or table contexts
 * 
 * Component Props:
 */
interface ExampleProps {
  value: boolean | null;               // Value to display (required)
  type: "gallery" | "table";          // Display context type (required)
  selected?: boolean;                  // Selection state for styling (default: false)
}

<script lang="ts">
  import Example from "@gradio/checkbox/example";
  
  let checkboxValue = true;
  let isSelected = false;
</script>

<!-- For gallery display -->
<Example
  value={checkboxValue}
  type="gallery"
  selected={isSelected}
/>

<!-- For table display -->
<Example
  value={checkboxValue}
  type="table"
  selected={isSelected}
/>

interface LoadingStatus {
  eta: number;
  queue_position: number;
  queue_size: number;
  status: "pending" | "error" | "complete" | "generating" | "streaming";
  show_progress: "full" | "minimal" | "hidden";
  scroll_to_output: boolean;
  visible: boolean;
  fn_index: number;
  message?: string;
  progress?: {
    progress: number | null;
    index: number | null;
    length: number | null;
    unit: string | null;
    desc: string | null;
  }[];
  time_limit?: number | null;
}

interface SelectData {
  row_value?: any[];
  col_value?: any[];
  index: number | [number, number];
  value: any;
  selected?: boolean;
}

class Gradio<T extends Record<string, any> = Record<string, any>> {
  theme: string;
  version: string;
  i18n: I18nFormatter;
  root: string;
  autoscroll: boolean;
  max_file_size: number | null;
  client: Client;
  
  /**
   * Dispatch events to the Gradio framework
   * @param event_name - Name of event to dispatch
   * @param data - Optional event data payload
   */
  dispatch<E extends keyof T>(event_name: E, data?: T[E]): void;
}

/* Checkbox theming variables */
--checkbox-label-text-color        /* Label text color */
--checkbox-label-text-weight       /* Label font weight */
--checkbox-label-text-size         /* Label font size */
--checkbox-shadow                  /* Checkbox box shadow */
--checkbox-border-color            /* Default border color */
--checkbox-border-radius           /* Checkbox border radius */
--checkbox-background-color        /* Default background color */
--checkbox-check                   /* Checkmark icon/image */
--checkbox-background-color-selected  /* Background when checked */
--checkbox-border-color-focus      /* Border color on focus */
--checkbox-background-color-hover  /* Background on hover */
--checkbox-border-color-hover     /* Border color on hover */
--checkbox-background-color-focus /* Background on focus */

/* Global theming variables used */
--button-transition                /* Transition timing for interactions */
--line-md                         /* Medium line height */
--line-sm                         /* Small line height */
--size-2                          /* Spacing unit for margin */