[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore molecules textarea field in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/atoms-overview)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-overview)

[Accordion](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-accordion)

[Alert](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-alert)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-breadcrumb)

[BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-buy-button)

[Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-card)

[Carousel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-carousel)

[CartItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-cart-item)

[CheckboxField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-checkbox-field)

[DiscountBadge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-discount-badge)

[Dropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-dropdown)

[Gift](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-gift)

[IconButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-icon-button)

[InputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-input-field)

[LinkButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-link-button)

[Modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-modal)

[NavbarLinks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-navbar-links)

[OrderSummary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-order-summary)

[Popover](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-popover)

[ProductCard](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-product-card)

[ProductPrice](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-product-price)

[ProductTitle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-product-title)

[QuantitySelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-quantity-selector)

[RadioField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-radio-field)

[RadioGroup](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-radio-group)

[Rating](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-rating)

[RatingField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-rating-field)

[RegionBar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-region-bar)

[SearchAutocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-search-auto-complete)

[SearchDropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-search-dropdown)

[SearchHistory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-search-history)

[SearchInputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-search-input-field)

[SearchProducts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-search-products)

[SearchTop](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-search-top)

[SelectField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-select-field)

[SKUSelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-sku-selector)

[Table](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-table)

[Tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-tag)

[TextareaField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field)

[Toast](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-toast)

[Toggle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-toggle)

[ToggleField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-toggle-field)

[Tooltip](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-tooltip)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/organisms-overview)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/atoms-overview)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-overview)

[Accordion](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-accordion)

[Alert](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-alert)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-breadcrumb)

[BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-buy-button)

[Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-card)

[Carousel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-carousel)

[CartItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-cart-item)

[CheckboxField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-checkbox-field)

[DiscountBadge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-discount-badge)

[Dropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-dropdown)

[Gift](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-gift)

[IconButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-icon-button)

[InputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-input-field)

[LinkButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-link-button)

[Modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-modal)

[NavbarLinks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-navbar-links)

[OrderSummary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-order-summary)

[Popover](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-popover)

[ProductCard](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-product-card)

[ProductPrice](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-product-price)

[ProductTitle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-product-title)

[QuantitySelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-quantity-selector)

[RadioField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-radio-field)

[RadioGroup](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-radio-group)

[Rating](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-rating)

[RatingField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-rating-field)

[RegionBar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-region-bar)

[SearchAutocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-search-auto-complete)

[SearchDropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-search-dropdown)

[SearchHistory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-search-history)

[SearchInputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-search-input-field)

[SearchProducts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-search-products)

[SearchTop](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-search-top)

[SelectField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-select-field)

[SKUSelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-sku-selector)

[Table](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-table)

[Tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-tag)

[TextareaField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field)

[Toast](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-toast)

[Toggle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-toggle)

[ToggleField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-toggle-field)

[Tooltip](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-tooltip)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/organisms-overview)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/components-index)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-overview)

TextareaField

Multi-line text fields used to get long user inputs.

[ Source code](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/tree/main/packages/components/src/molecules/TextareaField)

`TextareaField` is a multi-line text field component to get long user inputs. The component wraps a [Textarea](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-textarea) and its corresponding [Label](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-label).

Example

Code

Label

Input w/ Error MessageError Message

Input Disabled

---

## Usage

### Import the component

`1

import { TextareaField } from "@faststore/ui";

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

@import "@faststore/ui/src/components/molecules/TextareaField/styles.scss";

`

For details, see [Importing FastStore UI component styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles).

---

## Examples

### With label

Example

Code

Label

### Variants

#### Error

Example

Code

Input w/ Error MessageError Message

#### Disabled

Example

Code

Input Disabled

---

## Design tokens

| Local token                              | Default value/Global token linked |
| ---------------------------------------- | --------------------------------- |
| \--fs-textarea-width                     | 100%                              |
| \--fs-textarea-height                    | 100%                              |
| \--fs-textarea-field-padding             | 18px var(--fs-spacing-2) 0        |
| \--fs-textarea-field-color               | var(--fs-color-text)              |
| \--fs-textarea-field-size                | var(--fs-text-size-body)          |
| \--fs-textarea-field-border-color        | var(--fs-border-color)            |
| \--fs-textarea-field-transition-function | var(--fs-transition-function)     |
| \--fs-textarea-field-transition-property | var(--fs-transition-property)     |
| \--fs-textarea-field-transition-timing   | var(--fs-transition-timing)       |

### Label

| Local token                                        | Default value/Global token linked                                                        |
| -------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| \--fs-textarea-field-label-placeholder-top-padding | var(--fs-spacing-2)                                                                      |
| \--fs-textarea-field-label-max-width               | var(--fs-textarea-width)                                                                 |
| \--fs-textarea-field-label-max-height              | calc(var(--fs-textarea-height) - var(--fs-textarea-field-label-placeholder-top-padding)) |
| \--fs-textarea-field-label-padding                 | 0 var(--fs-spacing-2)                                                                    |
| \--fs-textarea-field-label-color                   | var(--fs-color-text-light)                                                               |
| \--fs-textarea-field-label-size                    | var(--fs-text-size-tiny)                                                                 |

### Button

| Local token                        | Default value/Global token linked |
| ---------------------------------- | --------------------------------- |
| \--fs-textarea-field-button-height | var(--fs-control-tap-size)        |

### Variants

#### Error

| Local token                                    | Default value/Global token linked                                        |
| ---------------------------------------------- | ------------------------------------------------------------------------ |
| \--fs-textarea-field-error-message-size        | var(--fs-text-size-legend)                                               |
| \--fs-textarea-field-error-message-line-height | 1.1                                                                      |
| \--fs-textarea-field-error-message-margin-top  | var(--fs-spacing-0)                                                      |
| \--fs-textarea-field-error-message-color       | var(--fs-color-danger-text)                                              |
| \--fs-textarea-field-error-border-color        | var(--fs-color-danger-border)                                            |
| \--fs-textarea-field-error-box-shadow          | 0 0 0 var(--fs-border-width) var(--fs-textarea-field-error-border-color) |
| \--fs-textarea-field-error-focus-ring          | var(--fs-color-focus-ring-danger)                                        |

#### Disabled

| Local token                                | Default value/Global token linked |
| ------------------------------------------ | --------------------------------- |
| \--fs-textarea-field-disabled-bkg-color    | var(--fs-color-disabled-bkg)      |
| \--fs-textarea-field-disabled-text-color   | var(--fs-color-disabled-text)     |
| \--fs-textarea-field-disabled-border-width | var(--fs-border-width)            |
| \--fs-textarea-field-disabled-border-color | var(--fs-border-color)            |

---

## Data attributes

You can target and override `TextareaField` styles using the following data attributes:

`data-fs-textarea-field`

`data-fs-textarea-field-label`

`data-fs-textarea-field-error`

`data-fs-textarea-field-error-message`

---

## Props

| Name       | Type                 | Description  | Default |                                                                                |
| ---------- | -------------------- | ------------ | ------- | -------------------------------------------------------------------------------------------------------- |
| **resize** | "none" \| "vertical" | "horizontal" | "both"  | Controls the resize property of the textare (e.g.: none, vertical, horizontal, both). Default is 'both'. |

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/molecules/textarea-field.mdx)

[Tag« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-tag)[ToastNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-toast)

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

ON THIS PAGE

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23usage)

[Import the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23import-the-component)[Import styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23import-styles)

[Examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23examples)

[With label](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23with-label)[Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23variants)

[Design tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23design-tokens)

[Label](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23label)[Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23button)[Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23variants)

[Data attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23data-attributes)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23props)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/molecules/textarea-field.mdx)

Copy page

On this page

ON THIS PAGE

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23usage)

[Import the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23import-the-component)[Import styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23import-styles)

[Examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23examples)

[With label](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23with-label)[Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23variants)

[Design tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23design-tokens)

[Label](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23label)[Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23button)[Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23variants)

[Data attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23data-attributes)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-textarea-field/docs/guides/faststore/molecules-textarea-field%23props)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] How do I use the VTEX product specifications app? Provide documentation and configuration details.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/basic-components)

[Add To Cart Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.add-to-cart-button)

[Autocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.search/Autocomplete)

[Banner](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.search/banner)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.breadcrumb)

[Footer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.store-footer)

[Google One-Tap Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/google-one-tap-login)

[Header](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.store-header)

[Locale Switcher](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.locale-switcher)

[Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.login)

[Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.menu)

[Minicart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.minicart)

[Order Placed](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.order-placed)

[Product Customizer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-customizer)

[Product Highlights](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-highlights)

[Product Identifier](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-identifier)

[Product List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-list)

[Product Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-price)

[Product Quantity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-quantity)

[Product Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-specifications)

[Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary)

[Product Summary Attachment List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary/productsummaryattachmentlist)

[Product Summary Buy Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary/productsummarybuybutton)

[Product Summary Description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary/productsummarydescription)

[Product Summary Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary/productsummaryimage)

[Product Summary List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary/productsummarylist)

[Product Summary Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary/productsummaryname)

[Product Summary Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary/productsummaryshelf)

[Product Summary SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary/productsummaryskuselector)

[Product Summary SKU Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary/productsummaryskuname)

[Rich Text](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.rich-text)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.search)

[Suggestions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.search/suggestions)

[DidYouMean](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.search/didyoumean)

[Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.search-result)

[Store Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.store-image)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/vtex-io-deprecated-apps)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/basic-components)

[Add To Cart Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.add-to-cart-button)

[Autocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.search/Autocomplete)

[Banner](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.search/banner)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.breadcrumb)

[Footer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.store-footer)

[Google One-Tap Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/google-one-tap-login)

[Header](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.store-header)

[Locale Switcher](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.locale-switcher)

[Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.login)

[Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.menu)

[Minicart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.minicart)

[Order Placed](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.order-placed)

[Product Customizer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-customizer)

[Product Highlights](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-highlights)

[Product Identifier](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-identifier)

[Product List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-list)

[Product Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-price)

[Product Quantity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-quantity)

[Product Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-specifications)

[Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary)

[Product Summary Attachment List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary/productsummaryattachmentlist)

[Product Summary Buy Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary/productsummarybuybutton)

[Product Summary Description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary/productsummarydescription)

[Product Summary Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary/productsummaryimage)

[Product Summary List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary/productsummarylist)

[Product Summary Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary/productsummaryname)

[Product Summary Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary/productsummaryshelf)

[Product Summary SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary/productsummaryskuselector)

[Product Summary SKU Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary/productsummaryskuname)

[Rich Text](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.rich-text)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.search)

[Suggestions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.search/suggestions)

[DidYouMean](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.search/didyoumean)

[Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.search-result)

[Store Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.store-image)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/vtex-io-deprecated-apps)

---

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/vtex-io-apps)

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/guides/basic-components)

Product Specifications

Official extension

Version: 1.1.2

Latest version: 1.1.2

[![{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)

The Product Specifications app provides blocks to render product specification information.

![{"base64":"  ","img":{"width":780,"height":318,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":19580,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-specifications-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-specifications-0.png)

## Configuration

### Step 1 - Adding the Product Specifications app to your theme dependencies

In your theme `manifest.json`, add the Product Specification app as a dependency:

`1

"dependencies": {

2

 "vtex.product-specifications": "1.x"

3

}

`

Now, you can use all the blocks exported by the `product-specifications` app. See the full list below:

| Block name                  | Description                                                                                |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| product-specification-group | Renders the product specification group.                                                                                |
| product-specification       | Renders the product specification. It should be declared as a child of product-specification-group.                                                                                |
| product-specification-value | Renders the product specification value. It should be declared as a child of product-specification. It can be rendered with HTML.                                                                                |
| product-specification-text  | Mandatory children of product-specification-group, product-specification, and product-specification-value. Depending on which block is declared, the product-specification-text renders information regarding a specification group, a specification, or a specification value. |

### Step 2 - Adding the Product Specification blocks to your theme templates

Copy the example below and paste it in the desired theme template, modifying it as necessary for your use case. If necessary, add the `product-specification-group` block to the template block list.

`1

{

2

 "product-specification-group": {

3

 "children": ["product-specification-text#group", "product-specification"]

4

 },

5

 "product-specification": {

6

 "children": [

7

 "product-specification-text#specification",

8

 "product-specification-values"

9

 ]

10

 },

11

 "product-specification-values": {

12

 "children": ["product-specification-text#value"]

13

 },

14

 "product-specification-text#group": {

15

 "props": {

16

 "message": "{groupName}"

17

 }

18

 },

19

 "product-specification-text#specification": {

20

 "props": {

21

 "message": "{specificationName}"

22

 }

23

 },

24

 "product-specification-text#value": {

25

 "props": {

26

 "message": "{specificationValue}"

27

 }

28

 }

29

}

`

> The Product Specification blocks need a Product context to work properly because they handle product information. Therefore, when declaring them, be sure that they are in a theme template in which this context is available, such as `store.product`.

You can also use other blocks to wrap the blocks provided by the Product Specifications app, such as the ones exported by the [Flex Layout app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-flex-layout/). For example:

`1

{

2

 "product-specification-group#table": {

3

 "children": ["flex-layout.row#spec-group"]

4

 },

5

 "flex-layout.row#spec-group": {

6

 "props": {

7

 "blockClass": "productSpecificationGroup"

8

 },

9

 "children": ["flex-layout.col#spec-group"]

10

 },

11

 "flex-layout.col#spec-group": {

12

 "children": ["flex-layout.row#spec-group-name", "product-specification"]

13

 },

14

 "flex-layout.row#spec-group-name": {

15

 "props": {

16

 "blockClass": "productSpecificationGroupName"

17

 },

18

 "children": ["product-specification-text#group"]

19

 },

20

 "product-specification": {

21

 "children": ["flex-layout.row#spec-item"]

22

 },

23

 "flex-layout.row#spec-item": {

24

 "props": {

25

 "blockClass": "productSpecification"

26

 },

27

 "children": ["flex-layout.col#spec-name", "flex-layout.col#spec-value"]

28

 },

29

 "flex-layout.col#spec-name": {

30

 "props": {

31

 "blockClass": "productSpecificationName",

32

 "width": {

33

 "mobile": "50%",

34

 "desktop": "25%"

35

 }

36

 },

37

 "children": ["product-specification-text#specification"]

38

 },

39

 "flex-layout.col#spec-value": {

40

 "props": {

41

 "blockClass": "productSpecificationValue"

42

 },

43

 "children": ["product-specification-values"]

44

 },

45

 "product-specification-values": {

46

 "children": ["product-specification-text#value"]

47

 },

48

 "product-specification-text#group": {

49

 "props": {

50

 "message": "{groupName}"

51

 }

52

 },

53

 "product-specification-text#specification": {

54

 "props": {

55

 "message": "{specificationName}"

56

 }

57

 },

58

 "product-specification-text#value": {

59

 "props": {

60

 "message": "{specificationValue}"

61

 }

62

 }

63

}

`

### `product-specification-group` props

| Prop name | Type   | Description                                               | Default value |
| --------- | ------ | --------------------------------------------------------- | ------------- |
| filter    | object | Filters the specifications that the block should display. | undefined     |

* **`filter` object:**

| Prop name           | Type       | Description                                                                                | Default value |
| ------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| specificationGroups | \[string\] | Array of specification group names to be hidden or shown (depending on what is defined in the type property) by the product-specification-group block.                                                                                | undefined     |
| type                | enum       | Determines whether the specification group names passed to the specificationGroups prop should be displayed or hidden on the UI. Possible values are: hide (hides specification groups declared in the specificationGroups prop) or show (only shows the specification groups declared in the specificationGroups prop). | undefined     |

#### `product-specification-text` props

| Prop name  | Type       | Description                                                                                | Default value |
| ---------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| blockClass | string     | Block ID of your choice to be used in [CSS customizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization%23using-the-blockclass-property).                                                                                | undefined     |
| message    | string     | Defines the block default text message to be rendered on the UI. You can also define the text message a block will render on the UI using the Site Editor in the Admin and the markers prop.                                                                                | undefined     |
| markers    | \[string\] | IDs of your choice to identify the block's rendered text message and customize it using the Site Editor in the Admin. Learn how to use them by reading the documentation on [Using the Markers prop to customize a block message](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-the-markers-prop-to-customize-a-blocks-message). Note that a block message can also be customized in the Store Theme source code using the message prop. | \[\]          |

### Step 3 - Editing the `product-specification-text` messages

As stated in the previous step, the `product-specification-text` uses the [ICU Message Format](https://read.calvincode.net/reader?url=https://format-message.github.io/icu-message-format-for-translators/), making it possible to fully edit the block's rendered text messages.

When using the `message` prop, you will not need to create an advanced configuration: declare the prop directly in your Store Theme app and pass to it the desired text value to be rendered with the block.

The `markers` prop, in turn, requires you to add an extra configuration in the Site Editor of the Admin to properly work. When using this prop, do not forget to check out the block message variables (shown in the table below) and the [Using the Markers prop to customize a block's message](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-the-markers-prop-to-customize-a-blocks-message) documentation.

| Message variable          | Type    | Description                                                                   |
| ------------------------- | ------- | ----------------------------------------------------------------------------- |
| groupName                 | string  | Specification group name.                                                     |
| specificationName         | string  | Specification name.                                                           |
| specificationValue        | string  | Specification value.                                                          |
| isFirstSpecificationValue | boolean | Determines whether it is the first specification value (true) or not (false). |
| isLastSpecificationValue  | boolean | Determines whether it is the last specification value (true) or not (false).  |

## Customization

To apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS handles for store customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).

| CSS handles               |
| ------------------------- |
| groupName                 |
| specificationName         |
| specificationValue        |
| specificationValue--first |
| specificationValue--last  |

[Product Quantity« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-quantity)[Product SummaryNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-summary)

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-specifications%23configuration)

[Step 1 - Adding the Product Specifications app to your theme dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-specifications%23step-1-adding-the-product-specifications-app-to-your-theme-dependencies)[Step 2 - Adding the Product Specification blocks to your theme templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-specifications%23step-2-adding-the-product-specification-blocks-to-your-theme-templates)[product-specification-group props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-specifications%23product-specification-group-props)[Step 3 - Editing the product-specification-text messages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-specifications%23step-3-editing-the-product-specification-text-messages)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-specifications/docs/apps/vtex.product-specifications%23customization)

Was this helpful?

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore global tokens colors in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/styling-overview)

[Themes reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/themes-overview)

[Global tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-overview)

[Colors](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-colors)

[Grid and Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-grid-and-layout)

[Interactive controls](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-interactive-controls)

[Refinements](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-refinements)

[Spacing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-spacing)

[Typography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-typography)

[Iconography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/styling-icons)

[Using themes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/using-themes-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/styling-overview)

[Themes reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/themes-overview)

[Global tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-overview)

[Colors](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-colors)

[Grid and Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-grid-and-layout)

[Interactive controls](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-interactive-controls)

[Refinements](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-refinements)

[Spacing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-spacing)

[Typography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-typography)

[Iconography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/styling-icons)

[Using themes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/using-themes-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/styling-overview)

[Global tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-overview)

Colors

The store palette with all the tones needed.

The store palette with all the tones needed.

## Main

* \--fs-color-main-0
`#f1f2f3`
* \--fs-color-main-1
`#dbdbdb`
* \--fs-color-main-2
`#00419e`
* \--fs-color-main-3
`#002c71`
* \--fs-color-main-4
`#002155`

## Accent

* \--fs-color-accent-0
`#efeaf5`
* \--fs-color-accent-1
`#d3c9de`
* \--fs-color-accent-2
`#9d8abf`
* \--fs-color-accent-3
`#74678c`
* \--fs-color-accent-4
`#423759`

## Neutral

* \--fs-color-neutral-0
`#ffffff`
* \--fs-color-neutral-1
`#f1f2f3`
* \--fs-color-neutral-2
`#e3e6e8`
* \--fs-color-neutral-3
`#c7ccd1`
* \--fs-color-neutral-4
`#9099a2`
* \--fs-color-neutral-5
`#74808b`
* \--fs-color-neutral-6
`#5d666f`
* \--fs-color-neutral-7
`#171a1c`

---

## Semantical tokens

## Hierarchy

| Global Token                           | Value                               |
| -------------------------------------- | ----------------------------------- |
| \--fs-color-primary-text               | var(--fs-color-text-inverse)        |
| \--fs-color-primary-bkg                | var(--fs-color-main-2)              |
| \--fs-color-primary-bkg-hover          | var(--fs-color-main-3)              |
| \--fs-color-primary-bkg-active         | var(--fs-color-main-4)              |
| \--fs-color-primary-bkg-light          | var(--fs-color-main-0)              |
| \--fs-color-primary-bkg-light-active   | var(--fs-color-main-1)              |
| \--fs-color-secondary-text             | var(--fs-color-primary-bkg)         |
| \--fs-color-secondary-bkg              | transparent                         |
| \--fs-color-secondary-bkg-hover        | var(--fs-color-primary-bkg)         |
| \--fs-color-secondary-bkg-active       | var(--fs-color-main-3)              |
| \--fs-color-secondary-bkg-light        | var(--fs-color-main-0)              |
| \--fs-color-secondary-bkg-light-active | var(--fs-color-secondary-bkg-light) |
| \--fs-color-tertiary-text              | var(--fs-color-link)                |
| \--fs-color-tertiary-bkg               | transparent                         |
| \--fs-color-tertiary-bkg-hover         | var(--fs-color-main-0)              |
| \--fs-color-tertiary-bkg-active        | var(--fs-color-main-1)              |
| \--fs-color-tertiary-bkg-light         | var(--fs-color-neutral-0)           |
| \--fs-color-tertiary-bkg-light-active  | var(--fs-color-tertiary-bkg-light)  |

## Components & States

| Global Token                        | Value                              |
| ----------------------------------- | ---------------------------------- |
| \--fs-color-body-bkg                | var(--fs-color-neutral-0)          |
| \--fs-body-bkg                      | \--fs-color-body-bkg               |
| \--fs-color-action-text             | var(--fs-color-text-inverse)       |
| \--fs-color-action-bkg              | var(--fs-color-accent-4)           |
| \--fs-color-action-bkg-hover        | var(--fs-color-accent-3)           |
| \--fs-color-action-bkg-active       | var(--fs-color-accent-2)           |
| \--fs-color-action-bkg-light        | var(--fs-color-neutral-0)          |
| \--fs-color-action-bkg-light-active | var(--fs-color-tertiary-bkg-light) |
| \--fs-color-link                    | var(--fs-color-main-2)             |
| \--fs-color-link-hover              | var(--fs-color-main-2)             |
| \--fs-color-link-active             | var(--fs-color-main-4)             |
| \--fs-color-link-visited            | #6058ba                            |
| \--fs-color-link-inverse            | var(--fs-color-neutral-0)          |
| \--fs-color-text                    | var(--fs-color-neutral-7)          |
| \--fs-color-text-light              | var(--fs-color-neutral-6)          |
| \--fs-color-text-inverse            | var(--fs-color-neutral-0)          |
| \--fs-color-text-display            | var(--fs-color-neutral-7)          |
| \--fs-color-focus-ring              | #8db6fa                            |
| \--fs-color-focus-ring-outline      | #8db6fa80                          |
| \--fs-color-focus-ring-danger       | #e1adad                            |

## Situations

| Global Token                 | Value                             |
| ---------------------------- | --------------------------------- |
| \--fs-color-success-text     | #1e493b                           |
| \--fs-color-success-bkg      | #b3ebd5                           |
| \--fs-color-success-border   | var(--fs-color-success-text)      |
| \--fs-color-warning-text     | var(--fs-color-text)              |
| \--fs-color-warning-bkg      | #fdec8d                           |
| \--fs-color-warning-border   | var(--fs-color-warning-text)      |
| \--fs-color-danger-text      | #cb4242                           |
| \--fs-color-danger-bkg       | var(--fs-color-focus-ring-danger) |
| \--fs-color-danger-border    | var(--fs-color-danger-text)       |
| \--fs-color-info-text        | var(--fs-color-text)              |
| \--fs-color-info-bkg         | var(--fs-color-main-1)            |
| \--fs-color-highlighted-text | var(--fs-color-text-display)      |
| \--fs-color-highlighted-bkg  | var(--fs-color-accent-0)          |
| \--fs-color-neutral-text     | var(--fs-color-text)              |
| \--fs-color-neutral-bkg      | var(--fs-color-neutral-1)         |
| \--fs-color-disabled-text    | var(--fs-color-neutral-6)         |
| \--fs-color-disabled-bkg     | var(--fs-color-neutral-2)         |

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/styling/global-tokens/colors.mdx)

[Global tokens« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-overview)[Grid and LayoutNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-grid-and-layout)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

ON THIS PAGE

[Main](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-colors%23main)

[Accent](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-colors%23accent)

[Neutral](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-colors%23neutral)

[Semantical tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-colors%23semantical-tokens)

[Hierarchy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-colors%23hierarchy)

[Components & States](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-colors%23components--states)

[Situations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-colors%23situations)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/styling/global-tokens/colors.mdx)

Copy page

On this page

ON THIS PAGE

[Main](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-colors%23main)

[Accent](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-colors%23accent)

[Neutral](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-colors%23neutral)

[Semantical tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-colors%23semantical-tokens)

[Hierarchy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-colors%23hierarchy)

[Components & States](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-colors%23components--states)

[Situations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-colors/docs/guides/faststore/global-tokens-colors%23situations)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)