Fluent UI Toggle Example - Fluent-ui Typing CST Test
Loading…
Fluent UI Toggle Example — Fluent-ui Code
Shows a toggle switch using Fluent UI Toggle component.
import React, { useState } from 'react';
import { Toggle, Stack } from '@fluentui/react';
const ToggleExample = () => {
const [on, setOn] = useState(false);
return (
<Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh' } }}>
<Toggle label='Enable Feature' checked={on} onChange={(e, checked) => setOn(!!checked)} />
<div>{on ? 'Feature Enabled' : 'Feature Disabled'}</div>
</Stack>
);
};
export default ToggleExample;Fluent-ui Language Guide
Fluent UI is a React-based front-end framework developed by Microsoft that provides a set of customizable, accessible, and enterprise-ready UI components for building modern web applications.
Primary Use Cases
- ▸React-based enterprise web applications
- ▸Office 365 and Microsoft Teams integrations
- ▸Admin dashboards with complex forms and data tables
- ▸Accessible and standardized UI across large organizations
- ▸Rapid prototyping with consistent design patterns
Notable Features
- ▸Accessible components with ARIA roles
- ▸Themeable design system with light/dark modes
- ▸Composable React components (Button, ComboBox, DetailsList)
- ▸Integration with Fluent Design System
- ▸Responsive design utilities
Origin & Creator
Created by Microsoft (initially as Office UI Fabric) in 2016 to standardize UI for Office and enterprise apps.
Industrial Note
Fluent UI is widely used in Microsoft ecosystems, Office 365 integrations, and enterprise web applications requiring consistency with Microsoft design guidelines.