What is Microsoft Fluent UI?

by

Microsoft Fluent UI is an open-source design system and front-end framework developed by Microsoft. It provides a comprehensive set of React components and utilities designed to create consistent, high-quality user interfaces that align with Microsoft’s design principles.

In this tutorial, I will explain how to use fluent UI features and show how to use the fluent UI dropdown control using React.

Key Features of Fluent UI

  1. Design System: Fluent UI is built on a design system emphasizing coherence, accessibility, and usability. It incorporates light, depth, motion, and scale principles to create visually appealing and functional interfaces.
  2. React Components: Fluent UI provides a rich library of React components that can be easily integrated into applications. These components are designed to be highly customizable, allowing developers to tweak styles and behaviors to fit specific needs. Examples include buttons, dialogs, icons, and more.
  3. Styling: Fluent UI offers robust styling solutions that allow developers to apply consistent theming and design tokens across their applications. This ensures that the UI elements maintain a uniform appearance, which is crucial for brand identity and user experience.
  4. State Management: The framework includes efficient state management techniques that help manage the state of UI components seamlessly. This is particularly useful for building dynamic and interactive user interfaces.
  5. Accessibility: Fluent UI’s core focus is accessibility. The components are built to be accessible out-of-the-box, adhering to ARIA standards and other accessibility guidelines. This ensures that applications built with Fluent UI are usable by people with disabilities.
  6. Cross-Platform Compatibility: Fluent UI is designed to work across different platforms, including web, desktop, and mobile. This makes it easier for developers to create applications that provide a consistent experience regardless of the device used.

Fluent ui controls

Microsoft Fluent UI controls are a set of pre-built, customizable UI components provided by the Fluent UI framework. These controls are designed to help developers create consistent, accessible, and visually appealing user interfaces with minimal effort. Here are some key aspects and examples of Fluent UI controls:

Advantages of Fluent UI Controls

  1. Consistency: Fluent UI controls ensure a consistent look and feel across different applications and platforms. This consistency helps maintain a cohesive user experience, which is particularly important for enterprise applications.
  2. Accessibility: Accessibility is a primary focus of Fluent UI controls. They are built to comply with ARIA standards and other accessibility guidelines, ensuring that applications are usable by people with disabilities.
  3. Customizability: While Fluent UI controls come with default styles and behaviors, they are highly customizable. Developers can easily override styles, add custom themes, and modify behaviors to fit specific requirements.
  4. Cross-Platform Compatibility: Fluent UI controls are designed to work seamlessly across various platforms, including web, desktop, and mobile. This makes it easier to build applications that provide a consistent user experience regardless of the device used.

Examples of Fluent UI Controls

  1. Button: The Button control triggers actions when clicked. It supports various styles, such as primary, secondary, and icon buttons, and can be customized to fit different design requirements.
  2. Text Box: The Text Box control is used for user input. It comes with features like placeholder text, validation, and error messages. It can be styled to match the application’s design theme.
  3. Combo Box: The Combo Box control allows users to select an option from a dropdown list. It supports features like search and multi-select, making it suitable for forms and complex data entry scenarios.
  4. Date Picker: The Date Picker control provides a user-friendly interface for selecting dates. It includes a calendar view, date range selection, and localization support.
  5. Slider: The Slider control allows users to select a value from a range by sliding a handle along a track. It is useful for settings that involve a range of values, such as volume control or brightness adjustment.
  6. Toggle: The Toggle control is a switch that users can turn on or off. It is often used for settings and preferences, providing a clear visual indication of the current state.
  7. Check Box: The Check Box control allows users to select one or more options from a list. It is commonly used in forms and surveys.
  8. Radio Group: The Radio Group control selects one option from a set of mutually exclusive options. It is typically used in forms where a single choice is required.
  9. Rating: The Rating control allows users to provide feedback by selecting several stars or other symbols. It is often used in review and rating systems.

The Fluent UI React library makes integrating fluent UI controls into applications easy. Developers can import the necessary components and use them in their React applications.

How to use fluent ui dropdown with react?

Let me show you how to use the Fluent UI Dropdown component in a React application. To do this, we first need to include the Fluent UI library, import the necessary components, and implement the dropdown in your code.

You can follow the below steps:

1. Install Fluent UI: First, you must install the Fluent UI library in your React project. You can do this using npm or yarn:

npm install @fluentui/react

or

yarn add @fluentui/react

2. Import the Necessary Components: In your React component file, import the Dropdown component and any necessary types and utilities from Fluent UI:

import React, { useState } from 'react';
import { Dropdown, IDropdownOption } from '@fluentui/react';

3. Define the Dropdown Options: Next, you can define the options that will be displayed in the dropdown. Each option should have a key and a text property:

const dropdownOptions: IDropdownOption[] = [
  { key: 'option1', text: 'Option 1' },
  { key: 'option2', text: 'Option 2' },
  { key: 'option3', text: 'Option 3' },
];

4. Implement the Dropdown Component: Use the Dropdown component in your React component. You can manage the selected option using the component’s state:

const MyDropdownComponent = () => {
  const [selectedKey, setSelectedKey] = useState<string | number | undefined>(undefined);

  const onChange = (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption): void => {
    setSelectedKey(option ? option.key : undefined);
  };

  return (
    <Dropdown
      placeholder="Select an option"
      label="Basic Dropdown"
      options={dropdownOptions}
      selectedKey={selectedKey}
      onChange={onChange}
    />
  );
};

export default MyDropdownComponent;

5. Handle Dropdown Events: The onChange event handler is used to update the state when a new option is selected. This is where you can handle any additional logic that needs to occur when the selection changes.

Here is the complete example code for a React component using the Fluent UI Dropdown:

import React, { useState } from 'react';
import { Dropdown, IDropdownOption } from '@fluentui/react';

const dropdownOptions: IDropdownOption[] = [
  { key: 'option1', text: 'Option 1' },
  { key: 'option2', text: 'Option 2' },
  { key: 'option3', text: 'Option 3' },
];

const MyDropdownComponent = () => {
  const [selectedKey, setSelectedKey] = useState<string | number | undefined>(undefined);

  const onChange = (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption): void => {
    setSelectedKey(option ? option.key : undefined);
  };

  return (
    <Dropdown
      placeholder="Select an option"
      label="Basic Dropdown"
      options={dropdownOptions}
      selectedKey={selectedKey}
      onChange={onChange}
    />
  );
};

export default MyDropdownComponent;

This is how to use the fluent UI dropdown control using React.

Conclusion

I hope now you learned how to work with fluent UI controls. I have also explained how to use the fluent UI dropdown control.

You may also like the following tutorials:

>