0
# Office UI Fabric React
1

2
Office UI Fabric React is Microsoft's comprehensive React component library that implements the Fluent Design System for building consistent web experiences across Office and Office 365 applications. It provides a robust collection of 80+ production-ready UI components including inputs, navigation, data display, overlays, and layout systems, all designed with accessibility, theming, and responsive design principles.
3

4
## Package Information
5

6
- **Package Name**: office-ui-fabric-react
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install office-ui-fabric-react`
10

11
## Core Imports
12

13
```typescript
14
import { Button, TextField, DetailsList, Panel, Fabric } from "office-ui-fabric-react";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { Button, TextField, DetailsList, Panel, Fabric } = require("office-ui-fabric-react");
21
```
22

23
## Basic Usage
24

25
```typescript
26
import React from "react";
27
import { 
28
  Fabric, 
29
  PrimaryButton, 
30
  TextField, 
31
  Panel,
32
  PanelType,
33
  IColumn,
34
  DetailsList 
35
} from "office-ui-fabric-react";
36

37
function App() {
38
  const [isOpen, setIsOpen] = React.useState(false);
39
  const [text, setText] = React.useState("");
40
  
41
  const items = [
42
    { name: "John Doe", email: "john@example.com", department: "Engineering" },
43
    { name: "Jane Smith", email: "jane@example.com", department: "Design" }
44
  ];
45
  
46
  const columns: IColumn[] = [
47
    { key: "name", name: "Name", fieldName: "name", minWidth: 100 },
48
    { key: "email", name: "Email", fieldName: "email", minWidth: 150 },
49
    { key: "department", name: "Department", fieldName: "department", minWidth: 100 }
50
  ];
51

52
  return (
53
    <Fabric>
54
      <TextField
55
        label="Enter text"
56
        value={text}
57
        onChange={(e, newValue) => setText(newValue || "")}
58
      />
59
      
60
      <PrimaryButton
61
        text="Open Panel"
62
        onClick={() => setIsOpen(true)}
63
      />
64
      
65
      <DetailsList
66
        items={items}
67
        columns={columns}
68
        setKey="set"
69
        layoutMode={DetailsListLayoutMode.justified}
70
      />
71
      
72
      <Panel
73
        isOpen={isOpen}
74
        type={PanelType.medium}
75
        headerText="Sample Panel"
76
        onDismiss={() => setIsOpen(false)}
77
      >
78
        <p>Panel content goes here</p>
79
      </Panel>
80
    </Fabric>
81
  );
82
}
83
```
84

85
## Architecture
86

87
Office UI Fabric React is built around several key architectural principles:
88

89
- **Fluent Design System**: Consistent visual language and interaction patterns following Microsoft's design principles
90
- **Theme System**: Comprehensive theming support through design tokens, allowing deep customization of colors, fonts, and spacing
91
- **CSS-in-JS Styling**: Uses `@uifabric/merge-styles` for performant, component-scoped styling with theme integration  
92
- **Accessibility First**: Full ARIA support, keyboard navigation, screen reader optimization, and high contrast support
93
- **Foundation Framework**: Component composition system using slots and higher-order components for extensibility
94
- **TypeScript Integration**: Complete type definitions with generic type preservation and strict type safety
95
- **Performance Optimization**: Virtualization for large datasets, lazy loading, and efficient re-rendering patterns
96

97
## Capabilities
98

99
### Input Components
100

101
Comprehensive form controls including text inputs, dropdowns, checkboxes, and specialized pickers for building interactive forms and data entry interfaces.
102

103
```typescript { .api }
104
// Text Input
105
interface ITextField {
106
  focus(): void;
107
  blur(): void;
108
  select(): void;
109
  setSelectionStart(start: number): void;
110
  setSelectionEnd(end: number): void;
111
  setSelectionRange(start: number, end: number): void;
112
}
113

114
interface ITextFieldProps {
115
  label?: string;
116
  value?: string;
117
  defaultValue?: string;
118
  placeholder?: string;
119
  multiline?: boolean;
120
  rows?: number;
121
  maxLength?: number;
122
  disabled?: boolean;
123
  readOnly?: boolean;
124
  required?: boolean;
125
  errorMessage?: string;
126
  onChange?: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;
127
  onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
128
  onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
129
}
130

131
// Dropdown Selection
132
interface IDropdown {
133
  selectedOptions: IDropdownOption[];
134
  focus(): void;
135
}
136

137
interface IDropdownProps {
138
  options: IDropdownOption[];
139
  selectedKey?: string | number;
140
  selectedKeys?: (string | number)[];
141
  multiSelect?: boolean;
142
  placeholder?: string;
143
  disabled?: boolean;
144
  required?: boolean;
145
  label?: string;
146
  errorMessage?: string;
147
  onChange?: (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number) => void;
148
}
149

150
interface IDropdownOption {
151
  key: string | number;
152
  text: string;
153
  disabled?: boolean;
154
  hidden?: boolean;
155
  selected?: boolean;
156
  title?: string;
157
  ariaLabel?: string;
158
}
159
```
160

161
[Input Components](./input-components.md)
162

163
### Button Components
164

165
Comprehensive button system with multiple variants optimized for different contexts and user actions, from simple clicks to complex dropdown menus.
166

167
```typescript { .api }
168
interface IButton {
169
  focus(): void;
170
  dismissMenu(): void;
171
  openMenu(shouldFocusOnContainer?: boolean): void;
172
}
173

174
interface IButtonProps {
175
  text?: string;
176
  primary?: boolean;
177
  disabled?: boolean;
178
  href?: string;
179
  target?: string;
180
  iconProps?: IIconProps;
181
  menuProps?: IContextualMenuProps;
182
  split?: boolean;
183
  onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>) => void;
184
  onMenuClick?: (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, button?: IButtonProps) => void;
185
}
186

187
enum ButtonType {
188
  normal = 0,
189
  primary = 1,
190
  hero = 2,
191
  compound = 3,
192
  command = 4,
193
  icon = 5,
194
  default = 6
195
}
196
```
197

198
[Button Components](./button-components.md)
199

200
### Data Display Components
201

202
High-performance components for displaying structured data including virtualized lists, data tables, and user representation elements.
203

204
```typescript { .api }
205
// High-Performance Data Table
206
interface IDetailsList {
207
  forceUpdate(): void;
208
  focusIndex(index: number): void;
209
}
210

211
interface IDetailsListProps {
212
  items: any[];
213
  columns: IColumn[];
214
  groups?: IGroup[];
215
  groupProps?: IDetailsGroupRenderProps;
216
  selection?: ISelection;
217
  selectionMode?: SelectionMode;
218
  layoutMode?: DetailsListLayoutMode;
219
  compact?: boolean;
220
  isHeaderVisible?: boolean;
221
  onItemInvoked?: (item: any, index: number) => void;
222
  onColumnHeaderClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void;
223
  checkboxVisibility?: CheckboxVisibility;
224
  setKey?: string;
225
  className?: string;
226
}
227

228
interface IColumn {
229
  key: string;
230
  name: string;
231
  fieldName?: string;
232
  minWidth: number;
233
  maxWidth?: number;
234
  isResizable?: boolean;
235
  isSorted?: boolean;
236
  isSortedDescending?: boolean;
237
  isRowHeader?: boolean;
238
  isMultiline?: boolean;
239
  columnActionsMode?: ColumnActionsMode;
240
  onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void;
241
  onRender?: (item: any, index: number, column: IColumn) => React.ReactNode;
242
}
243

244
enum DetailsListLayoutMode {
245
  fixedColumns = 0,
246
  justified = 1
247
}
248

249
enum SelectionMode {
250
  none = 0,
251
  single = 1,
252
  multiple = 2
253
}
254
```
255

256
[Data Display Components](./data-display-components.md)
257

258
### Layout Components
259

260
Flexible layout system including Stack for flexbox layouts, Grid for CSS grid layouts, and responsive container components.
261

262
```typescript { .api }
263
interface IStackProps {
264
  as?: React.ElementType;
265
  horizontal?: boolean;
266
  reversed?: boolean;
267
  horizontalAlign?: Alignment;
268
  verticalAlign?: Alignment;
269
  verticalFill?: boolean;
270
  disableShrink?: boolean;
271
  wrap?: boolean;
272
  gap?: number | string;
273
  padding?: number | string;
274
  maxWidth?: number | string;
275
  tokens?: IStackTokens;
276
  styles?: IStyleFunctionOrObject<IStackStyleProps, IStackStyles>;
277
  theme?: ITheme;
278
  children?: React.ReactNode;
279
}
280

281
interface IStackTokens {
282
  childrenGap?: number | string;
283
  maxHeight?: number | string;
284
  maxWidth?: number | string;
285
  padding?: number | string | IStackTokens;
286
}
287

288
type Alignment = 
289
  | "start" 
290
  | "end" 
291
  | "center" 
292
  | "space-between" 
293
  | "space-around" 
294
  | "space-evenly" 
295
  | "baseline" 
296
  | "stretch";
297
```
298

299
[Layout Components](./layout-components.md)
300

301
### Navigation Components
302

303
Navigation components for building consistent wayfinding experiences including vertical navigation, breadcrumbs, command bars, and pivot tabs.
304

305
```typescript { .api }
306
// Command Bar for Actions
307
interface ICommandBarProps {
308
  items: ICommandBarItemProps[];
309
  overflowItems?: ICommandBarItemProps[];
310
  overflowButtonProps?: IButtonProps;
311
  farItems?: ICommandBarItemProps[];
312
  elippsisAriaLabel?: string;
313
  className?: string;
314
  styles?: IStyleFunctionOrObject<ICommandBarStyleProps, ICommandBarStyles>;
315
  theme?: ITheme;
316
}
317

318
interface ICommandBarItemProps extends IContextualMenuItem {
319
  cacheKey?: string;
320
  renderedInOverflow?: boolean;
321
  iconOnly?: boolean;
322
  buttonStyles?: Partial<IButtonStyles>;
323
}
324

325
// Pivot Navigation
326
interface IPivotProps {
327
  selectedKey?: string;
328
  defaultSelectedKey?: string;
329
  onLinkClick?: (item?: PivotItem, ev?: React.MouseEvent<HTMLElement>) => void;
330
  linkFormat?: PivotLinkFormat;
331
  linkSize?: PivotLinkSize;
332
  headersOnly?: boolean;
333
  styles?: IStyleFunctionOrObject<IPivotStyleProps, IPivotStyles>;
334
}
335

336
enum PivotLinkFormat {
337
  links = 0,
338
  tabs = 1
339
}
340

341
enum PivotLinkSize {
342
  normal = 0,
343
  large = 1
344
}
345
```
346

347
[Navigation Components](./navigation-components.md)
348

349
### Overlay Components
350

351
Modal and non-modal overlay components including dialogs, panels, callouts, and tooltips for displaying contextual information and actions.
352

353
```typescript { .api }
354
// Side Panel
355
interface IPanel {
356
  open(): void;
357
  dismiss(): void;
358
}
359

360
interface IPanelProps {
361
  isOpen?: boolean;
362
  hasCloseButton?: boolean;
363
  isLightDismiss?: boolean;
364
  isHiddenOnDismiss?: boolean;
365
  isBlocking?: boolean;
366
  type?: PanelType;
367
  headerText?: string;
368
  headerTextProps?: React.HTMLProps<HTMLDivElement>;
369
  closeButtonAriaLabel?: string;
370
  customWidth?: string;
371
  onDismiss?: (ev?: React.SyntheticEvent<HTMLElement>) => void;
372
  onOpened?: () => void;
373
  styles?: IStyleFunctionOrObject<IPanelStyleProps, IPanelStyles>;
374
  theme?: ITheme;
375
  children?: React.ReactNode;
376
}
377

378
enum PanelType {
379
  smallFluid = 0,
380
  smallFixedFar = 1,
381
  smallFixedNear = 2,
382
  medium = 3,
383
  large = 4,
384
  largeFixed = 5,
385
  extraLarge = 6,
386
  custom = 99
387
}
388

389
// Dialog
390
interface IDialogProps {
391
  isOpen?: boolean;
392
  onDismiss?: (ev?: React.MouseEvent<HTMLButtonElement>) => void;
393
  isBlocking?: boolean;
394
  isDarkOverlay?: boolean;
395
  type?: DialogType;
396
  title?: string;
397
  subText?: string;
398
  maxWidth?: number | string;
399
  minWidth?: number | string;
400
  styles?: IStyleFunctionOrObject<IDialogStyleProps, IDialogStyles>;
401
  children?: React.ReactNode;
402
}
403

404
enum DialogType {
405
  normal = 0,
406
  largeHeader = 1,
407
  close = 2
408
}
409
```
410

411
[Overlay Components](./overlay-components.md)
412

413
### Picker Components
414

415
Specialized selection components for people, tags, and other complex objects with search, filtering, and suggestion capabilities.
416

417
```typescript { .api }
418
interface IBasePickerProps<T> {
419
  selectedItems?: T[];
420
  defaultSelectedItems?: T[];
421
  onChange?: (items?: T[]) => void;
422
  onResolveSuggestions: (filter: string, selectedItems?: T[]) => T[] | Promise<T[]>;
423
  onEmptyInputFocus?: (selectedItems?: T[]) => T[] | Promise<T[]>;
424
  getTextFromItem?: (item: T, currentValue?: string) => string;
425
  pickerSuggestionsProps?: IBasePickerSuggestionsProps;
426
  pickerCalloutProps?: ICalloutProps;
427
  className?: string;
428
  inputProps?: IInputProps;
429
  disabled?: boolean;
430
  itemLimit?: number;
431
  createGenericItem?: (input: string, ValidationState: ValidationState) => ISuggestionModel<T>;
432
  onValidateInput?: (input: string) => ValidationState;
433
  removeButtonAriaLabel?: string;
434
  onItemSelected?: (selectedItem?: T) => T | null;
435
  selectedItemsListProps?: ISelectedItemsListProps<T>;
436
  onGetMoreResults?: (filter: string, selectedItems?: T[]) => T[] | Promise<T[]>;
437
  searchingText?: ((props: { input: string }) => string) | string;
438
  enableTabKeyInputSubmit?: boolean;
439
  resolveDelay?: number;
440
}
441
```
442

443
**Note**: This library also includes specialized picker components for people/tags with search and filtering capabilities, plus additional feedback components like MessageBar, ProgressIndicator, and Spinner that are integrated throughout the documented components above.
444

445
### Styling and Theming
446

447
Comprehensive theming system with design tokens, CSS-in-JS utilities, and theme customization for consistent branding across applications.
448

449
```typescript { .api }
450
// Theme System
451
interface ITheme {
452
  palette: IPalette;
453
  fonts: IFontStyles;
454
  semanticColors: ISemanticColors;
455
  spacing: ISpacing;
456
  effects: IEffects;
457
  isInverted?: boolean;
458
  disableGlobalClassNames?: boolean;
459
}
460

461
interface IPalette {
462
  themePrimary: string;
463
  themeLighterAlt: string;
464
  themeLighter: string;
465
  themeLight: string;
466
  themeTertiary: string;
467
  themeSecondary: string;
468
  themeDarkAlt: string;
469
  themeDark: string;
470
  themeDarker: string;
471
  neutralLighterAlt: string;
472
  neutralLighter: string;
473
  neutralLight: string;
474
  neutralQuaternaryAlt: string;
475
  neutralQuaternary: string;
476
  neutralTertiaryAlt: string;
477
  neutralTertiary: string;
478
  neutralSecondary: string;
479
  neutralPrimaryAlt: string;
480
  neutralPrimary: string;
481
  neutralDark: string;
482
  black: string;
483
  white: string;
484
}
485

486
// Styling Functions
487
function mergeStyles(...args: (IStyle | IStyleObject | string | false | null | undefined)[]): string;
488
function mergeStyleSets<T extends IConcatenatedStyleSet<T>>(
489
  ...styleSets: Array<T | undefined | false | null>
490
): IProcessedStyleSet<T>;
491

492
// Theme Creation
493
function createTheme(theme?: IPartialTheme, depComments?: boolean): ITheme;
494
function loadTheme(theme: IPartialTheme, depComments?: boolean): ITheme;
495
```
496

497
**Additional theming capabilities**: Comprehensive theming system with ITheme, IPalette interfaces and mergeStyles functions for deep customization.
498

499
### Utilities
500

501
Essential utility functions for focus management, keyboard handling, event management, and responsive behavior that support the component ecosystem.
502

503
```typescript { .api }
504
// Focus Management
505
interface IFocusZoneProps {
506
  direction?: FocusZoneDirection;
507
  defaultActiveElement?: string;
508
  isCircularNavigation?: boolean;
509
  isInnerZoneKeystroke?: (ev: React.KeyboardEvent<HTMLElement>) => boolean;
510
  onActiveElementChanged?: (element?: HTMLElement, ev?: React.FocusEvent<HTMLElement>) => void;
511
  onBeforeFocus?: (childElement?: HTMLElement) => boolean;
512
  checkForNoWrap?: boolean;
513
  allowFocusRoot?: boolean;
514
  allowTabKey?: boolean;
515
  disabled?: boolean;
516
  shouldInputLoseFocusOnArrowKey?: (inputElement: HTMLInputElement) => boolean;
517
  shouldReceiveFocus?: (childElement?: HTMLElement) => boolean;
518
  handleTabKey?: FocusZoneTabbableElements;
519
  doNotAllowFocusEventToPropagate?: boolean;
520
  stopFocusPropagation?: boolean;
521
  preventDefaultWhenHandled?: boolean;
522
  preventFocusRestoration?: boolean;
523
  shouldRestoreFocus?: boolean;
524
  as?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;
525
  elementRef?: React.Ref<HTMLElement>;
526
  rootProps?: React.HTMLAttributes<HTMLDivElement>;
527
  onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
528
  onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
529
  role?: string;
530
}
531

532
enum FocusZoneDirection {
533
  vertical = 0,
534
  horizontal = 1,
535
  bidirectional = 2,
536
  domOrder = 3
537
}
538

539
// Selection Management
540
interface ISelection {
541
  count: number;
542
  mode: SelectionMode;
543
  canSelectItem: (item: any, index?: number) => boolean;
544
  getItems(): any[];
545
  getSelectedCount(): number;
546
  getSelectedIndices(): number[];
547
  setAllSelected(isAllSelected: boolean): void;
548
  setKeySelected(key: string, isSelected: boolean, shouldAnchor: boolean): void;
549
  setIndexSelected(index: number, isSelected: boolean, shouldAnchor: boolean): void;
550
  setRangeSelected(fromIndex: number, count: number, isSelected: boolean, shouldAnchor: boolean): void;
551
  isAllSelected(): boolean;
552
  isKeySelected(key: string): boolean;
553
  isIndexSelected(index: number): boolean;
554
  setItems(items: any[], shouldClear: boolean): void;
555
  setChangeEvents(isEnabled: boolean, suppressChange?: boolean): void;
556
  toggleAllSelected(): void;
557
  toggleKeySelected(key: string): void;
558
  toggleIndexSelected(index: number): void;
559
  toggleRangeSelected(fromIndex: number, count: number): void;
560
}
561
```
562

563
**Additional utility capabilities**: Advanced focus management (FocusZone) and selection state management (ISelection) utilities integrated throughout the components.
564

565
## Types
566

567
```typescript { .api }
568
// Core component interfaces
569
interface IStyleFunctionOrObject<TStylesProps, TStyleSet extends IStyleSet<TStyleSet>> {
570
  (props: TStylesProps): Partial<TStyleSet>;
571
}
572

573
interface IRefObject<T> {
574
  (ref: T | null): void;
575
}
576

577
// Event handling
578
type IStyleFunction<TStylesProps, TStyleSet> = (props: TStylesProps) => Partial<TStyleSet>;
579

580
// Style definitions
581
interface IStyle {
582
  [key: string]: any;
583
}
584

585
interface IStyleSet<TStyleSet> {
586
  [P in keyof Omit<TStyleSet, keyof IStyleSet<TStyleSet>>]: IStyle;
587
}
588

589
// Component composition
590
interface IProcessedStyleSet<T> {
591
  [P in keyof T]: string;
592
}
593
```