Guide to adding a label following an input field in a Formik (Input) form using React.js

I am looking to customize the label text for the Formik Input Component, specifically positioning it after the input field. However, I am unsure of how to target it and apply CSS styling.

Here is a code snippet example:

<div className="editable-job-title">
      {isEditing ? (
        <Formik
          validateOnMount={true}
          enableReinitialize
          initialValues={user}
          validationSchema={userNameValidationSchema}
          onSubmit={handleSubmit}>
          {(props) => (
            <Form>
                <Input
                name="job_title"
                type="text"
                label={t('userForm.job_title.label')}
              />
              <FormActions className="user-form-page__form-action">
                <RoundButton
                  type="button"
                  onClick={stopEditing}
                  className="button button--cancel">
                  <Icon icon={x} />
                </RoundButton>
            </Form>
          )}
        </Formik>

https://i.sstatic.net/WgNFk.png

In essence, I am seeking to position the Job Title text below the field or explore other creative solutions.

cssreactjsinputlabelformik

Answer №1

It seems like you're interested in using the <Field> element from the formik library.

https://i.sstatic.net/vrgF1.png

If that's what you're looking for, take a look at this example on https://codesandbox.io/s/formik-tests-onchange-mo4fi?file=/src/App.js

import { Field, Formik, Form } from "formik";
import { TextField } from "@material-ui/core";

<Formik
      initialValues={initialValues}
      onSubmit={() => alert("submitted!")}
    >
      <Form>
        <Field name="email">
          {(props) => (
            <>
              <TextField
                variant="outlined"
                placeholder={props.field.name}
                label={props.field.name}
                {...props.field}
              />
            </>
          )}
        </Field>
        ...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing Form Inputs in ReactJS using Props Array

Trying to wrap my head around handling a dynamic number of props data for a form. Despite searching high and low on Google, I've come up empty-handed. I am gathering data on the number of appointments based on the number of dogs owned by a user. So, t ...

javascriptreactjs

Exploring the world of CSS font families in Sublime Text 3 and linking them to the web

Is there a way to connect a font from the internet (such as those on Google Fonts: ) to my Sublime Text CSS file? I have tried linking it to an HTML file that is already linked to my CSS code, but it hasn't been successful. ...

htmlcsssublimetext3font-family

Adjusting my navbar to dynamically resize with the changing window dimensions

Seeking guidance on creating a responsive navbar. Currently, I've successfully adjusted the bar's size based on monitor resolution, but the buttons remain static in size. I experimented with using %, vm, and vh, but suspect that there might be a ...

htmlcss

Basic let or const declarations in a React project

I am currently exploring React and I'm curious about best practices regarding the use of simple let or const variables within functional components in React. While I am aware of hooks such as useState, useRef, useMemo, and useCallback, my question re ...

reactjs

Problem with loading pages in React Router

I'm facing an issue with React router where the page always reloads with the scrolling position at the top. Is there a straightforward method to maintain the scroll position at a specific point on the page? ...

reactjsreact-router

Creating 3D text using textGeometry in React Three Fiber results in a cube-shaped representation

Trying to create 3D text in React Three Fiber by following this tutorial but ending up with a cube instead of text. This is the code snippet I used: import { extend } from "@react-three/fiber" import { FontLoader } from "three/examples/jsm/l ...

javascriptreactjsthree.jsreact-three-fiber

Ways to handle <select> change events effectively in materialize css

My attempt at using a basic jquery change listener on a materialize css select dropdown has been unsuccessful. $("#somedropdown").change(function() { alert("Element Changed"); }); 1) Can anyone provide guidance on how to add a listener to ...

javascriptjquerycssmaterialize

Guide on adding dual horizontal scroll bars to a v-data-table (Vue / vuetify)

Currently, I am working on Vue / Vuetify and experimenting with the v-data-table component. While creating a table, I noticed that it has a horizontal scroll bar at the bottom. https://i.stack.imgur.com/noOzN.png My goal now is to implement two horizontal ...

htmlcssvue.jsvuetify.js

Modify a property of an object using the useState Hook, where the property name is dynamically retrieved from a variable

const [fee, setFee] = useState({newPatient:'',establishedPatient:''}) const field1='newPatient' const field2='establishedPatient' To modify the fee object properties, I am looking to dynamically assign ...

javascriptreactjsreact-nativeobject

Modifying the color of the error icon in Quasar's q-input component: a step-by-step guide

https://i.stack.imgur.com/4MN60.png Is it possible to modify the color of the '!' icon? ...

javascripthtmlcsstypescriptquasar-framework

What is the process for passing a component as a parameter to a function within a different component?

Within my scenario, I have a series of components '1,2,3,...' imported into another primary component 'A'. Within component 'A', certain operations are performed and a filtered component is then returned from the list of compo ...

javascriptreactjsreact-hooksreact-reduxjsx

What are the steps to configure react-qr-reader to display the scanning window on an iPhone?

Implementing the react-qr-reader library in my React / Next.js project: https://www.npmjs.com/package/react-qr-reader After reviewing the documentation, I couldn't find any pertinent options for the constraints. Could this be a compatibility issue wi ...

iosreactjsqr-codereact-qr-code

Retrieving information using getStaticProps

I'm currently working on a new function that pulls data from The Guardian API, but I've hit a roadblock with an error message. Below is the response that's being returned: https://i.sstatic.net/90OoB.png Furthermore, presented here is the c ...

javascriptreactjsnext.js

The reference to React in useContext is currently undefined

I am currently working on a React App that involves CRUD operations connected to a Rails API. The project structure is as follows: App.js -> UserIndex --> Form --> User -> User My goal is to pass a function from <App /> to its gr ...

reactjsreact-hooksuse-context

The MuiCallout element featured in the latest version of the Mui library

I am looking to create a component similar to the examples of the mui callout on their website for mui 5. However, this component is not included in the list of components. <aside class="MuiCallout-root MuiCallout-warning"><p>This API ...

reactjsmaterial-ui

Personalize the position of the v-select drop-down menu

I am currently working with the vuetify v-select component. The problem I am encountering is that instead of the dropdown opening downwards, I need it to open upwards since the dropdown is positioned at the bottom of the page which causes some of the dro ...

cssvue.jsvuetify.js

Hyperlink -> Boundary

Our homepage features various elements as part of the menu. Each element consists of a picture, title, and small description. The issue is that these menu items always display a border when the mouse hovers over them, despite attempts to hide it. You can ...

htmlcsshoverborder

Experimenting with Jest for pagination of tables in a React Material-UI component

Recently, I implemented a basic MUI data table with pagination from the following link: https://mui.com/material-ui/react-table/. The issue arose when trying to test it on the NEXT page using Jest. Whenever I attempted to change the row numbers from 5 to 1 ...

reactjstestingjestjsdatatablematerial-ui

Behind every radio button lies a vertical line

Among a set of 7 radio buttons, I am looking to highlight the one in the center (id=q1val6) with a short vertical line running behind it to signify the zero point on a likert scale. <form name="form1" action="#" onsubmit="jsPsych.finishTrial()" method= ...

javascripthtmlcssradio-buttoncustomization

Display PHP array information in an HTML table

I am facing an issue with an array that contains a record set generated by the CodeIgniter model. When attempting to display these records in an HTML table using my view, the layout is not rendering correctly. Here is a snippet of my view: <html> & ...

htmlcsscodeigniter