Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • Bootstrap
  • Tailwind
  • Bulma
  • Foundation
  • Primer
  • Spectre
  • Onsen UI
  • Semantic UI
  • Pure CSS
  • Materialize
  • SASS
  • LESS
  • Blaze UI
  • CSS Frameworks
  • Color Picker
  • CSS
  • CSS Formatter
  • Web Technology
Open In App
Next Article:
ReactJS Onsen UI Fab Component
Next article icon

ReactJS Onsen UI Input Component

Last Updated : 07 Feb, 2023
Comments
Improve
Suggest changes
Like Article
Like
Report

ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. Input Component allows the user to create a basic widget for getting the user input is a text field. We can use the following approach in ReactJS to use the Onsen-UI Input Component.

Input Props:

  • modifier: It is used for the appearance of the input.
  • disabled: It is used to specify whether the input is disabled or not.
  • readOnly: It is used to specify whether the input is read-only or not.
  • onChange : It is a callback function that is triggered when the input changes.
  • value: It is used to denote the content of the input (controlled).
  • defaultValue: It is used to denote the content of the input at the first render (uncontrolled).
  • placeholder: It is used to denote the placeholder text.
  • type: It is used to specify the input type.
  • inputId: It is used to specify the “id” attribute of the inner <input> element.
  • float: The placeholder will be animated in Material Design if this attribute is present.

Preset Modifiers:

  • material: It is used to show the material design input.
  • underbar: It is used to display a horizontal line underneath a text input.
  • transparent: It is used to display a transparent input.

 

Creating React Application And Installing Module:

  • Step 1: Create a React application using the following command:

    npx create-react-app foldername

  • Step 2: After creating your project folder i.e. foldername, move to it using the following command:

    cd foldername

  • Step 3: After creating the ReactJS application, Install the required module using the following command:

    npm install onsenui react-onsenui

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js 
import React from 'react'; import 'onsenui/css/onsen-css-components.css'; import { Input } from 'react-onsenui';  export default function App() {    return (     <div style={{       display: 'block', width: 500, paddingLeft: 30     }}>       <h6>ReactJS Onsen-UI Input Component</h6>       Enter Name:       <Input         float         onChange={(e) => { console.log(e) }}         modifier='material'       />     </div>   ); }

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://onsen.io/v2/api/react/Input.html


Next Article
ReactJS Onsen UI Fab Component
author
gouravhammad
Improve
Article Tags :
  • JavaScript
  • Web Technologies
  • ReactJS
  • Onsen-UI

Similar Reads

  • ReactJS Onsen UI List Component
    ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. List components allow the user to display a list. We can use the following approach in ReactJS to use the Onsen-UI List Co
    2 min read
  • ReactJS Onsen UI Icon Component
    ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. Icon component is used to display the icons as icons are required for every application for UI purposes. We can use the fo
    2 min read
  • ReactJS Onsen UI Fab Component
    ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. Fab Component allows the user to provide a Floating action button which is a circular button. We can use the following app
    2 min read
  • ReactJS Onsen UI ListItem Component
    ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. ListItem components represent each item in the list. It is used to define the list item. We can use the following approach
    3 min read
  • ReactJS Onsen UI LazyList Component
    ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. LazyList components are used when millions of items are to be rendered without a drop in performance. We can use the follo
    2 min read
  • ReactJS Onsen UI Dialog Component
    ReactJS Onsen-UI is a popular front-end library with a set of React components designed to develop HTML5 hybrid and mobile web apps beautifully and efficiently. Dialog Component allows the user to show content on top of an overlay that requires user interaction. We can use the following approach in
    3 min read
  • ReactJS Onsen UI Navigator Component
    ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. Navigator components are responsible for page transitioning and managing the pages of our application. We can use the foll
    3 min read
  • ReactJS Onsen UI ListTitle Component
    ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. ListTitle components represent the title for the list. We can use the following approach in ReactJS to use the Onsen-UI Li
    2 min read
  • ReactJS Onsen UI Modal Component
    ReactJS Onsen-UI is a popular front-end library with a set of React components designed to develop HTML5 hybrid and mobile web apps in a beautiful and efficient way. Modal Component provides a solid foundation for creating dialogs, lightboxes, popovers, etc. We can use the following approach in Reac
    3 min read
  • ReactJS Onsen UI Row Component
    ReactJS Onsen-UI is a popular front-end library with a set of React components designed to develop HTML5 hybrid and mobile web apps beautifully and efficiently. Row Component provides a way to represent a row in the grid system, and it is used to display data in the form of rows. We can use the foll
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences