--- title: "Form | GoodBarber's Design System" description: "# Properties\r\n\r\n## Shape\r\n\r\nBelow, the [Shape atom](/uxdesign/atom-shape/) applied with the types **Sharp** / **Rounded** / **Round**." canonical_url: "https://www.goodbarber.com/uxdesign/form/" lang: pt --- # Form | GoodBarber's Design System [Design System](https://pt.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://pt.goodbarber.com/uxdesign/](https://pt.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [Overview](https://pt.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) # Form UI Components The Form component is a user-friendly tool for gathering data and user input, like contact information and surveys. It’s highly customizable and adapts to all devices. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/form.f9d8129c37be.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/form.f9d8129c37be.mp4) ## Introduction The Form component in the GoodBarber design system is a tool for gathering user input and data. This component provides a user-friendly and visually consistent way to create forms, allowing users to easily fill in and submit information. Whether you need to collect contact information, survey responses, or other types of data, the Form component makes it easy to create professional-looking forms that are optimized for mobile devices. With support for a wide range of form elements, including text fields, checkboxes, radio buttons, and more, the Form component is a versatile and flexible solution for creating forms in your app. Additionally, it has a wide range of options for styling, validation and error handling, which can be used to ensure that the form is easy to use and provides an intuitive experience for the user. ## Properties ### Shape Below, the [Shape atom](/uxdesign/atom-shape/) applied with the types **Sharp** / **Rounded** / **Round**. | Title UP | Title IN | | -------- | -------- | | ↓ | ↓ | Sharp ![Form components with sharp style](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Form-Properties-Shape-Sharp.2c541252cdfc.png) *Form components with sharp style* Rounded ![Form components with rounded style](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Form-Properties-Shape-Rounded.84d931a11a4d.png) *Form components with rounded style* Round ![Form components with round style](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Form-Properties-Shape-Round.37d2f080ba0f.png) *Form components with round style* ### Border In the example below, we see the [Border](/uxdesign/atom-border/) atom in a Form. The **Focus and Focus Error** states are differentiated by their thickness of **2px** (the default value is 1px). All the states of a Text Field are described in the section [Text Field / Behavior](/uxdesign/textfield/#preview). | Title UP Round | Title IN Round | | -------------- | -------------- | | ↓ | ↓ | ![Border according the state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Form-Properties-Border.f7a74364fb81.png) *Border according the state* ### Shadow The level of [Shadow](/uxdesign/atom-shadow/) changes for the states **Focus and Focus Error.** All states of a Text Field are described in the section [Text Field / Behavior](/uxdesign/textfield/#preview). #### Drop Shadow Shadow level 1 (Focus level 2) ![Drop Shadow levels 1&2 according the state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Form-Properties-Shadow-Drop-Level1.820a184e3905.png) *Drop Shadow levels 1&2 according the state* Shadow level 2 (Focus level 3) ![Drop Shadow levels 2&3 according the state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Form-Properties-Shadow-Drop-Level2.94c20eb903a4.png) *Drop Shadow levels 2&3 according the state* #### Inner Shadow Shadow level -1 (Focus level 2) ![Inner Shadow levels 1&2 according the state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Form-Properties-Shadow-Inner-Level-1.a474c24e808a.png) *Inner Shadow levels 1&2 according the state* Shadow level -2 (Focus level 3) ![Inner Shadow levels 2&3 according the state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Form-Properties-Shadow-Inner-Level-2.e54c0635824e.png) *Inner Shadow levels 2&3 according the state* ## Layout Vertical spacing between modules of a form are the same on all devices: | | | | | | | | | | | | | | | --- | --- | --- | ----------------------------- | --- | --- | --- | --- | --- | --------- | --- | --- | --- | | ・ | | | Before Section Break | | | | ▸ | | **40 px** | | | | | ・ | | | Between fields | | | | ▸ | | **24 px** | | | | | ・ | | | Between fields in a group | | | | ▸ | | **12 px** | | | | | ・ | | | Between 2 fields side by side | | | | ▸ | | **1G** | | | | | | | | | | | | | | | | | | The illustration below shows the spacing between elements in a **Rounded** form on **Mobile**. **Title UP** option on the left, **Title IN** on the right: [Components-Form-video.mov"](https://player.vimeo.com/video/794172408?h=e7950fe45f&badge=0&autopause=0&autoplay=1&loop=1&player_id=0&app_id=58479)