---
title: "React Forms Examples | Mobiscroll"
component: "Forms"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/forms"
---

# Advanced React forms

Form elements for desktop and mobile with text input, select, slider, switch, checklist, radio buttons and more. For React JS. Last update: Oct 16, 2026

## Description

Form fields from inputs and text areas to segmented controls & switches can be used to create forms for event creation, editing and much more. Build custom forms for mobile and desktop with the responsive grid layout, or render them in popups & modals for add/edit screens.

## Building forms

- [Mobile form](https://demo.mobiscroll.com/react/forms/mobile.md) - React Single column mobile form example with field groups. Deliver different fields types with a consistent look & feel.
- [Inline desktop form](https://demo.mobiscroll.com/react/forms/desktop.md) - React single and multi-column desktop form. Render forms right on the page with a consistent look & feel.
- [Responsive form](https://demo.mobiscroll.com/react/forms/responsive.md) - Responsive React form using grid layout. Define how the form elements behaves across multiple screen sizes.
- [Inside a modal](https://demo.mobiscroll.com/react/forms/popup.md) - React embedded forms in modal or pop-over. Perfect layout for contextual add/edit forms.

## Alerts & notifications

- [Alert, confirm & prompt](https://demo.mobiscroll.com/react/forms/alert-confirm-prompt.md) - React alert, confirm and prompt dialogs for giving feedback to users and for quick & focused data entry.
- [Toast & snackbar](https://demo.mobiscroll.com/react/forms/notifications.md) - React notification examples of toast and snackbar with or w/o action. With undo, retry or custom functionality.

## Buttons

- [Buttons](https://demo.mobiscroll.com/react/forms/buttons.md) - React button styling with full-width and justified layout along with icons, borderless/flat and outline rendering.
- [Segmented](https://demo.mobiscroll.com/react/forms/segmented.md) - React segmented control with single & multiple select for radio buttons and checklists. It supports icons, text, colors.
- [Stepper](https://demo.mobiscroll.com/react/forms/stepper.md) - React stepper example with fixed/custom steps and editable values.
- [Colors](https://demo.mobiscroll.com/react/forms/button-segmented-stepper-colors.md) - React button, segmented and stepper with color presets for primary, secondary, success, danger and more.

## Inputs & fields

- [Field types](https://demo.mobiscroll.com/react/forms/inputs-text-areas-date-fields.md) - React text field input examples with single-, multi-line, masked, reveal password, disabled, error styling.
- [Customize the input](https://demo.mobiscroll.com/react/forms/input-label-types.md) - React input examples with underlined, boxed and outline rendering and labels stacked, inline and floating.

## Toggle & radio

- [Checkbox](https://demo.mobiscroll.com/react/forms/checkbox.md) - React checkbox and checklist demo and styling with or without description text. Supports disabled styling.
- [Switch](https://demo.mobiscroll.com/react/forms/switch.md) - React switch/toggle demo with or without description. Alternative to the checkbox. Supports disabled styling.
- [Radio buttons](https://demo.mobiscroll.com/react/forms/radio-button.md) - React radio button demo for single select option lists. Use it with or without description, supports disabled styling.

## Customizing the look & feel

- [Theming capabilities](https://demo.mobiscroll.com/react/forms/themes-ios-material-windows.md) - React forms with iOS, Material, Windows light and dark themes. Choose from existing themes or create your own.