UI Elements Documentation

This section provides a comprehensive guide to understanding and utilizing various User Interface (UI) elements within the Microsoft development ecosystem. Learn how to craft engaging and intuitive user experiences.

Buttons

Buttons are fundamental interactive elements used to trigger actions. They can range from simple text buttons to more visually distinct ones with icons.

Basic Button Examples

<button>Primary Action</button>
<button style="background-color: #666;">Secondary Action</button>
<button disabled>Disabled Button</button>

Input Fields

Input fields allow users to enter data. This includes text boxes, text areas, dropdowns, and more.

Common Input Fields

Username:

Message:

Country:

<label for="username">Username:</label>
<input type="text" id="username" placeholder="Enter your username">

<label for="message">Message:</label><br>
<textarea id="message" placeholder="Type your message here..."></textarea>

<label for="country">Country:</label>
<select id="country">
    <option value="">--Select Country--</option>
    <option value="usa">United States</option>
    <option value="can">Canada</option>
    <option value="mex">Mexico</option>
</select>

Checkboxes and Radio Buttons

Used for selecting options, checkboxes allow multiple selections, while radio buttons allow only one selection from a group.

Selection Options

Feature 1
Feature 2

Choice A
Choice B

<input type="checkbox" id="option1" name="features" value="feature1">
<label for="option1">Feature 1</label><br>
<input type="checkbox" id="option2" name="features" value="feature2">
<label for="option2">Feature 2</label><br><br>

<input type="radio" id="choice1" name="choice" value="A">
<label for="choice1">Choice A</label><br>
<input type="radio" id="choice2" name="choice" value="B">
<label for="choice2">Choice B</label>

Tooltips and Popovers

Provide additional context or information on demand, enhancing usability without cluttering the interface.

Interactive Tooltips

Hover over me

<span title="This is a helpful tooltip!">Hover over me</span>

Explore these elements and their properties to build robust and user-friendly applications.