Form Controls

/**
 * Standard text input component with validation support
 * @param props - Text field properties
 * @returns JSX element for text field
 */
function TextField(props: ITextFieldProps): JSX.Element;

interface ITextFieldProps {
  /** Label for the text field */
  label?: string;
  /** Current value */
  value?: string;
  /** Default value for uncontrolled component */
  defaultValue?: string;
  /** Placeholder text */
  placeholder?: string;
  /** Whether field allows multiple lines */
  multiline?: boolean;
  /** Number of rows for multiline */
  rows?: number;
  /** Whether field can be resized */
  resizable?: boolean;
  /** Auto-adjust height for multiline */
  autoAdjustHeight?: boolean;
  /** Whether field is required */
  required?: boolean;
  /** Whether field is disabled */
  disabled?: boolean;
  /** Whether field is read-only */
  readOnly?: boolean;
  /** Error message to display */
  errorMessage?: string;
  /** Description text */
  description?: string;
  /** Prefix text or component */
  prefix?: string;
  /** Suffix text or component */
  suffix?: string;
  /** Input type (text, password, email, etc.) */
  type?: string;
  /** Change event handler */
  onChange?: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;
  /** Validation function */
  onGetErrorMessage?: (value: string) => string | Promise<string>;
  /** Focus event handler */
  onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  /** Blur event handler */
  onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  /** Custom styles */
  styles?: ITextFieldStyles;
}

import React, { useState } from "react";
import { TextField } from "@fluentui/react";

function TextFieldExample() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const validateEmail = (value: string): string => {
    return value && !/\S+@\S+\.\S+/.test(value) 
      ? 'Please enter a valid email address' 
      : '';
  };

  return (
    <>
      {/* Basic text field */}
      <TextField
        label="Full Name"
        value={name}
        onChange={(_, newValue) => setName(newValue || '')}
        placeholder="Enter your full name"
        required
      />

      {/* Email field with validation */}
      <TextField
        label="Email Address"
        type="email"
        value={email}
        onChange={(_, newValue) => setEmail(newValue || '')}
        onGetErrorMessage={validateEmail}
        placeholder="user@example.com"
      />

      {/* Multiline text field */}
      <TextField
        label="Comments"
        multiline
        rows={4}
        placeholder="Enter your comments here..."
      />
    </>
  );
}

/**
 * Text field with input masking for formatted data
 * @param props - Masked text field properties
 * @returns JSX element for masked text field
 */
function MaskedTextField(props: IMaskedTextFieldProps): JSX.Element;

interface IMaskedTextFieldProps extends ITextFieldProps {
  /** Mask format string */
  mask?: string;
  /** Character used for mask placeholders */
  maskChar?: string;
  /** Format characters for mask */
  maskFormat?: { [key: string]: RegExp };
}

/** Default mask character constant */
const DEFAULT_MASK_CHAR: string;

import { MaskedTextField, DEFAULT_MASK_CHAR } from "@fluentui/react";

// Phone number masking
<MaskedTextField
  label="Phone Number"
  mask="(999) 999-9999"
  maskChar={DEFAULT_MASK_CHAR}
  placeholder="(555) 123-4567"
/>

// Date masking
<MaskedTextField
  label="Date of Birth"
  mask="99/99/9999"
  placeholder="MM/DD/YYYY"
/>

/**
 * Single-select dropdown component
 * @param props - Dropdown properties
 * @returns JSX element for dropdown
 */
function Dropdown(props: IDropdownProps): JSX.Element;

interface IDropdownProps {
  /** Label for the dropdown */
  label?: string;
  /** Available options */
  options: IDropdownOption[];
  /** Currently selected key(s) */
  selectedKey?: string | number | (string | number)[];
  /** Default selected key for uncontrolled */
  defaultSelectedKey?: string | number | (string | number)[];
  /** Allow multiple selection */
  multiSelect?: boolean;
  /** Placeholder text */
  placeholder?: string;
  /** Whether dropdown is disabled */
  disabled?: boolean;
  /** Whether dropdown is required */
  required?: boolean;
  /** Error message */
  errorMessage?: string;
  /** Change event handler */
  onChange?: (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number) => void;
  /** Custom option renderer */
  onRenderOption?: (option?: IDropdownOption, defaultRender?: (props?: IDropdownOption) => JSX.Element | null) => JSX.Element | null;
  /** Custom title renderer */
  onRenderTitle?: (selectedOptions?: IDropdownOption[], defaultRender?: (props?: IDropdownOption[]) => JSX.Element | null) => JSX.Element | null;
  /** Custom styles */
  styles?: IDropdownStyles;
}

interface IDropdownOption {
  /** Unique key for option */
  key: string | number;
  /** Display text */
  text: string;
  /** Whether option is disabled */
  disabled?: boolean;
  /** Whether option is selected */
  selected?: boolean;
  /** Whether option is hidden */
  hidden?: boolean;
  /** Additional data */
  data?: any;
  /** Item type for separators/headers */
  itemType?: DropdownMenuItemType;
}

enum DropdownMenuItemType {
  Normal = 0,
  Divider = 1,
  Header = 2,
}

import { Dropdown, IDropdownOption } from "@fluentui/react";

const countryOptions: IDropdownOption[] = [
  { key: 'us', text: 'United States' },
  { key: 'ca', text: 'Canada' },
  { key: 'uk', text: 'United Kingdom' },
  { key: 'fr', text: 'France' },
];

// Basic dropdown
<Dropdown
  label="Country"
  options={countryOptions}
  selectedKey="us"
  onChange={(_, option) => console.log('Selected:', option?.text)}
/>

// Multi-select dropdown
<Dropdown
  label="Skills"
  multiSelect
  options={[
    { key: 'js', text: 'JavaScript' },
    { key: 'ts', text: 'TypeScript' },
    { key: 'react', text: 'React' },
    { key: 'node', text: 'Node.js' },
  ]}
  placeholder="Select your skills"
/>

/**
 * Dropdown with text input and filtering capabilities
 * @param props - ComboBox properties
 * @returns JSX element for combo box
 */
function ComboBox(props: IComboBoxProps): JSX.Element;

/**
 * Performance-optimized combo box for large datasets
 * @param props - VirtualizedComboBox properties
 * @returns JSX element for virtualized combo box
 */
function VirtualizedComboBox(props: IComboBoxProps): JSX.Element;

interface IComboBoxProps {
  /** Available options */
  options: IComboBoxOption[];
  /** Selected key */
  selectedKey?: string | number | null;
  /** Current text value */
  text?: string;
  /** Allow free form text entry */
  allowFreeform?: boolean;
  /** Auto-complete behavior */
  autoComplete?: 'on' | 'off';
  /** Label for combo box */
  label?: string;
  /** Placeholder text */
  placeholder?: string;
  /** Whether combo box is disabled */
  disabled?: boolean;
  /** Whether combo box is required */
  required?: boolean;
  /** Error message */
  errorMessage?: string;
  /** Change event handler */
  onChange?: (event: React.FormEvent<IComboBox>, option?: IComboBoxOption, index?: number, value?: string) => void;
  /** Text change handler */
  onPendingValueChanged?: (option?: IComboBoxOption, index?: number, value?: string) => void;
  /** Resolve options asynchronously */
  onResolveOptions?: (options: IComboBoxOption[]) => IComboBoxOption[] | PromiseLike<IComboBoxOption[]>;
  /** Custom styles */
  styles?: IComboBoxStyles;
}

interface IComboBoxOption {
  /** Unique key */
  key: string | number;
  /** Display text */
  text: string;
  /** Whether option is disabled */
  disabled?: boolean;
  /** Whether option is selected */
  selected?: boolean;
  /** Item type */
  itemType?: SelectableOptionMenuItemType;
  /** Additional data */
  data?: any;
}

import { ComboBox, IComboBoxOption } from "@fluentui/react";

const cityOptions: IComboBoxOption[] = [
  { key: 'seattle', text: 'Seattle' },
  { key: 'sanfrancisco', text: 'San Francisco' },
  { key: 'newyork', text: 'New York' },
  { key: 'chicago', text: 'Chicago' },
];

// ComboBox with free form entry
<ComboBox
  label="City"
  options={cityOptions}
  allowFreeform
  autoComplete="on"
  placeholder="Type or select a city"
  onChange={(_, option, index, value) => {
    console.log('Selection:', option?.text || value);
  }}
/>

// ComboBox with async option loading
<ComboBox
  label="Search Users"
  options={[]}
  allowFreeform
  onResolveOptions={async (options) => {
    // Simulate API call
    const response = await fetch('/api/users');
    const users = await response.json();
    return users.map(user => ({ key: user.id, text: user.name }));
  }}
/>

/**
 * Checkbox input component with tri-state support
 * @param props - Checkbox properties
 * @returns JSX element for checkbox
 */
function Checkbox(props: ICheckboxProps): JSX.Element;

interface ICheckboxProps {
  /** Checkbox label */
  label?: string;
  /** Whether checkbox is checked */
  checked?: boolean;
  /** Default checked state for uncontrolled */
  defaultChecked?: boolean;
  /** Whether checkbox is disabled */
  disabled?: boolean;
  /** Whether checkbox is indeterminate */
  indeterminate?: boolean;
  /** Change event handler */
  onChange?: (event?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => void;
  /** ARIA label */
  ariaLabel?: string;
  /** ARIA description */
  ariaDescription?: string;
  /** Custom styles */
  styles?: ICheckboxStyles;
  /** Theme override */
  theme?: ITheme;
  /** Component ref */
  componentRef?: IRefObject<ICheckbox>;
}

import React, { useState } from "react";
import { Checkbox } from "@fluentui/react";

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);
  const [permissions, setPermissions] = useState({
    read: true,
    write: false,
    admin: false
  });

  return (
    <>
      {/* Basic checkbox */}
      <Checkbox
        label="I agree to the terms and conditions"
        checked={isChecked}
        onChange={(_, checked) => setIsChecked(!!checked)}
      />

      {/* Multiple checkboxes */}
      <Checkbox
        label="Read access"
        checked={permissions.read}
        onChange={(_, checked) => 
          setPermissions(prev => ({ ...prev, read: !!checked }))
        }
      />

      {/* Indeterminate checkbox for select all */}
      <Checkbox
        label="Select All"
        checked={Object.values(permissions).every(Boolean)}
        indeterminate={Object.values(permissions).some(Boolean) && 
                     !Object.values(permissions).every(Boolean)}
        onChange={(_, checked) => {
          const allChecked = !!checked;
          setPermissions({
            read: allChecked,
            write: allChecked,
            admin: allChecked
          });
        }}
      />
    </>
  );
}

/**
 * On/off switch component for boolean settings
 * @param props - Toggle properties
 * @returns JSX element for toggle
 */
function Toggle(props: IToggleProps): JSX.Element;

interface IToggleProps {
  /** Toggle label */
  label?: string;
  /** Text when toggle is on */
  onText?: string;
  /** Text when toggle is off */
  offText?: string;
  /** Whether toggle is checked */
  checked?: boolean;
  /** Default checked state */
  defaultChecked?: boolean;
  /** Whether toggle is disabled */
  disabled?: boolean;
  /** Change event handler */
  onChange?: (event: React.MouseEvent<HTMLElement>, checked?: boolean) => void;
  /** Custom styles */
  styles?: IToggleStyles;
  /** ARIA label */
  ariaLabel?: string;
}

import { Toggle } from "@fluentui/react";

// Basic toggle
<Toggle
  label="Enable notifications"
  onText="On"
  offText="Off"
  onChange={(_, checked) => console.log('Notifications:', checked)}
/>

// Toggle with custom text
<Toggle
  label="Dark mode"
  onText="Enabled"
  offText="Disabled"
  defaultChecked={false}
/>

/**
 * Radio button group for single selection
 * @param props - Choice group properties
 * @returns JSX element for choice group
 */
function ChoiceGroup(props: IChoiceGroupProps): JSX.Element;

/**
 * Individual choice option component
 * @param props - Choice group option properties
 * @returns JSX element for choice option
 */
function ChoiceGroupOption(props: IChoiceGroupOptionProps): JSX.Element;

interface IChoiceGroupProps {
  /** Available options */
  options?: IChoiceGroupOption[];
  /** Selected option key */
  selectedKey?: string | number;
  /** Default selected key */
  defaultSelectedKey?: string | number;
  /** Group label */
  label?: string;
  /** Whether group is required */
  required?: boolean;
  /** Whether group is disabled */
  disabled?: boolean;
  /** Change event handler */
  onChange?: (event?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption) => void;
  /** Custom styles */
  styles?: IChoiceGroupStyles;
}

interface IChoiceGroupOption {
  /** Unique key */
  key: string;
  /** Display text */
  text: string;
  /** Whether option is disabled */
  disabled?: boolean;
  /** Icon properties */
  iconProps?: IIconProps;
  /** Image properties for image choice */
  imageSrc?: string;
  /** Image size */
  imageSize?: { width: number; height: number };
  /** Additional image properties */
  imageAlt?: string;
}

import { ChoiceGroup, IChoiceGroupOption } from "@fluentui/react";

const paymentOptions: IChoiceGroupOption[] = [
  { key: 'credit', text: 'Credit Card', iconProps: { iconName: 'CreditCardSolid' } },
  { key: 'paypal', text: 'PayPal', iconProps: { iconName: 'PaymentCard' } },
  { key: 'bank', text: 'Bank Transfer', iconProps: { iconName: 'Bank' } },
];

<ChoiceGroup
  label="Payment Method"
  options={paymentOptions}
  selectedKey="credit"
  onChange={(_, option) => console.log('Selected:', option?.text)}
  required
/>

/**
 * Range slider for numeric value selection
 * @param props - Slider properties
 * @returns JSX element for slider
 */
function Slider(props: ISliderProps): JSX.Element;

interface ISliderProps {
  /** Current value */
  value?: number;
  /** Default value */
  defaultValue?: number;
  /** Minimum value */
  min: number;
  /** Maximum value */
  max: number;
  /** Step increment */
  step?: number;
  /** Slider label */
  label?: string;
  /** Whether to show value */
  showValue?: boolean;
  /** Value format function */
  valueFormat?: (value: number) => string;
  /** Whether slider is disabled */
  disabled?: boolean;
  /** Whether to snap to step */
  snapToStep?: boolean;
  /** Change event handler */
  onChange?: (value: number) => void;
  /** Custom styles */
  styles?: ISliderStyles;
}

import { Slider } from "@fluentui/react";

// Basic slider
<Slider
  label="Volume"
  min={0}
  max={100}
  step={5}
  defaultValue={50}
  showValue
  onChange={(value) => console.log('Volume:', value)}
/>

// Price range slider
<Slider
  label="Price Range"
  min={0}
  max={1000}
  step={10}
  valueFormat={(value) => `$${value}`}
  onChange={(value) => console.log('Max price:', value)}
/>

/**
 * Numeric input with increment/decrement buttons
 * @param props - Spin button properties
 * @returns JSX element for spin button
 */
function SpinButton(props: ISpinButtonProps): JSX.Element;

interface ISpinButtonProps {
  /** Current value */
  value?: string;
  /** Default value */
  defaultValue?: string;
  /** Minimum value */
  min?: number;
  /** Maximum value */
  max?: number;
  /** Step increment */
  step?: number;
  /** Label for spin button */
  label?: string;
  /** Whether spin button is disabled */
  disabled?: boolean;
  /** Validation function */
  onValidate?: (value: string, event?: React.SyntheticEvent<HTMLElement>) => string | void;
  /** Increment function */
  onIncrement?: (value: string) => string | void;
  /** Decrement function */
  onDecrement?: (value: string) => string | void;
  /** Custom styles */
  styles?: ISpinButtonStyles;
  /** Keyboard spin direction */
  keyboardSpinDirection?: KeyboardSpinDirection;
}

enum KeyboardSpinDirection {
  up = 0,
  down = 1,
}

import { SpinButton } from "@fluentui/react";

// Basic spin button
<SpinButton
  label="Quantity"
  min={1}
  max={100}
  step={1}
  defaultValue="1"
  onValidate={(value) => {
    const num = parseInt(value);
    if (isNaN(num) || num < 1) return "Must be at least 1";
    if (num > 100) return "Cannot exceed 100";
    return value;
  }}
/>

// Currency spin button
<SpinButton
  label="Budget"
  min={0}
  step={0.01}
  defaultValue="0.00"
  onIncrement={(value) => (parseFloat(value) + 0.01).toFixed(2)}
  onDecrement={(value) => Math.max(0, parseFloat(value) - 0.01).toFixed(2)}
/>

/**
 * Text input optimized for search scenarios
 * @param props - Search box properties
 * @returns JSX element for search box
 */
function SearchBox(props: ISearchBoxProps): JSX.Element;

interface ISearchBoxProps {
  /** Current search value */
  value?: string;
  /** Default value */
  defaultValue?: string;
  /** Placeholder text */
  placeholder?: string;
  /** Whether search box is disabled */
  disabled?: boolean;
  /** Show clear button */
  showIcon?: boolean;
  /** Change event handler */
  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, newValue?: string) => void;
  /** Search handler */
  onSearch?: (newValue: any) => void;
  /** Clear handler */
  onClear?: (event?: any) => void;
  /** Escape key handler */
  onEscape?: (event?: any) => void;
  /** Custom styles */
  styles?: ISearchBoxStyles;
}

import React, { useState } from "react";
import { SearchBox } from "@fluentui/react";

function SearchExample() {
  const [searchTerm, setSearchTerm] = useState('');

  return (
    <SearchBox
      placeholder="Search documents..."
      value={searchTerm}
      onChange={(_, newValue) => setSearchTerm(newValue || '')}
      onSearch={(value) => console.log('Searching for:', value)}
      onClear={() => setSearchTerm('')}
    />
  );
}

/**
 * Grid-based color picker with predefined color swatches
 * @param props - Swatch color picker properties
 * @returns JSX element for swatch color picker
 */
function SwatchColorPicker(props: ISwatchColorPickerProps): JSX.Element;

interface ISwatchColorPickerProps {
  /** Available color options */
  colorCells: IColorCellProps[];
  /** Currently selected color ID */
  selectedId?: string;
  /** Default selected color ID */
  defaultSelectedId?: string;
  /** Number of columns in grid */
  columnCount: number;
  /** Whether picker is disabled */
  disabled?: boolean;
  /** Color selection callback */
  onColorChanged?: (id?: string, color?: string) => void;
  /** Custom styles */
  styles?: ISwatchColorPickerStyles;
  /** Class name */
  className?: string;
}

interface IColorCellProps {
  /** Unique identifier for color */
  id: string;
  /** Color value (hex, rgb, etc.) */
  color: string;
  /** Display label for color */
  label?: string;
}

import { SwatchColorPicker, IColorCellProps } from "@fluentui/react";

const colorCells: IColorCellProps[] = [
  { id: 'red', color: '#ff0000', label: 'Red' },
  { id: 'green', color: '#00ff00', label: 'Green' },
  { id: 'blue', color: '#0000ff', label: 'Blue' },
  { id: 'yellow', color: '#ffff00', label: 'Yellow' },
  { id: 'purple', color: '#800080', label: 'Purple' },
  { id: 'orange', color: '#ffa500', label: 'Orange' },
];

<SwatchColorPicker
  colorCells={colorCells}
  columnCount={3}
  selectedId="blue"
  onColorChanged={(id, color) => console.log('Selected:', id, color)}
/>

/**
 * Low-level autocomplete input component
 * @param props - Autofill properties
 * @returns JSX element for autofill input
 */
function Autofill(props: IAutofillProps): JSX.Element;

interface IAutofillProps {
  /** Current value */
  value?: string;
  /** Default value */
  defaultValue?: string;
  /** Suggestions to show */
  suggestions?: string[];
  /** Whether to enable suggestions */
  enableAutofillOnKeyPress?: boolean[];
  /** Suggestion text to append */
  suggestedDisplayValue?: string;
  /** Input change handler */
  onInputChange?: (value: string) => void;
  /** Input focus handler */
  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
  /** Input blur handler */
  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
  /** Suggestion accepted handler */
  onSuggestionAccepted?: (value: string) => void;
  /** Custom styles */
  styles?: IAutofillStyles;
  /** Whether input is disabled */
  disabled?: boolean;
  /** Input placeholder */
  placeholder?: string;
}

import React, { useState } from "react";
import { Autofill } from "@fluentui/react";

function AutofillExample() {
  const [value, setValue] = useState('');
  const suggestions = ['apple', 'application', 'apply', 'appreciate'];

  return (
    <Autofill
      value={value}
      suggestions={suggestions.filter(s => s.toLowerCase().startsWith(value.toLowerCase()))}
      onInputChange={(newValue) => setValue(newValue)}
      onSuggestionAccepted={(suggestion) => setValue(suggestion)}
      placeholder="Type to see suggestions..."
    />
  );
}