feat: add TerminalCheckbox and TerminalRadio components

app/playground/page.tsx

@@ -1,5 +1,5 @@
 import { TerminalApp } from '@/components/terminal-app'
-import { Terminal, TerminalCommand, TerminalDiff, TerminalOutput, TerminalSpinner, TerminalBadge, ThemeSwitcher } from '@/components/terminal'
+import { Terminal, TerminalCommand, TerminalDiff, TerminalOutput, TerminalSpinner, TerminalBadge, ThemeSwitcher, TerminalCheckbox, TerminalRadio } from '@/components/terminal'
 import { TerminalProgress } from '@/components/terminal-progress'
 import { LogDemo } from './log-demo'
 import { PromptDemo } from './prompt-demo'
@@ -161,6 +161,27 @@ export default function PlaygroundPage() {
         </Terminal>
       </section>
 
+      <section className="flex flex-col gap-2">
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">
+          Form Controls
+        </h2>
+        <Terminal title="config-wizard.sh">
+          <TerminalCommand>./install.sh --interactive</TerminalCommand>
+          <TerminalOutput type="info">Select components to install:</TerminalOutput>
+          <div className="flex flex-col gap-1 mt-2 mb-4 ml-2">
+            <TerminalCheckbox label="Core CLI tools" defaultChecked disabled />
+            <TerminalCheckbox label="Documentation" defaultChecked />
+            <TerminalCheckbox label="Example projects" />
+          </div>
+          <TerminalOutput type="info">Choose default theme:</TerminalOutput>
+          <div className="flex flex-col gap-1 mt-2 ml-2">
+            <TerminalRadio name="wizard-theme" label="Dracula" defaultChecked />
+            <TerminalRadio name="wizard-theme" label="Nord" />
+            <TerminalRadio name="wizard-theme" label="Monokai" />
+          </div>
+        </Terminal>
+      </section>
+
       <section className="flex flex-col gap-2">
         <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">
           Typing Animation

components/terminal-checkbox.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { InputHTMLAttributes, forwardRef } from 'react'
+
+export interface TerminalCheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+  /** The text label displayed next to the checkbox */
+  label: string
+}
+
+/**
+ * A terminal-styled checkbox component `[x]` / `[ ]`.
+ * 
+ * @param label - The text label displayed next to the checkbox
+ * @param props - Standard HTML input props (checked, onChange, disabled, etc.)
+ * 
+ * @example
+ * ```tsx
+ * <TerminalCheckbox label="Enable experimental features" defaultChecked />
+ * ```
+ */
+export const TerminalCheckbox = forwardRef<HTMLInputElement, TerminalCheckboxProps>(
+  ({ label, className = '', ...props }, ref) => {
+    return (
+      <label className={`group flex items-start gap-2 cursor-pointer font-mono text-sm text-[var(--term-fg)] ${className}`.trim()}>
+        <input
+          type="checkbox"
+          ref={ref}
+          className="peer sr-only"
+          {...props}
+        />
+        <div className="relative flex shrink-0 items-center justify-center w-[3ch] h-5 text-[var(--term-fg-dim)] group-hover:text-[var(--term-cyan)] peer-focus-visible:ring-1 peer-focus-visible:ring-[var(--term-blue)] rounded peer-disabled:opacity-50 peer-checked:text-[var(--term-green)]">
+          <span className="absolute inset-0 flex items-center justify-center opacity-100 group-has-[:checked]:opacity-0">[ ]</span>
+          <span className="absolute inset-0 flex items-center justify-center opacity-0 group-has-[:checked]:opacity-100">[x]</span>
+        </div>
+        <span className="pt-[1px] peer-disabled:opacity-50 select-none">{label}</span>
+      </label>
+    )
+  }
+)
+TerminalCheckbox.displayName = 'TerminalCheckbox'
+
+export interface TerminalRadioProps extends InputHTMLAttributes<HTMLInputElement> {
+  /** The text label displayed next to the radio button */
+  label: string
+}
+
+/**
+ * A terminal-styled radio button component `(•)` / `( )`.
+ * 
+ * @param label - The text label displayed next to the radio button
+ * @param props - Standard HTML input props (checked, onChange, value, name, etc.)
+ * 
+ * @example
+ * ```tsx
+ * <TerminalRadio name="theme" value="dark" label="Dark mode" defaultChecked />
+ * ```
+ */
+export const TerminalRadio = forwardRef<HTMLInputElement, TerminalRadioProps>(
+  ({ label, className = '', ...props }, ref) => {
+    return (
+      <label className={`group flex items-start gap-2 cursor-pointer font-mono text-sm text-[var(--term-fg)] ${className}`.trim()}>
+        <input
+          type="radio"
+          ref={ref}
+          className="peer sr-only"
+          {...props}
+        />
+        <div className="relative flex shrink-0 items-center justify-center w-[3ch] h-5 text-[var(--term-fg-dim)] group-hover:text-[var(--term-cyan)] peer-focus-visible:ring-1 peer-focus-visible:ring-[var(--term-blue)] rounded peer-disabled:opacity-50 peer-checked:text-[var(--term-green)]">
+          <span className="absolute inset-0 flex items-center justify-center opacity-100 group-has-[:checked]:opacity-0">( )</span>
+          <span className="absolute inset-0 flex items-center justify-center opacity-0 group-has-[:checked]:opacity-100">(•)</span>
+        </div>
+        <span className="pt-[1px] peer-disabled:opacity-50 select-none">{label}</span>
+      </label>
+    )
+  }
+)
+TerminalRadio.displayName = 'TerminalRadio'

components/terminal.tsx

@@ -264,3 +264,4 @@ export { TerminalAutocomplete, useAutocomplete, COMMON_COMMANDS, COMMON_FLAGS, f
 export { TerminalGhosttyTheme, GhosttyThemePicker } from './terminal-ghostty'
 export { ThemeSwitcher } from './theme-switcher'
 export { TerminalBadge } from './terminal-badge'
+export { TerminalCheckbox, TerminalRadio } from './terminal-checkbox'