--- title: "Text Field | GoodBarber's Design System" description: "The Text Field component is a fundamental element in any design system, as it allows users to input and submit text-based information. It is a versatile component that can be used in a variety of contexts, from forms and surveys to search bars and chat interfaces." canonical_url: "https://www.goodbarber.com/uxdesign/textfield/" lang: nl --- # Text Field | GoodBarber's Design System [Design System](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://nl.goodbarber.com/uxdesign/](https://nl.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://nl.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/) # Text Field UI Components The Text Field component is used to input and submit text-based information, particularly on the login page and in forms. Its size, shape, and style can be customized. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/textfield.13a5a0dfd0b5.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/textfield.13a5a0dfd0b5.mp4) ## Introduction The Text Field component is a fundamental element in any design system, as it allows users to input and submit text-based information. It is a versatile component that can be used in a variety of contexts, from forms and surveys to search bars and chat interfaces. The Text Field component in the GoodBarber design system likely includes a variety of different options to suit different use cases, such as different sizes and types, as well as support for multiple lines of text. Additionally, it likely follows a consistent set of design principles to ensure that it looks and feels like a cohesive part of your app design, including things like consistent spacing. ## Anatomy The Text Field component exists in **3 sizes** (Small, Medium, Large) and **2 types** (Title UP and Title IN). It can be on **1 line** or **several lines**. Despite the many variations of the component, some design principles are constant. ### Title UP #### Common design principles The spacing and the size of the icons are the same for the 3 sizes of the component: | Single Line | Multi-Line | | ----------- | ---------- | | ↓ | ↓ | ![Single and multi-line text fields in Title-Up layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Anatomy-TitleUP-Common.cd52dd79e400.png) *Single and multi-line text fields in Title-Up layout* #### Field Height: Single Line For this Title UP version of the component, the height of the field does not vary according to the content, but according to the size chosen (Small, Medium or Large). | Mobile | Tablet | Web | | ------ | ------ | --- | | ↓ | ↓ | ↓ | Small ![Small single text field in Title-Up layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Anatomy-TitleUP-Height-SingleLine-Small.8a91e7740243.png) *Small single text field in Title-Up layout* Medium ![Medium single text field in Title-Up layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Anatomy-TitleUP-Height-SingleLine-Medium.ff17d0ed78a4.png) *Medium single text field in Title-Up layout* Large ![Large single text field in Title-Up layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Anatomy-TitleUP-Height-SingleLine-Large.586d3d92a5ef.png) *Large single text field in Title-Up layout* #### Field Height: Multi-Line The height of the field depends here on its content. We add a top and bottom padding whose value depends on the chosen field size: ![Height and padding of a multi-line text field in Title-Up layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Anatomy-TitleUP-Height-MultiLine.cd7cba62e009.png) *Height and padding of a multi-line text field in Title-Up layout* | | | | | | | | | | | | | --- | ---------- | --- | --- | --- | -------------------- | --- | --- | --- | --------- | --- | | | **Small** | | | | Padding Top / Bottom | | ▸ | | **12 px** | | | | **Medium** | | | | Padding Top / Bottom | | ▸ | | **16 px** | | | | **Large** | | | | Padding Top / Bottom | | ▸ | | **20 px** | | | | | | | | | | | | | | | Mobile | Tablet | Web | | ------ | ------ | --- | | ↓ | ↓ | ↓ | Small ![Small multi-line text field in Title-Up layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Anatomy-TitleUP-Height-MultiLine-Small.c2b2c0e7e070.png) *Small multi-line text field in Title-Up layout* Medium ![Medium multi-line text field in Title-Up layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Anatomy-TitleUP-Height-MultiLine-Medium.c5c91ea57393.png) *Medium multi-line text field in Title-Up layout* Large ![Large multi-line text field in Title-Up layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Anatomy-TitleUP-Height-MultiLine-Large.492fb8b410e5.png) *Large multi-line text field in Title-Up layout* ### Title IN #### Common design principles The spacing and the size of the icons are the same for the 3 sizes of the component but for this Title IN version, the display changes according to the [state](#states) of the component: - Disabled / Inactive → Field Title - Focus / Complete / Error → Field Title + User input | Single Line | Multi-Line | | ----------- | ---------- | | ↓ | ↓ | Disabled / Inactive states ![Display in Disabled / Inactive states in Title-In layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Anatomy-TitleIN-Common-Inactive.b4cdbdbc4b49.png) *Display in Disabled / Inactive states in Title-In layout* Focus / Complete / Error states ![Display in Focus / Complete / Error states in Title-In layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Anatomy-TitleIN-Common-Active.e99cbadd5381.png) *Display in Focus / Complete / Error states in Title-In layout* #### Field Height: Single Line For the Disabled and Inactive states, only the Field Title appears, however, the height of the field will be that of the Focus, Complete and Error state which include the Field title and the User input: ![Single line text field height in Title-In layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Anatomy-TitleIN-Height-SingleLine.53588600d76a.png) *Single line text field height in Title-In layout* | Mobile | Tablet | Web | | ------ | ------ | --- | | ↓ | ↓ | ↓ | Small ![Small single line text field in Title-In layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Anatomy-TitleIN-Height-SingleLine-Small.6cd1be1d8b5c.png) *Small single line text field in Title-In layout* Medium ![Small single line text field in Title-In layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Anatomy-TitleIN-Height-SingleLine-Medium.eef782585236.png) *Small single line text field in Title-In layout* Large ![Small single line text field in Title-In layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Anatomy-TitleIN-Height-SingleLine-Large.1f0ac3db5b77.png) *Small single line text field in Title-In layout* #### Field Height: Multi-Line The top/bottom padding value depends on the chosen field size: ![Multi-line text field height in Title-In layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Anatomy-TitleIN-Height-MultiLine.56606506f681.png) *Multi-line text field height in Title-In layout* | | | | | | | | | | | | | --- | ---------- | --- | --- | --- | ---------------------- | --- | --- | --- | --------- | --- | | | **Small** | | | | Padding Top / Bottom\* | | ▸ | | **8 px** | | | | **Medium** | | | | Padding Top / Bottom | | ▸ | | **12 px** | | | | **LArge** | | | | Padding Top / Bottom | | ▸ | | **16 px** | | | | | | | | | | | | | | | Mobile | Tablet | Web | | ------ | ------ | --- | | ↓ | ↓ | ↓ | Small ![Small multi-line text field in Title-In layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Anatomy-TitleIN-Height-MultiLine-Small.02148e067237.png) *Small multi-line text field in Title-In layout* Medium ![Medium multi-line text field in Title-In layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Anatomy-TitleIN-Height-MultiLine-Medium.6912d45ce7fc.png) *Medium multi-line text field in Title-In layout* Large ![Large multi-line text field in Title-In layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Anatomy-TitleIN-Height-MultiLine-Large.a1f9a1eae16f.png) *Large multi-line text field in Title-In layout* ### Font Size The [Font size](/uxdesign/atom-font/) changes depending on the devices and the choice of the component size. You can have an overview of the different versions of the Text Field with the corresponding font sizes in the file at the [bottom of the page](/uxdesign/atom-font/#size). | | **Component Size** | | **Text Level** | | **Mobile** | | **Tablet** | | **Web** | | | --- | ------------------ | --- | -------------- | --- | ---------- | --- | ---------- | --- | ------- | --- | | | Small | | Body 1 | | 14 | | 15 | | 16 | | | | | | Small Body 1 | | 11 | | 12 | | 12 | | | | Medium | | Body 1 | | 16 | | 17 | | 19 | | | | | | Small Body 1 | | 12 | | 13 | | 13 | | | | Large | | Body 1 | | 19 | | 21 | | 22 | | | | | | Small Body 1 | | 13 | | 14 | | 14 | | ## Properties ### Shape Below, the [Shape atom](/uxdesign/atom-shape/) applied with the types **Sharp** / **Rounded** / **Round** for the fields on 1 line: ![Shape on single line text field](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Properties-Shape-SingleLine.981cc5a41715.png) *Shape on single line text field* When we have **several lines**, we go from a radius of 50% of the height of the component to 12px. ![Shape on multi-line text field](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Properties-Shape-MultiLine.9868246e56fd.png) *Shape on multi-line text field* ⚠️ [Round Shape Specificities](/uxdesign/atom-shape/#round_specificities) ### Border By default, the [Border Atom](/uxdesign/atom-border/) value is 1px for all [states](#states) except Focus and Focus Error: | Disabled / Inactive / Complete / Error | Focus / Focus Error | | -------------------------------------- | ------------------- | | ↓ | ↓ | ![Border on field state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Properties-Border.96f45c861116.png) *Border on field state* ### Shadow The [Shadow level](/uxdesign/atom-shadow/#shadow_levels) changes for the **Focus** and **Focus Error** [state](#states): in fact, we go to the higher level to accentuate the elevation and thus highlight the activated component. ⚠️ Caution, the Inner Shadow option is not available for Focus and Focus Error, we will use Drop Shadow. | Disabled / Inactive / Complete / Error | Focus / Focus Error | | -------------------------------------- | ------------------- | | ↓ | ↓ | ![Drop shadow level 1&2 on field](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Properties-Shadow-Drop-Level1.fb3b3647c812.png) *Drop shadow level 1&2 on field* ![Drop shadow according field state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Properties-Shadow-Drop-Level2.173a1c19ba19.png) *Drop shadow according field state* ![Mix Inner & Drop shadow according field state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Properties-Shadow-Inner-Level-1.f38b2bef30a0.png) *Mix Inner & Drop shadow according field state* ![Mix levels of Inner & Drop shadow according field state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Properties-Shadow-Inner-Level-2.69077fc2c95b.png) *Mix levels of Inner & Drop shadow according field state* ## Layout ### Form Depending on the device, the layout of a Text Field associated with a button may vary. On **Mobile**, the 2 components are one on top of the other because of the lack of space. The button occupies the whole width of the page : ![Form spacing on mobile](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Layout-Mobile.5c895ec6bb92.png) *Form spacing on mobile* On **Tablet** and **Web**, if the 2 components are one above the other the button will have its minimum length. If they are on the same line, the Text Field occupies the space left by the button: ![Form spacing on tablet and desktop](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Layout-Tablet-Web.51e26b0a600c.png) *Form spacing on tablet and desktop* To know the spacing between the fields and to see how they behave in the layout of a form, please refer to the [Form Layout section](/uxdesign/form/#layout). ## Behavior ![State animation in Title-Up and Title-In](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-Behaviour.ab353f6cf83e.gif) *State animation in Title-Up and Title-In* States | Title UP | Title IN | | -------- | -------- | | ↓ | ↓ | Disabled ![Disabled state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-States-01-Inactive.2b201ef7c3fb.png) *Disabled state* Inactive ![Inactive state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-States-02-Focus.8d52ab9ff90e.png) *Inactive state* Focus ![Focus state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-States-03-Complete.cc65b582550c.png) *Focus state* Complete ![Complete state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-States-04-Error.2d9536959516.png) *Complete state* Error ![Error state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-States-05-ErrorFocus.85634119aa0f.png) *Error state* Error Focus ![Error Focus state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TextField-States-06-ErrorFocus.747b184d5f26.png) *Error Focus state* Preview Below a preview of the XD file, we find: - The 3 component sizes **Small** / **Medium** / **Large** - The corresponding **font sizes** - The 2 options **Title IN** and **Title UP** - The 3 shape options **Sharp** / **Rounded** / **Round** - **Technical specifications** for each field type - 2 states: **Inactive** and **Complete** [Components-Textfield-video](https://player.vimeo.com/video/794172425?h=07b1295bee&badge=0&autopause=0&autoplay=1&loop=1&player_id=0&app_id=58479)