Found 10877 Articles for Web Development

React developers can easily add or use sliders in React thanks to the Slider component provided by Material UI. In the Material UI, apart from using normal sliders, we may also define an input to provide a custom value that can be entered by users manually. In this article, we are going to learn how to create sliders with input in Material UI. What is a Slider with Input? A user interface element called a Slider with an input field combines two input techniques for choosing a numerical value from a predetermined range. Usually, it has a slider element and ... Read More

Material UI is a framework, for React that offers a Select component. This component allows users to pick options from a menu. Today we will explore how to create a Native Select in Material UI. One of the components in Material UI is the "Native Select." It plays a role, in creating menus with native select functionality, giving users the ability to choose from various options. How is Native Select different from Select Component? The Native Select and Select components have some differences. Native Select offers a user interface on platforms by rendering a native HTML element. It provides ... Read More

Badges play an important role in designing a web UI, whether you are building a social media site, a messaging app, or anything else that requires the use of badges. Material UI provides an easy way to accomplish this task with just one component called the Badge API. So, in this article, we are going to learn how to control Badge visibility in the Material UI. But before we dive into the steps of controlling badge visibility in MUI, let’s first understand what exactly a badge is. What is a Badge? A badge is a small element that is attached ... Read More

To provide a great user experience, the colors and sizes of different components added to a website play an important role. The React MUI allows you to change the orientation, color, and size of the toggle buttons easily by using some props given in the documentation. In this article, we are going to learn how to change Toggle Button orientation with color and size in Material UI. But before we dive into the steps of changing the given properties, let’s first understand what exactly a Toggle Button is. What is a Toggle Button? Toggle buttons are a very popular component ... Read More

Floating Action Buttons or FABs in every application works as a prominent call-to-action button that performs a specific action, such as creating a new item or triggering an essential function. Material UI, a popular UI framework for React, offers a flexible and customizable way to implement FABs with ease. In this article, we will learn how to change the size and color of Floating action buttons in Material UI using React. What is a Floating Action Button? Before moving further, let’s understand what is a Floating action button or FAB. These buttons are included in an app's user interface to ... Read More

Implementing radio buttons, in Material UI, a used UI framework for React is straightforward. You can effortlessly customize the size, color, and orientation of the radio buttons to match the design of your application. In this article, we will explore how to modify the size, color, and orientation of radio buttons, in Material UI. What is a Radio Button? Radio buttons are an element, in forms that enable users to choose one option from a set of choices that're mutually exclusive. They appear as buttons that can be either selected (checked) or unselected (unchecked). When one radio button is selected ... Read More

In this article, we will explore how to customize the appearance of a button group, in Material UI so that it suits the needs of your application. Material UI, also known as MUI is a frontend library developed by Google. It provides a collection of to use React components that can be used in frameworks, like React and NextJS. With Material UI you get access to a range of components such as buttons, checkboxes, selects and more. One specific component called ButtonGroup is particularly useful for grouping buttons Button groups are great for enhancing the user experience by organizing buttons. ... Read More

Badges play an important role in designing a web UI, whether you are building a social media site, a messaging app, or anything else that requires the use of badges. Material UI provides an easy way to accomplish this task with just one component called the Badge API. So, in this article, we are going to learn how to align and overlap badges in Material UI. But before we dive into the steps to align and overlap the badges in MUI, let’s first understand what exactly a badge is. What is a Badge? A badge is a small component mostly ... Read More

Styled Components, a highly acclaimed library within the React ecosystem, empowers developers to utilize CSS-in-JS, presenting advantages such as encapsulation, reusability, and simplified style maintenance. On the other hand, Material-UI stands as a widely embraced UI component library for React that diligently adheres to the principles of Material Design. It offers an extensive selection of customizable pre-built components. While Material-UI comes equipped with its own styling solution known as makeStyles, it seamlessly integrates with Styled Components, enabling developers to leverage the combined capabilities of both libraries. Our exploration revolves around the installation process, specifically highlighting the @mui/styled-engine and @mui/styled-engine-sc packages. ... Read More

In this article, we will learn How to add Icons to text fields using input adornments in Material UI. But before we learn adding icons to text-field using input adornments, we must know what input adornments are? Input adornments are nothing but extra text or icons that are added to text fields. These are positioned in three different positions, including prefix, suffix, and action. InputAdornment API - This API is used to add a prefix, a suffix, or an action to an input element in React MUI. Props position − This prop is used to set ... Read More