--- title: Vertically Align Input Fields product: Form Library description: Make your forms more compact by left-aligning question titles. Specify a uniform title width for all questions within a nesting form element to ensure a neat and well-aligned layout. Explore this free JavaScript demo to learn more. framework: React source: https://surveyjs.io/form-library/examples/vertically-align-input-fields/reactjs index: https://surveyjs.io/form-library/examples/overview.md --- # Vertically Align Input Fields (React) A typical survey question consists of a title and an input field. When the title is placed to the left of the input field, the available width within the question box is divided between them. Shorter titles leave more space for the input field, while longer titles reduce its width. As a result, input fields may vary in length and appear untidy and misaligned. This is most noticeable when survey elements are stacked in one or more columns. To create a cleaner, more structured layout, you can vertically align input fields, as shown in this demo. Follow the steps below to vertically align input fields: 1. Position question titles on the left.\ Question titles appear above input fields by default. To left-align the titles, assign `"left"` to the [`titleLocation`](https://surveyjs.io/form-library/documentation/api-reference/question#titleLocation) property for an individual question or to the `questionTitleLocation` for a [panel](https://surveyjs.io/form-library/documentation/api-reference/panel-model#questionTitleLocation), [page](https://surveyjs.io/form-library/documentation/api-reference/page-model#questionTitleLocation), or [survey](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#questionTitleLocation). A lower-level setting (for example, of a panel) overrides higher level-settings (for instance, of a page and survey). 2. Specify a uniform question title width.\ You can unify the width of all input fields within a nesting element by setting a common width value for their titles. To do this, specify the `questionTitleWidth` property for the [page](https://surveyjs.io/form-library/documentation/api-reference/page-model#questionTitleWidth) or [panel](https://surveyjs.io/form-library/documentation/api-reference/panel-model#questionTitleWidth) that contains the questions whose input fields you want to align. Refer to the survey JSON schema for a code example. ## Files ### `public/index.html` ```html
``` ### `src/SurveyComponent.jsx` ```js import React from "react"; import { Model } from "survey-core"; import { Survey } from "survey-react-ui"; import "survey-core/survey-core.min.css"; import { themeJson } from "./theme"; import "./index.css"; import { json } from "./json"; function SurveyComponent() { const survey = new Model(json); survey.applyTheme(themeJson); survey.onComplete.add((sender, options) => { console.log(JSON.stringify(sender.data, null, 3)); }); return (); } export default SurveyComponent; ``` ### `src/index.css` ```css /* You can add your custom CSS here. */ ``` ### `src/index.js` ```js import React from "react"; import { createRoot } from "react-dom/client"; import SurveyComponent from "./SurveyComponent"; const root = createRoot(document.getElementById("surveyElement")); root.render(); ``` ### `src/json.js` ```js export const json = { "pages": [ { "name": "page1", "questionTitleWidth": "130px", "questionTitleLocation": "left", "elements": [ { "type": "text", "name": "username", "title": "Username", "maxLength": 25 }, { "type": "text", "name": "password", "title": "Password", "inputType": "password", "autocomplete": "password" }, { "type": "text", "name": "email", "title": "E-mail address", "inputType": "email", "autocomplete": "email", "placeholder": "foobar@example.com" }, { "type": "text", "name": "url", "title": "URL", "inputType": "url", "placeholder": "https://www.example.com" } ] } ] }; ``` ### `src/theme.js` ```js export const themeJson = { "themeName": "default", "colorPalette": "light", "isPanelless": true, "backgroundImage": "", "backgroundOpacity": 1, "backgroundImageAttachment": "scroll", "backgroundImageFit": "cover", "cssVariables": { "--sjs2-color-bg-basic-primary": "rgba(255, 255, 255, 1)", "--sjs2-color-utility-property-grid": "rgba(255, 255, 255, 1)", "--sjs2-color-utility-tabs": "rgba(255, 255, 255, 1)", "--sjs2-color-utility-toolbox": "rgba(255, 255, 255, 1)", "--sjs2-color-bg-basic-primary-dim": "rgba(248, 248, 248, 1)", "--sjs2-color-bg-neutral-tertiary-dim": "rgba(255, 255, 255, 1)", "--sjs2-color-utility-surface-survey-panelless": "rgba(255, 255, 255, 1)", "--sjs2-color-utility-surface-survey": "rgba(255, 255, 255, 1)", "--sjs2-color-bg-basic-secondary": "rgba(249, 249, 249, 1)", "--sjs2-color-bg-basic-secondary-dim": "rgba(243, 243, 243, 1)", "--sjs2-color-fg-basic-primary": "rgba(0, 0, 0, 0.91)", "--sjs2-color-fg-basic-secondary": "rgba(0, 0, 0, 0.45)", "--sjs2-color-project-brand-600": "rgba(25, 179, 148, 1)", "--sjs2-color-bg-brand-secondary": "rgba(25, 179, 148, 0.1)", "--sjs2-color-bg-brand-primary-dim": "rgba(20, 164, 139, 1)", "--sjs2-color-fg-brand-on-primary": "rgba(255, 255, 255, 1)", "--sjs2-color-fg-brand-primary-disabled": "rgba(255, 255, 255, 0.25)", "--sjs2-base-unit-size": "8px", "--sjs2-base-unit-spacing": "8px", "--sjs2-base-unit-radius": "4px", "--sjs2-color-bg-accent-primary": "rgba(255, 152, 20, 1)", "--sjs2-color-bg-accent-secondary": "rgba(255, 152, 20, 0.1)", "--sjs2-color-bg-accent-secondary-dim": "rgba(255, 152, 20, 0.25)", "--sjs2-color-fg-accent-on-primary": "rgba(255, 255, 255, 1)", "--sjs2-color-fg-accent-primary-disabled": "rgba(255, 255, 255, 0.25)", "--sjs2-border-effect-surface-default": "0px 1px 2px 0px rgba(0, 0, 0, 0.15)", "--sjs2-border-effect-floating-default": "0px 2px 6px 0px rgba(0, 0, 0, 0.1),0px 8px 16px 0px rgba(0, 0, 0, 0.1)", "--sjs2-border-effect-component-formbox-default": "inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)", "--sjs2-border-effect-component-check-true-default": "inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)", "--sjs2-border-effect-component-check-false-default": "inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)", "--sjs2-color-border-basic-secondary": "rgba(0, 0, 0, 0.09)", "--sjs2-color-component-input-default-line": "rgba(0, 0, 0, 0.16)", "--sjs2-color-border-basic-secondary-overlay": "rgba(0, 0, 0, 0.16)", "--sjs2-color-bg-alert-primary": "rgba(229, 10, 62, 1)", "--sjs2-color-bg-alert-secondary": "rgba(229, 10, 62, 0.1)", "--sjs2-color-fg-alert-on-primary": "rgba(255, 255, 255, 1)", "--sjs2-color-bg-positive-primary": "rgba(25, 179, 148, 1)", "--sjs2-color-bg-positive-secondary": "rgba(25, 179, 148, 0.1)", "--sjs2-color-fg-positive-on-primary": "rgba(255, 255, 255, 1)", "--sjs2-color-bg-note-primary": "rgba(67, 127, 217, 1)", "--sjs2-color-bg-note-secondary": "rgba(67, 127, 217, 0.1)", "--sjs2-color-fg-note-on-primary": "rgba(255, 255, 255, 1)", "--sjs2-color-bg-warning-primary": "rgba(255, 152, 20, 1)", "--sjs2-color-bg-warning-secondary": "rgba(255, 152, 20, 0.1)", "--sjs2-color-fg-warning-on-primary": "rgba(255, 255, 255, 1)", "--sjs2-typography-font-weight-component-header-title": "700", "--sjs2-typography-font-size-component-header-description": "20px", "--sjs2-typography-font-weight-component-page-title": "700" }, "headerView": "basic" }; ``` ### `package.json` ```json { "dependencies": { "react": "latest", "react-dom": "latest", "survey-core": "latest", "survey-react-ui": "latest" }, "devDependencies": { "react-scripts": "latest" } } ``` ## Other Frameworks - [Angular](https://surveyjs.io/form-library/examples/vertically-align-input-fields/angular.md) - [Vue 3](https://surveyjs.io/form-library/examples/vertically-align-input-fields/vue3js.md) - [jQuery](https://surveyjs.io/form-library/examples/vertically-align-input-fields/jquery.md) - [Vanilla JS](https://surveyjs.io/form-library/examples/vertically-align-input-fields/vanillajs.md)