diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..5354875 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,6 @@ +# Change Log + +All notable changes **after** version 1.0.0 to the react-hook-form-chakra library will be documented in this file. + +The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), +and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..73c34b8 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,27 @@ +Hello! Thanks for your interest in contributing! Before implementing new features and changes please create an issue so we can have a discussion about it! + +## ✨ Submitting a pull request + +1. Fork this repository +2. Create a new branch with the name of the feature you plan to work on +3. Install dependencies with npm install +4. Make your changes to src/components +5. Test your changes + - You can run the frontend components by running `npm run dev` + - Make sure you use your new or modified components in both demoWithProvider.tsx and demoWithoutProvider.tsx to ensure both use cases work properly +6. Push your changes to your fork's branch +7. Make a pull request to the main development branch + +## 🚀 Releasing + +Assuming you or a contributor followed the instructions for [making a pull request](#✨-submitting-a-pull-request) and are a maintainer you can follow these instructions to release a new version of the library. + +1. Run `npm run build` which will build the project and generate the documentation +2. Update the [changelog](./CHANGELOG.md) +3. Bump the version in package.json. Make sure it adheres to [semantic versioning](https://semver.org/) +4. Create a release commit in the format: `:bookmark: v{newVersionHere}` +5. Push changes to deployed master branch. +6. Create and publish a new release on github +7. Run `npm publish` +8. Update the codesandbox +9. Have a beer! 🍻 \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..72c451c --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 Crhistian Ramirez + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..0838a4a --- /dev/null +++ b/README.md @@ -0,0 +1,44 @@ +
+ react-hook-form-chakra logo +
+ +![license-badge](https://img.shields.io/github/license/crhistianramirez/react-hook-form-chakra) + +## Why? +Because setting up low level bindings is boring and tedious, and keeps you away from actually building solutions. This library takes care of most of the grunt work and doesn't try to abstract away the underlying frameworks but rather embraces their composable architecture by leveraging [inversion of control](https://kentcdodds.com/blog/inversion-of-control#compound-components) and [composable components](https://kentcdodds.com/blog/inversion-of-control). + +## 🔥 Demo + +- [Demo with FormProvider]() (simpler but less performant, see [section below](#form-provider) for more info) +- [Demo without FormProvider]() + +## ⚙️ Installation + +> Requires `react`, `react-hook-form`, and `@chakra-ui/react` as peer dependencies + +``` +npm install react-hook-form-chakra +``` + +or + +``` +yarn add react-hook-form-chakra +``` + +## 📝 Form Provider +React hook form can be configured to use [FormProvider](https://react-hook-form.com/api/formprovider/) which uses context to implicitly pass form data down to all children components. This approach simplifies development but it does have some [performance implications](https://react-hook-form.com/advanced-usage/#FormProviderPerformance) to be mindful of. + +When using FormProvider [control]((https://react-hook-form.com/api/useform/control/)) is not required on components, otherwise it is. Check out [our demo](#-demo) for usage examples. + +## 📖 API Reference +Documentation for all component props can be found [here](https://crhistianramirez.github.io/react-hook-form-chakra/). + +## 📄 License +react-hook-form-chakra is an open-sourced software licensed under the [MIT license](https://github.com/crhistianramirez/react-hook-form-chakra/blob/main/LICENSE). + +## 🤝 Contributing +Check out our [Contributing guide](https://github.com/crhistianramirez/react-hook-form-chakra/blob/main/CONTRIBUTING.md). + +## 🙇 Credit +This library was adapted from another similar chakra binding library [made for Formik](https://github.com/thekaganugur/formik-chakra-ui) diff --git a/docs/.nojekyll b/docs/.nojekyll new file mode 100644 index 0000000..e2ac661 --- /dev/null +++ b/docs/.nojekyll @@ -0,0 +1 @@ +TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false. \ No newline at end of file diff --git a/docs/assets/highlight.css b/docs/assets/highlight.css new file mode 100644 index 0000000..9335a16 --- /dev/null +++ b/docs/assets/highlight.css @@ -0,0 +1,78 @@ +:root { + --light-hl-0: #800000; + --dark-hl-0: #808080; + --light-hl-1: #267F99; + --dark-hl-1: #4EC9B0; + --light-hl-2: #000000; + --dark-hl-2: #D4D4D4; + --light-hl-3: #E50000; + --dark-hl-3: #9CDCFE; + --light-hl-4: #0000FF; + --dark-hl-4: #569CD6; + --light-hl-5: #000000FF; + --dark-hl-5: #D4D4D4; + --light-hl-6: #001080; + --dark-hl-6: #9CDCFE; + --light-hl-7: #A31515; + --dark-hl-7: #CE9178; + --light-code-background: #FFFFFF; + --dark-code-background: #1E1E1E; +} + +@media (prefers-color-scheme: light) { :root { + --hl-0: var(--light-hl-0); + --hl-1: var(--light-hl-1); + --hl-2: var(--light-hl-2); + --hl-3: var(--light-hl-3); + --hl-4: var(--light-hl-4); + --hl-5: var(--light-hl-5); + --hl-6: var(--light-hl-6); + --hl-7: var(--light-hl-7); + --code-background: var(--light-code-background); +} } + +@media (prefers-color-scheme: dark) { :root { + --hl-0: var(--dark-hl-0); + --hl-1: var(--dark-hl-1); + --hl-2: var(--dark-hl-2); + --hl-3: var(--dark-hl-3); + --hl-4: var(--dark-hl-4); + --hl-5: var(--dark-hl-5); + --hl-6: var(--dark-hl-6); + --hl-7: var(--dark-hl-7); + --code-background: var(--dark-code-background); +} } + +:root[data-theme='light'] { + --hl-0: var(--light-hl-0); + --hl-1: var(--light-hl-1); + --hl-2: var(--light-hl-2); + --hl-3: var(--light-hl-3); + --hl-4: var(--light-hl-4); + --hl-5: var(--light-hl-5); + --hl-6: var(--light-hl-6); + --hl-7: var(--light-hl-7); + --code-background: var(--light-code-background); +} + +:root[data-theme='dark'] { + --hl-0: var(--dark-hl-0); + --hl-1: var(--dark-hl-1); + --hl-2: var(--dark-hl-2); + --hl-3: var(--dark-hl-3); + --hl-4: var(--dark-hl-4); + --hl-5: var(--dark-hl-5); + --hl-6: var(--dark-hl-6); + --hl-7: var(--dark-hl-7); + --code-background: var(--dark-code-background); +} + +.hl-0 { color: var(--hl-0); } +.hl-1 { color: var(--hl-1); } +.hl-2 { color: var(--hl-2); } +.hl-3 { color: var(--hl-3); } +.hl-4 { color: var(--hl-4); } +.hl-5 { color: var(--hl-5); } +.hl-6 { color: var(--hl-6); } +.hl-7 { color: var(--hl-7); } +pre, code { background: var(--code-background); } diff --git a/docs/assets/main.js b/docs/assets/main.js new file mode 100644 index 0000000..f7c8366 --- /dev/null +++ b/docs/assets/main.js @@ -0,0 +1,58 @@ +"use strict"; +"use strict";(()=>{var Qe=Object.create;var ae=Object.defineProperty;var Pe=Object.getOwnPropertyDescriptor;var Ce=Object.getOwnPropertyNames;var Oe=Object.getPrototypeOf,Re=Object.prototype.hasOwnProperty;var _e=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports);var Me=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of Ce(e))!Re.call(t,i)&&i!==n&&ae(t,i,{get:()=>e[i],enumerable:!(r=Pe(e,i))||r.enumerable});return t};var De=(t,e,n)=>(n=t!=null?Qe(Oe(t)):{},Me(e||!t||!t.__esModule?ae(n,"default",{value:t,enumerable:!0}):n,t));var de=_e((ce,he)=>{(function(){var t=function(e){var n=new t.Builder;return n.pipeline.add(t.trimmer,t.stopWordFilter,t.stemmer),n.searchPipeline.add(t.stemmer),e.call(n,n),n.build()};t.version="2.3.9";t.utils={},t.utils.warn=function(e){return function(n){e.console&&console.warn&&console.warn(n)}}(this),t.utils.asString=function(e){return e==null?"":e.toString()},t.utils.clone=function(e){if(e==null)return e;for(var n=Object.create(null),r=Object.keys(e),i=0;i0){var h=t.utils.clone(n)||{};h.position=[a,l],h.index=s.length,s.push(new t.Token(r.slice(a,o),h))}a=o+1}}return s},t.tokenizer.separator=/[\s\-]+/;t.Pipeline=function(){this._stack=[]},t.Pipeline.registeredFunctions=Object.create(null),t.Pipeline.registerFunction=function(e,n){n in this.registeredFunctions&&t.utils.warn("Overwriting existing registered function: "+n),e.label=n,t.Pipeline.registeredFunctions[e.label]=e},t.Pipeline.warnIfFunctionNotRegistered=function(e){var n=e.label&&e.label in this.registeredFunctions;n||t.utils.warn(`Function is not registered with pipeline. This may cause problems when serialising the index. +`,e)},t.Pipeline.load=function(e){var n=new t.Pipeline;return e.forEach(function(r){var i=t.Pipeline.registeredFunctions[r];if(i)n.add(i);else throw new Error("Cannot load unregistered function: "+r)}),n},t.Pipeline.prototype.add=function(){var e=Array.prototype.slice.call(arguments);e.forEach(function(n){t.Pipeline.warnIfFunctionNotRegistered(n),this._stack.push(n)},this)},t.Pipeline.prototype.after=function(e,n){t.Pipeline.warnIfFunctionNotRegistered(n);var r=this._stack.indexOf(e);if(r==-1)throw new Error("Cannot find existingFn");r=r+1,this._stack.splice(r,0,n)},t.Pipeline.prototype.before=function(e,n){t.Pipeline.warnIfFunctionNotRegistered(n);var r=this._stack.indexOf(e);if(r==-1)throw new Error("Cannot find existingFn");this._stack.splice(r,0,n)},t.Pipeline.prototype.remove=function(e){var n=this._stack.indexOf(e);n!=-1&&this._stack.splice(n,1)},t.Pipeline.prototype.run=function(e){for(var n=this._stack.length,r=0;r1&&(oe&&(r=s),o!=e);)i=r-n,s=n+Math.floor(i/2),o=this.elements[s*2];if(o==e||o>e)return s*2;if(ou?h+=2:a==u&&(n+=r[l+1]*i[h+1],l+=2,h+=2);return n},t.Vector.prototype.similarity=function(e){return this.dot(e)/this.magnitude()||0},t.Vector.prototype.toArray=function(){for(var e=new Array(this.elements.length/2),n=1,r=0;n0){var o=s.str.charAt(0),a;o in s.node.edges?a=s.node.edges[o]:(a=new t.TokenSet,s.node.edges[o]=a),s.str.length==1&&(a.final=!0),i.push({node:a,editsRemaining:s.editsRemaining,str:s.str.slice(1)})}if(s.editsRemaining!=0){if("*"in s.node.edges)var u=s.node.edges["*"];else{var u=new t.TokenSet;s.node.edges["*"]=u}if(s.str.length==0&&(u.final=!0),i.push({node:u,editsRemaining:s.editsRemaining-1,str:s.str}),s.str.length>1&&i.push({node:s.node,editsRemaining:s.editsRemaining-1,str:s.str.slice(1)}),s.str.length==1&&(s.node.final=!0),s.str.length>=1){if("*"in s.node.edges)var l=s.node.edges["*"];else{var l=new t.TokenSet;s.node.edges["*"]=l}s.str.length==1&&(l.final=!0),i.push({node:l,editsRemaining:s.editsRemaining-1,str:s.str.slice(1)})}if(s.str.length>1){var h=s.str.charAt(0),m=s.str.charAt(1),v;m in s.node.edges?v=s.node.edges[m]:(v=new t.TokenSet,s.node.edges[m]=v),s.str.length==1&&(v.final=!0),i.push({node:v,editsRemaining:s.editsRemaining-1,str:h+s.str.slice(2)})}}}return r},t.TokenSet.fromString=function(e){for(var n=new t.TokenSet,r=n,i=0,s=e.length;i=e;n--){var r=this.uncheckedNodes[n],i=r.child.toString();i in this.minimizedNodes?r.parent.edges[r.char]=this.minimizedNodes[i]:(r.child._str=i,this.minimizedNodes[i]=r.child),this.uncheckedNodes.pop()}};t.Index=function(e){this.invertedIndex=e.invertedIndex,this.fieldVectors=e.fieldVectors,this.tokenSet=e.tokenSet,this.fields=e.fields,this.pipeline=e.pipeline},t.Index.prototype.search=function(e){return this.query(function(n){var r=new t.QueryParser(e,n);r.parse()})},t.Index.prototype.query=function(e){for(var n=new t.Query(this.fields),r=Object.create(null),i=Object.create(null),s=Object.create(null),o=Object.create(null),a=Object.create(null),u=0;u1?this._b=1:this._b=e},t.Builder.prototype.k1=function(e){this._k1=e},t.Builder.prototype.add=function(e,n){var r=e[this._ref],i=Object.keys(this._fields);this._documents[r]=n||{},this.documentCount+=1;for(var s=0;s=this.length)return t.QueryLexer.EOS;var e=this.str.charAt(this.pos);return this.pos+=1,e},t.QueryLexer.prototype.width=function(){return this.pos-this.start},t.QueryLexer.prototype.ignore=function(){this.start==this.pos&&(this.pos+=1),this.start=this.pos},t.QueryLexer.prototype.backup=function(){this.pos-=1},t.QueryLexer.prototype.acceptDigitRun=function(){var e,n;do e=this.next(),n=e.charCodeAt(0);while(n>47&&n<58);e!=t.QueryLexer.EOS&&this.backup()},t.QueryLexer.prototype.more=function(){return this.pos1&&(e.backup(),e.emit(t.QueryLexer.TERM)),e.ignore(),e.more())return t.QueryLexer.lexText},t.QueryLexer.lexEditDistance=function(e){return e.ignore(),e.acceptDigitRun(),e.emit(t.QueryLexer.EDIT_DISTANCE),t.QueryLexer.lexText},t.QueryLexer.lexBoost=function(e){return e.ignore(),e.acceptDigitRun(),e.emit(t.QueryLexer.BOOST),t.QueryLexer.lexText},t.QueryLexer.lexEOS=function(e){e.width()>0&&e.emit(t.QueryLexer.TERM)},t.QueryLexer.termSeparator=t.tokenizer.separator,t.QueryLexer.lexText=function(e){for(;;){var n=e.next();if(n==t.QueryLexer.EOS)return t.QueryLexer.lexEOS;if(n.charCodeAt(0)==92){e.escapeCharacter();continue}if(n==":")return t.QueryLexer.lexField;if(n=="~")return e.backup(),e.width()>0&&e.emit(t.QueryLexer.TERM),t.QueryLexer.lexEditDistance;if(n=="^")return e.backup(),e.width()>0&&e.emit(t.QueryLexer.TERM),t.QueryLexer.lexBoost;if(n=="+"&&e.width()===1||n=="-"&&e.width()===1)return e.emit(t.QueryLexer.PRESENCE),t.QueryLexer.lexText;if(n.match(t.QueryLexer.termSeparator))return t.QueryLexer.lexTerm}},t.QueryParser=function(e,n){this.lexer=new t.QueryLexer(e),this.query=n,this.currentClause={},this.lexemeIdx=0},t.QueryParser.prototype.parse=function(){this.lexer.run(),this.lexemes=this.lexer.lexemes;for(var e=t.QueryParser.parseClause;e;)e=e(this);return this.query},t.QueryParser.prototype.peekLexeme=function(){return this.lexemes[this.lexemeIdx]},t.QueryParser.prototype.consumeLexeme=function(){var e=this.peekLexeme();return this.lexemeIdx+=1,e},t.QueryParser.prototype.nextClause=function(){var e=this.currentClause;this.query.clause(e),this.currentClause={}},t.QueryParser.parseClause=function(e){var n=e.peekLexeme();if(n!=null)switch(n.type){case t.QueryLexer.PRESENCE:return t.QueryParser.parsePresence;case t.QueryLexer.FIELD:return t.QueryParser.parseField;case t.QueryLexer.TERM:return t.QueryParser.parseTerm;default:var r="expected either a field or a term, found "+n.type;throw n.str.length>=1&&(r+=" with value '"+n.str+"'"),new t.QueryParseError(r,n.start,n.end)}},t.QueryParser.parsePresence=function(e){var n=e.consumeLexeme();if(n!=null){switch(n.str){case"-":e.currentClause.presence=t.Query.presence.PROHIBITED;break;case"+":e.currentClause.presence=t.Query.presence.REQUIRED;break;default:var r="unrecognised presence operator'"+n.str+"'";throw new t.QueryParseError(r,n.start,n.end)}var i=e.peekLexeme();if(i==null){var r="expecting term or field, found nothing";throw new t.QueryParseError(r,n.start,n.end)}switch(i.type){case t.QueryLexer.FIELD:return t.QueryParser.parseField;case t.QueryLexer.TERM:return t.QueryParser.parseTerm;default:var r="expecting term or field, found '"+i.type+"'";throw new t.QueryParseError(r,i.start,i.end)}}},t.QueryParser.parseField=function(e){var n=e.consumeLexeme();if(n!=null){if(e.query.allFields.indexOf(n.str)==-1){var r=e.query.allFields.map(function(o){return"'"+o+"'"}).join(", "),i="unrecognised field '"+n.str+"', possible fields: "+r;throw new t.QueryParseError(i,n.start,n.end)}e.currentClause.fields=[n.str];var s=e.peekLexeme();if(s==null){var i="expecting term, found nothing";throw new t.QueryParseError(i,n.start,n.end)}switch(s.type){case t.QueryLexer.TERM:return t.QueryParser.parseTerm;default:var i="expecting term, found '"+s.type+"'";throw new t.QueryParseError(i,s.start,s.end)}}},t.QueryParser.parseTerm=function(e){var n=e.consumeLexeme();if(n!=null){e.currentClause.term=n.str.toLowerCase(),n.str.indexOf("*")!=-1&&(e.currentClause.usePipeline=!1);var r=e.peekLexeme();if(r==null){e.nextClause();return}switch(r.type){case t.QueryLexer.TERM:return e.nextClause(),t.QueryParser.parseTerm;case t.QueryLexer.FIELD:return e.nextClause(),t.QueryParser.parseField;case t.QueryLexer.EDIT_DISTANCE:return t.QueryParser.parseEditDistance;case t.QueryLexer.BOOST:return t.QueryParser.parseBoost;case t.QueryLexer.PRESENCE:return e.nextClause(),t.QueryParser.parsePresence;default:var i="Unexpected lexeme type '"+r.type+"'";throw new t.QueryParseError(i,r.start,r.end)}}},t.QueryParser.parseEditDistance=function(e){var n=e.consumeLexeme();if(n!=null){var r=parseInt(n.str,10);if(isNaN(r)){var i="edit distance must be numeric";throw new t.QueryParseError(i,n.start,n.end)}e.currentClause.editDistance=r;var s=e.peekLexeme();if(s==null){e.nextClause();return}switch(s.type){case t.QueryLexer.TERM:return e.nextClause(),t.QueryParser.parseTerm;case t.QueryLexer.FIELD:return e.nextClause(),t.QueryParser.parseField;case t.QueryLexer.EDIT_DISTANCE:return t.QueryParser.parseEditDistance;case t.QueryLexer.BOOST:return t.QueryParser.parseBoost;case t.QueryLexer.PRESENCE:return e.nextClause(),t.QueryParser.parsePresence;default:var i="Unexpected lexeme type '"+s.type+"'";throw new t.QueryParseError(i,s.start,s.end)}}},t.QueryParser.parseBoost=function(e){var n=e.consumeLexeme();if(n!=null){var r=parseInt(n.str,10);if(isNaN(r)){var i="boost must be numeric";throw new t.QueryParseError(i,n.start,n.end)}e.currentClause.boost=r;var s=e.peekLexeme();if(s==null){e.nextClause();return}switch(s.type){case t.QueryLexer.TERM:return e.nextClause(),t.QueryParser.parseTerm;case t.QueryLexer.FIELD:return e.nextClause(),t.QueryParser.parseField;case t.QueryLexer.EDIT_DISTANCE:return t.QueryParser.parseEditDistance;case t.QueryLexer.BOOST:return t.QueryParser.parseBoost;case t.QueryLexer.PRESENCE:return e.nextClause(),t.QueryParser.parsePresence;default:var i="Unexpected lexeme type '"+s.type+"'";throw new t.QueryParseError(i,s.start,s.end)}}},function(e,n){typeof define=="function"&&define.amd?define(n):typeof ce=="object"?he.exports=n():e.lunr=n()}(this,function(){return t})})()});var le=[];function B(t,e){le.push({selector:e,constructor:t})}var Y=class{constructor(){this.alwaysVisibleMember=null;this.createComponents(document.body),this.ensureFocusedElementVisible(),window.addEventListener("hashchange",()=>this.ensureFocusedElementVisible())}createComponents(e){le.forEach(n=>{e.querySelectorAll(n.selector).forEach(r=>{r.dataset.hasInstance||(new n.constructor({el:r,app:this}),r.dataset.hasInstance=String(!0))})})}filterChanged(){this.ensureFocusedElementVisible()}ensureFocusedElementVisible(){this.alwaysVisibleMember&&(this.alwaysVisibleMember.classList.remove("always-visible"),this.alwaysVisibleMember.firstElementChild.remove(),this.alwaysVisibleMember=null);let e=document.getElementById(location.hash.substring(1));if(!e)return;let n=e.parentElement;for(;n&&n.tagName!=="SECTION";)n=n.parentElement;if(n&&n.offsetParent==null){this.alwaysVisibleMember=n,n.classList.add("always-visible");let r=document.createElement("p");r.classList.add("warning"),r.textContent="This member is normally hidden due to your filter settings.",n.prepend(r)}}};var I=class{constructor(e){this.el=e.el,this.app=e.app}};var J=class{constructor(){this.listeners={}}addEventListener(e,n){e in this.listeners||(this.listeners[e]=[]),this.listeners[e].push(n)}removeEventListener(e,n){if(!(e in this.listeners))return;let r=this.listeners[e];for(let i=0,s=r.length;i{let n=Date.now();return(...r)=>{n+e-Date.now()<0&&(t(...r),n=Date.now())}};var re=class extends J{constructor(){super();this.scrollTop=0;this.lastY=0;this.width=0;this.height=0;this.showToolbar=!0;this.toolbar=document.querySelector(".tsd-page-toolbar"),this.navigation=document.querySelector(".col-menu"),window.addEventListener("scroll",ne(()=>this.onScroll(),10)),window.addEventListener("resize",ne(()=>this.onResize(),10)),this.searchInput=document.querySelector("#tsd-search input"),this.searchInput&&this.searchInput.addEventListener("focus",()=>{this.hideShowToolbar()}),this.onResize(),this.onScroll()}triggerResize(){let n=new CustomEvent("resize",{detail:{width:this.width,height:this.height}});this.dispatchEvent(n)}onResize(){this.width=window.innerWidth||0,this.height=window.innerHeight||0;let n=new CustomEvent("resize",{detail:{width:this.width,height:this.height}});this.dispatchEvent(n)}onScroll(){this.scrollTop=window.scrollY||0;let n=new CustomEvent("scroll",{detail:{scrollTop:this.scrollTop}});this.dispatchEvent(n),this.hideShowToolbar()}hideShowToolbar(){let n=this.showToolbar;this.showToolbar=this.lastY>=this.scrollTop||this.scrollTop<=0||!!this.searchInput&&this.searchInput===document.activeElement,n!==this.showToolbar&&(this.toolbar.classList.toggle("tsd-page-toolbar--hide"),this.navigation?.classList.toggle("col-menu--hide")),this.lastY=this.scrollTop}},R=re;R.instance=new re;var X=class extends I{constructor(n){super(n);this.anchors=[];this.index=-1;R.instance.addEventListener("resize",()=>this.onResize()),R.instance.addEventListener("scroll",r=>this.onScroll(r)),this.createAnchors()}createAnchors(){let n=window.location.href;n.indexOf("#")!=-1&&(n=n.substring(0,n.indexOf("#"))),this.el.querySelectorAll("a").forEach(r=>{let i=r.href;if(i.indexOf("#")==-1||i.substring(0,n.length)!=n)return;let s=i.substring(i.indexOf("#")+1),o=document.querySelector("a.tsd-anchor[name="+s+"]"),a=r.parentNode;!o||!a||this.anchors.push({link:a,anchor:o,position:0})}),this.onResize()}onResize(){let n;for(let i=0,s=this.anchors.length;ii.position-s.position);let r=new CustomEvent("scroll",{detail:{scrollTop:R.instance.scrollTop}});this.onScroll(r)}onScroll(n){let r=n.detail.scrollTop+5,i=this.anchors,s=i.length-1,o=this.index;for(;o>-1&&i[o].position>r;)o-=1;for(;o-1&&this.anchors[this.index].link.classList.remove("focus"),this.index=o,this.index>-1&&this.anchors[this.index].link.classList.add("focus"))}};var ue=(t,e=100)=>{let n;return()=>{clearTimeout(n),n=setTimeout(()=>t(),e)}};var me=De(de());function ve(){let t=document.getElementById("tsd-search");if(!t)return;let e=document.getElementById("search-script");t.classList.add("loading"),e&&(e.addEventListener("error",()=>{t.classList.remove("loading"),t.classList.add("failure")}),e.addEventListener("load",()=>{t.classList.remove("loading"),t.classList.add("ready")}),window.searchData&&t.classList.remove("loading"));let n=document.querySelector("#tsd-search input"),r=document.querySelector("#tsd-search .results");if(!n||!r)throw new Error("The input field or the result list wrapper was not found");let i=!1;r.addEventListener("mousedown",()=>i=!0),r.addEventListener("mouseup",()=>{i=!1,t.classList.remove("has-focus")}),n.addEventListener("focus",()=>t.classList.add("has-focus")),n.addEventListener("blur",()=>{i||(i=!1,t.classList.remove("has-focus"))});let s={base:t.dataset.base+"/"};Fe(t,r,n,s)}function Fe(t,e,n,r){n.addEventListener("input",ue(()=>{He(t,e,n,r)},200));let i=!1;n.addEventListener("keydown",s=>{i=!0,s.key=="Enter"?Ve(e,n):s.key=="Escape"?n.blur():s.key=="ArrowUp"?pe(e,-1):s.key==="ArrowDown"?pe(e,1):i=!1}),n.addEventListener("keypress",s=>{i&&s.preventDefault()}),document.body.addEventListener("keydown",s=>{s.altKey||s.ctrlKey||s.metaKey||!n.matches(":focus")&&s.key==="/"&&(n.focus(),s.preventDefault())})}function Ae(t,e){t.index||window.searchData&&(e.classList.remove("loading"),e.classList.add("ready"),t.data=window.searchData,t.index=me.Index.load(window.searchData.index))}function He(t,e,n,r){if(Ae(r,t),!r.index||!r.data)return;e.textContent="";let i=n.value.trim(),s=i?r.index.search(`*${i}*`):[];for(let o=0;oa.score-o.score);for(let o=0,a=Math.min(10,s.length);o${fe(u.parent,i)}.${l}`);let h=document.createElement("li");h.classList.value=u.classes??"";let m=document.createElement("a");m.href=r.base+u.url,m.innerHTML=l,h.append(m),e.appendChild(h)}}function pe(t,e){let n=t.querySelector(".current");if(!n)n=t.querySelector(e==1?"li:first-child":"li:last-child"),n&&n.classList.add("current");else{let r=n;if(e===1)do r=r.nextElementSibling??void 0;while(r instanceof HTMLElement&&r.offsetParent==null);else do r=r.previousElementSibling??void 0;while(r instanceof HTMLElement&&r.offsetParent==null);r&&(n.classList.remove("current"),r.classList.add("current"))}}function Ve(t,e){let n=t.querySelector(".current");if(n||(n=t.querySelector("li:first-child")),n){let r=n.querySelector("a");r&&(window.location.href=r.href),e.blur()}}function fe(t,e){if(e==="")return t;let n=t.toLocaleLowerCase(),r=e.toLocaleLowerCase(),i=[],s=0,o=n.indexOf(r);for(;o!=-1;)i.push(ie(t.substring(s,o)),`${ie(t.substring(o,o+r.length))}`),s=o+r.length,o=n.indexOf(r,s);return i.push(ie(t.substring(s))),i.join("")}var Ne={"&":"&","<":"<",">":">","'":"'",'"':"""};function ie(t){return t.replace(/[&<>"'"]/g,e=>Ne[e])}var F="mousedown",ye="mousemove",j="mouseup",Z={x:0,y:0},ge=!1,se=!1,Be=!1,A=!1,xe=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);document.documentElement.classList.add(xe?"is-mobile":"not-mobile");xe&&"ontouchstart"in document.documentElement&&(Be=!0,F="touchstart",ye="touchmove",j="touchend");document.addEventListener(F,t=>{se=!0,A=!1;let e=F=="touchstart"?t.targetTouches[0]:t;Z.y=e.pageY||0,Z.x=e.pageX||0});document.addEventListener(ye,t=>{if(se&&!A){let e=F=="touchstart"?t.targetTouches[0]:t,n=Z.x-(e.pageX||0),r=Z.y-(e.pageY||0);A=Math.sqrt(n*n+r*r)>10}});document.addEventListener(j,()=>{se=!1});document.addEventListener("click",t=>{ge&&(t.preventDefault(),t.stopImmediatePropagation(),ge=!1)});var K=class extends I{constructor(n){super(n);this.className=this.el.dataset.toggle||"",this.el.addEventListener(j,r=>this.onPointerUp(r)),this.el.addEventListener("click",r=>r.preventDefault()),document.addEventListener(F,r=>this.onDocumentPointerDown(r)),document.addEventListener(j,r=>this.onDocumentPointerUp(r))}setActive(n){if(this.active==n)return;this.active=n,document.documentElement.classList.toggle("has-"+this.className,n),this.el.classList.toggle("active",n);let r=(this.active?"to-has-":"from-has-")+this.className;document.documentElement.classList.add(r),setTimeout(()=>document.documentElement.classList.remove(r),500)}onPointerUp(n){A||(this.setActive(!0),n.preventDefault())}onDocumentPointerDown(n){if(this.active){if(n.target.closest(".col-menu, .tsd-filter-group"))return;this.setActive(!1)}}onDocumentPointerUp(n){if(!A&&this.active&&n.target.closest(".col-menu")){let r=n.target.closest("a");if(r){let i=window.location.href;i.indexOf("#")!=-1&&(i=i.substring(0,i.indexOf("#"))),r.href.substring(0,i.length)==i&&setTimeout(()=>this.setActive(!1),250)}}}};var oe;try{oe=localStorage}catch{oe={getItem(){return null},setItem(){}}}var Q=oe;var Le=document.head.appendChild(document.createElement("style"));Le.dataset.for="filters";var ee=class extends I{constructor(n){super(n);this.key=`filter-${this.el.name}`,this.value=this.el.checked,this.el.addEventListener("change",()=>{this.setLocalStorage(this.el.checked)}),this.setLocalStorage(this.fromLocalStorage()),Le.innerHTML+=`html:not(.${this.key}) .tsd-is-${this.el.name} { display: none; } +`}fromLocalStorage(){let n=Q.getItem(this.key);return n?n==="true":this.el.checked}setLocalStorage(n){Q.setItem(this.key,n.toString()),this.value=n,this.handleValueChange()}handleValueChange(){this.el.checked=this.value,document.documentElement.classList.toggle(this.key,this.value),this.app.filterChanged(),document.querySelectorAll(".tsd-index-section").forEach(n=>{n.style.display="block";let r=Array.from(n.querySelectorAll(".tsd-index-link")).every(i=>i.offsetParent==null);n.style.display=r?"none":"block"})}};var te=class extends I{constructor(n){super(n);this.calculateHeights(),this.summary=this.el.querySelector(".tsd-accordion-summary"),this.icon=this.summary.querySelector("svg"),this.key=`tsd-accordion-${this.summary.textContent.replace(/\s+/g,"-").toLowerCase()}`,this.setLocalStorage(this.fromLocalStorage(),!0),this.summary.addEventListener("click",r=>this.toggleVisibility(r)),this.icon.style.transform=this.getIconRotation()}getIconRotation(n=this.el.open){return`rotate(${n?0:-90}deg)`}calculateHeights(){let n=this.el.open,{position:r,left:i}=this.el.style;this.el.style.position="fixed",this.el.style.left="-9999px",this.el.open=!0,this.expandedHeight=this.el.offsetHeight+"px",this.el.open=!1,this.collapsedHeight=this.el.offsetHeight+"px",this.el.open=n,this.el.style.height=n?this.expandedHeight:this.collapsedHeight,this.el.style.position=r,this.el.style.left=i}toggleVisibility(n){n.preventDefault(),this.el.style.overflow="hidden",this.el.open?this.collapse():this.expand()}expand(n=!0){this.el.open=!0,this.animate(this.collapsedHeight,this.expandedHeight,{opening:!0,duration:n?300:0})}collapse(n=!0){this.animate(this.expandedHeight,this.collapsedHeight,{opening:!1,duration:n?300:0})}animate(n,r,{opening:i,duration:s=300}){if(this.animation)return;let o={duration:s,easing:"ease"};this.animation=this.el.animate({height:[n,r]},o),this.icon.animate({transform:[this.icon.style.transform||this.getIconRotation(!i),this.getIconRotation(i)]},o).addEventListener("finish",()=>{this.icon.style.transform=this.getIconRotation(i)}),this.animation.addEventListener("finish",()=>this.animationEnd(i))}animationEnd(n){this.el.open=n,this.animation=void 0,this.el.style.height="auto",this.el.style.overflow="visible",this.setLocalStorage(n)}fromLocalStorage(){let n=Q.getItem(this.key);return n?n==="true":this.el.open}setLocalStorage(n,r=!1){this.fromLocalStorage()===n&&!r||(Q.setItem(this.key,n.toString()),this.el.open=n,this.handleValueChange(r))}handleValueChange(n=!1){this.fromLocalStorage()===this.el.open&&!n||(this.fromLocalStorage()?this.expand(!1):this.collapse(!1))}};function be(t){let e=Q.getItem("tsd-theme")||"os";t.value=e,Ee(e),t.addEventListener("change",()=>{Q.setItem("tsd-theme",t.value),Ee(t.value)})}function Ee(t){document.documentElement.dataset.theme=t}ve();B(X,".menu-highlight");B(K,"a[data-toggle]");B(te,".tsd-index-accordion");B(ee,".tsd-filter-item input[type=checkbox]");var we=document.getElementById("theme");we&&be(we);var je=new Y;Object.defineProperty(window,"app",{value:je});})(); +/*! Bundled license information: + +lunr/lunr.js: + (** + * lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 2.3.9 + * Copyright (C) 2020 Oliver Nightingale + * @license MIT + *) + (*! + * lunr.utils + * Copyright (C) 2020 Oliver Nightingale + *) + (*! + * lunr.Set + * Copyright (C) 2020 Oliver Nightingale + *) + (*! + * lunr.tokenizer + * Copyright (C) 2020 Oliver Nightingale + *) + (*! + * lunr.Pipeline + * Copyright (C) 2020 Oliver Nightingale + *) + (*! + * lunr.Vector + * Copyright (C) 2020 Oliver Nightingale + *) + (*! + * lunr.stemmer + * Copyright (C) 2020 Oliver Nightingale + * Includes code from - http://tartarus.org/~martin/PorterStemmer/js.txt + *) + (*! + * lunr.stopWordFilter + * Copyright (C) 2020 Oliver Nightingale + *) + (*! + * lunr.trimmer + * Copyright (C) 2020 Oliver Nightingale + *) + (*! + * lunr.TokenSet + * Copyright (C) 2020 Oliver Nightingale + *) + (*! + * lunr.Index + * Copyright (C) 2020 Oliver Nightingale + *) + (*! + * lunr.Builder + * Copyright (C) 2020 Oliver Nightingale + *) +*/ diff --git a/docs/assets/search.js b/docs/assets/search.js new file mode 100644 index 0000000..182fe0c --- /dev/null +++ b/docs/assets/search.js @@ -0,0 +1 @@ +window.searchData = JSON.parse("{\"kinds\":{\"256\":\"Interface\",\"1024\":\"Property\"},\"rows\":[{\"kind\":256,\"name\":\"CheckboxContainerProps\",\"url\":\"interfaces/CheckboxContainerProps.html\",\"classes\":\"tsd-kind-interface\"},{\"kind\":1024,\"name\":\"stackProps\",\"url\":\"interfaces/CheckboxContainerProps.html#stackProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"CheckboxContainerProps\"},{\"kind\":1024,\"name\":\"children\",\"url\":\"interfaces/CheckboxContainerProps.html#children\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"CheckboxContainerProps\"},{\"kind\":1024,\"name\":\"name\",\"url\":\"interfaces/CheckboxContainerProps.html#name\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"CheckboxContainerProps\"},{\"kind\":1024,\"name\":\"control\",\"url\":\"interfaces/CheckboxContainerProps.html#control\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"CheckboxContainerProps\"},{\"kind\":1024,\"name\":\"label\",\"url\":\"interfaces/CheckboxContainerProps.html#label\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"CheckboxContainerProps\"},{\"kind\":1024,\"name\":\"labelProps\",\"url\":\"interfaces/CheckboxContainerProps.html#labelProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"CheckboxContainerProps\"},{\"kind\":1024,\"name\":\"helperText\",\"url\":\"interfaces/CheckboxContainerProps.html#helperText\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"CheckboxContainerProps\"},{\"kind\":1024,\"name\":\"helperTextProps\",\"url\":\"interfaces/CheckboxContainerProps.html#helperTextProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"CheckboxContainerProps\"},{\"kind\":1024,\"name\":\"errorMessageProps\",\"url\":\"interfaces/CheckboxContainerProps.html#errorMessageProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"CheckboxContainerProps\"},{\"kind\":256,\"name\":\"CheckboxControlProps\",\"url\":\"interfaces/CheckboxControlProps.html\",\"classes\":\"tsd-kind-interface\"},{\"kind\":1024,\"name\":\"name\",\"url\":\"interfaces/CheckboxControlProps.html#name\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"CheckboxControlProps\"},{\"kind\":1024,\"name\":\"control\",\"url\":\"interfaces/CheckboxControlProps.html#control\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"CheckboxControlProps\"},{\"kind\":1024,\"name\":\"label\",\"url\":\"interfaces/CheckboxControlProps.html#label\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"CheckboxControlProps\"},{\"kind\":256,\"name\":\"CheckboxSingleProps\",\"url\":\"interfaces/CheckboxSingleProps.html\",\"classes\":\"tsd-kind-interface\"},{\"kind\":1024,\"name\":\"checkBoxProps\",\"url\":\"interfaces/CheckboxSingleProps.html#checkBoxProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"CheckboxSingleProps\"},{\"kind\":1024,\"name\":\"name\",\"url\":\"interfaces/CheckboxSingleProps.html#name\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"CheckboxSingleProps\"},{\"kind\":1024,\"name\":\"control\",\"url\":\"interfaces/CheckboxSingleProps.html#control\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"CheckboxSingleProps\"},{\"kind\":1024,\"name\":\"label\",\"url\":\"interfaces/CheckboxSingleProps.html#label\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"CheckboxSingleProps\"},{\"kind\":1024,\"name\":\"labelProps\",\"url\":\"interfaces/CheckboxSingleProps.html#labelProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"CheckboxSingleProps\"},{\"kind\":1024,\"name\":\"helperText\",\"url\":\"interfaces/CheckboxSingleProps.html#helperText\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"CheckboxSingleProps\"},{\"kind\":1024,\"name\":\"helperTextProps\",\"url\":\"interfaces/CheckboxSingleProps.html#helperTextProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"CheckboxSingleProps\"},{\"kind\":1024,\"name\":\"errorMessageProps\",\"url\":\"interfaces/CheckboxSingleProps.html#errorMessageProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"CheckboxSingleProps\"},{\"kind\":256,\"name\":\"ChakraFormControlProps\",\"url\":\"interfaces/ChakraFormControlProps.html\",\"classes\":\"tsd-kind-interface\"},{\"kind\":256,\"name\":\"BaseReactHookFormProps\",\"url\":\"interfaces/BaseReactHookFormProps.html\",\"classes\":\"tsd-kind-interface\"},{\"kind\":1024,\"name\":\"name\",\"url\":\"interfaces/BaseReactHookFormProps.html#name\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"BaseReactHookFormProps\"},{\"kind\":1024,\"name\":\"control\",\"url\":\"interfaces/BaseReactHookFormProps.html#control\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"BaseReactHookFormProps\"},{\"kind\":1024,\"name\":\"label\",\"url\":\"interfaces/BaseReactHookFormProps.html#label\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"BaseReactHookFormProps\"},{\"kind\":1024,\"name\":\"labelProps\",\"url\":\"interfaces/BaseReactHookFormProps.html#labelProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"BaseReactHookFormProps\"},{\"kind\":1024,\"name\":\"helperText\",\"url\":\"interfaces/BaseReactHookFormProps.html#helperText\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"BaseReactHookFormProps\"},{\"kind\":1024,\"name\":\"helperTextProps\",\"url\":\"interfaces/BaseReactHookFormProps.html#helperTextProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"BaseReactHookFormProps\"},{\"kind\":1024,\"name\":\"errorMessageProps\",\"url\":\"interfaces/BaseReactHookFormProps.html#errorMessageProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"BaseReactHookFormProps\"},{\"kind\":256,\"name\":\"BaseProps\",\"url\":\"interfaces/BaseProps.html\",\"classes\":\"tsd-kind-interface\"},{\"kind\":1024,\"name\":\"name\",\"url\":\"interfaces/BaseProps.html#name\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"BaseProps\"},{\"kind\":1024,\"name\":\"control\",\"url\":\"interfaces/BaseProps.html#control\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"BaseProps\"},{\"kind\":1024,\"name\":\"label\",\"url\":\"interfaces/BaseProps.html#label\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"BaseProps\"},{\"kind\":1024,\"name\":\"labelProps\",\"url\":\"interfaces/BaseProps.html#labelProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"BaseProps\"},{\"kind\":1024,\"name\":\"helperText\",\"url\":\"interfaces/BaseProps.html#helperText\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"BaseProps\"},{\"kind\":1024,\"name\":\"helperTextProps\",\"url\":\"interfaces/BaseProps.html#helperTextProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"BaseProps\"},{\"kind\":1024,\"name\":\"errorMessageProps\",\"url\":\"interfaces/BaseProps.html#errorMessageProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"BaseProps\"},{\"kind\":256,\"name\":\"InputControlProps\",\"url\":\"interfaces/InputControlProps.html\",\"classes\":\"tsd-kind-interface\"},{\"kind\":1024,\"name\":\"name\",\"url\":\"interfaces/InputControlProps.html#name\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"InputControlProps\"},{\"kind\":1024,\"name\":\"control\",\"url\":\"interfaces/InputControlProps.html#control\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"InputControlProps\"},{\"kind\":1024,\"name\":\"label\",\"url\":\"interfaces/InputControlProps.html#label\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"InputControlProps\"},{\"kind\":1024,\"name\":\"labelProps\",\"url\":\"interfaces/InputControlProps.html#labelProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"InputControlProps\"},{\"kind\":1024,\"name\":\"helperText\",\"url\":\"interfaces/InputControlProps.html#helperText\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"InputControlProps\"},{\"kind\":1024,\"name\":\"helperTextProps\",\"url\":\"interfaces/InputControlProps.html#helperTextProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"InputControlProps\"},{\"kind\":1024,\"name\":\"errorMessageProps\",\"url\":\"interfaces/InputControlProps.html#errorMessageProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"InputControlProps\"},{\"kind\":256,\"name\":\"NumberInputControlProps\",\"url\":\"interfaces/NumberInputControlProps.html\",\"classes\":\"tsd-kind-interface\"},{\"kind\":1024,\"name\":\"numberInputProps\",\"url\":\"interfaces/NumberInputControlProps.html#numberInputProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"NumberInputControlProps\"},{\"kind\":1024,\"name\":\"showStepper\",\"url\":\"interfaces/NumberInputControlProps.html#showStepper\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"NumberInputControlProps\"},{\"kind\":1024,\"name\":\"children\",\"url\":\"interfaces/NumberInputControlProps.html#children\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"NumberInputControlProps\"},{\"kind\":1024,\"name\":\"leftAddon\",\"url\":\"interfaces/NumberInputControlProps.html#leftAddon\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"NumberInputControlProps\"},{\"kind\":1024,\"name\":\"rightAddon\",\"url\":\"interfaces/NumberInputControlProps.html#rightAddon\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"NumberInputControlProps\"},{\"kind\":1024,\"name\":\"name\",\"url\":\"interfaces/NumberInputControlProps.html#name\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"NumberInputControlProps\"},{\"kind\":1024,\"name\":\"control\",\"url\":\"interfaces/NumberInputControlProps.html#control\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"NumberInputControlProps\"},{\"kind\":1024,\"name\":\"label\",\"url\":\"interfaces/NumberInputControlProps.html#label\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"NumberInputControlProps\"},{\"kind\":1024,\"name\":\"labelProps\",\"url\":\"interfaces/NumberInputControlProps.html#labelProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"NumberInputControlProps\"},{\"kind\":1024,\"name\":\"helperText\",\"url\":\"interfaces/NumberInputControlProps.html#helperText\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"NumberInputControlProps\"},{\"kind\":1024,\"name\":\"helperTextProps\",\"url\":\"interfaces/NumberInputControlProps.html#helperTextProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"NumberInputControlProps\"},{\"kind\":1024,\"name\":\"errorMessageProps\",\"url\":\"interfaces/NumberInputControlProps.html#errorMessageProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"NumberInputControlProps\"},{\"kind\":256,\"name\":\"PinInputControlProps\",\"url\":\"interfaces/PinInputControlProps.html\",\"classes\":\"tsd-kind-interface\"},{\"kind\":1024,\"name\":\"pinAmount\",\"url\":\"interfaces/PinInputControlProps.html#pinAmount\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"PinInputControlProps\"},{\"kind\":1024,\"name\":\"stackProps\",\"url\":\"interfaces/PinInputControlProps.html#stackProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"PinInputControlProps\"},{\"kind\":1024,\"name\":\"pinInputProps\",\"url\":\"interfaces/PinInputControlProps.html#pinInputProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"PinInputControlProps\"},{\"kind\":1024,\"name\":\"name\",\"url\":\"interfaces/PinInputControlProps.html#name\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"PinInputControlProps\"},{\"kind\":1024,\"name\":\"control\",\"url\":\"interfaces/PinInputControlProps.html#control\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"PinInputControlProps\"},{\"kind\":1024,\"name\":\"label\",\"url\":\"interfaces/PinInputControlProps.html#label\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"PinInputControlProps\"},{\"kind\":1024,\"name\":\"labelProps\",\"url\":\"interfaces/PinInputControlProps.html#labelProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"PinInputControlProps\"},{\"kind\":1024,\"name\":\"helperText\",\"url\":\"interfaces/PinInputControlProps.html#helperText\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"PinInputControlProps\"},{\"kind\":1024,\"name\":\"helperTextProps\",\"url\":\"interfaces/PinInputControlProps.html#helperTextProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"PinInputControlProps\"},{\"kind\":1024,\"name\":\"errorMessageProps\",\"url\":\"interfaces/PinInputControlProps.html#errorMessageProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"PinInputControlProps\"},{\"kind\":256,\"name\":\"RadioGroupControlProps\",\"url\":\"interfaces/RadioGroupControlProps.html\",\"classes\":\"tsd-kind-interface\"},{\"kind\":1024,\"name\":\"radioGroupProps\",\"url\":\"interfaces/RadioGroupControlProps.html#radioGroupProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"RadioGroupControlProps\"},{\"kind\":1024,\"name\":\"stackProps\",\"url\":\"interfaces/RadioGroupControlProps.html#stackProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"RadioGroupControlProps\"},{\"kind\":1024,\"name\":\"children\",\"url\":\"interfaces/RadioGroupControlProps.html#children\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"RadioGroupControlProps\"},{\"kind\":1024,\"name\":\"name\",\"url\":\"interfaces/RadioGroupControlProps.html#name\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"RadioGroupControlProps\"},{\"kind\":1024,\"name\":\"control\",\"url\":\"interfaces/RadioGroupControlProps.html#control\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"RadioGroupControlProps\"},{\"kind\":1024,\"name\":\"label\",\"url\":\"interfaces/RadioGroupControlProps.html#label\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"RadioGroupControlProps\"},{\"kind\":1024,\"name\":\"labelProps\",\"url\":\"interfaces/RadioGroupControlProps.html#labelProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"RadioGroupControlProps\"},{\"kind\":1024,\"name\":\"helperText\",\"url\":\"interfaces/RadioGroupControlProps.html#helperText\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"RadioGroupControlProps\"},{\"kind\":1024,\"name\":\"helperTextProps\",\"url\":\"interfaces/RadioGroupControlProps.html#helperTextProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"RadioGroupControlProps\"},{\"kind\":1024,\"name\":\"errorMessageProps\",\"url\":\"interfaces/RadioGroupControlProps.html#errorMessageProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"RadioGroupControlProps\"},{\"kind\":256,\"name\":\"ResetButtonProps\",\"url\":\"interfaces/ResetButtonProps.html\",\"classes\":\"tsd-kind-interface\"},{\"kind\":1024,\"name\":\"control\",\"url\":\"interfaces/ResetButtonProps.html#control\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"ResetButtonProps\"},{\"kind\":1024,\"name\":\"reset\",\"url\":\"interfaces/ResetButtonProps.html#reset\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"ResetButtonProps\"},{\"kind\":256,\"name\":\"SelectControlProps\",\"url\":\"interfaces/SelectControlProps.html\",\"classes\":\"tsd-kind-interface\"},{\"kind\":1024,\"name\":\"selectProps\",\"url\":\"interfaces/SelectControlProps.html#selectProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"SelectControlProps\"},{\"kind\":1024,\"name\":\"children\",\"url\":\"interfaces/SelectControlProps.html#children\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"SelectControlProps\"},{\"kind\":1024,\"name\":\"name\",\"url\":\"interfaces/SelectControlProps.html#name\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SelectControlProps\"},{\"kind\":1024,\"name\":\"control\",\"url\":\"interfaces/SelectControlProps.html#control\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SelectControlProps\"},{\"kind\":1024,\"name\":\"label\",\"url\":\"interfaces/SelectControlProps.html#label\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SelectControlProps\"},{\"kind\":1024,\"name\":\"labelProps\",\"url\":\"interfaces/SelectControlProps.html#labelProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SelectControlProps\"},{\"kind\":1024,\"name\":\"helperText\",\"url\":\"interfaces/SelectControlProps.html#helperText\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SelectControlProps\"},{\"kind\":1024,\"name\":\"helperTextProps\",\"url\":\"interfaces/SelectControlProps.html#helperTextProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SelectControlProps\"},{\"kind\":1024,\"name\":\"errorMessageProps\",\"url\":\"interfaces/SelectControlProps.html#errorMessageProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SelectControlProps\"},{\"kind\":256,\"name\":\"SliderControlProps\",\"url\":\"interfaces/SliderControlProps.html\",\"classes\":\"tsd-kind-interface\"},{\"kind\":1024,\"name\":\"sliderProps\",\"url\":\"interfaces/SliderControlProps.html#sliderProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"SliderControlProps\"},{\"kind\":1024,\"name\":\"sliderTrackProps\",\"url\":\"interfaces/SliderControlProps.html#sliderTrackProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"SliderControlProps\"},{\"kind\":1024,\"name\":\"sliderThumbProps\",\"url\":\"interfaces/SliderControlProps.html#sliderThumbProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"SliderControlProps\"},{\"kind\":1024,\"name\":\"name\",\"url\":\"interfaces/SliderControlProps.html#name\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SliderControlProps\"},{\"kind\":1024,\"name\":\"control\",\"url\":\"interfaces/SliderControlProps.html#control\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SliderControlProps\"},{\"kind\":1024,\"name\":\"label\",\"url\":\"interfaces/SliderControlProps.html#label\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SliderControlProps\"},{\"kind\":1024,\"name\":\"labelProps\",\"url\":\"interfaces/SliderControlProps.html#labelProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SliderControlProps\"},{\"kind\":1024,\"name\":\"helperText\",\"url\":\"interfaces/SliderControlProps.html#helperText\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SliderControlProps\"},{\"kind\":1024,\"name\":\"helperTextProps\",\"url\":\"interfaces/SliderControlProps.html#helperTextProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SliderControlProps\"},{\"kind\":1024,\"name\":\"errorMessageProps\",\"url\":\"interfaces/SliderControlProps.html#errorMessageProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SliderControlProps\"},{\"kind\":256,\"name\":\"SubmitButtonProps\",\"url\":\"interfaces/SubmitButtonProps.html\",\"classes\":\"tsd-kind-interface\"},{\"kind\":1024,\"name\":\"control\",\"url\":\"interfaces/SubmitButtonProps.html#control\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"SubmitButtonProps\"},{\"kind\":256,\"name\":\"SwitchControlProps\",\"url\":\"interfaces/SwitchControlProps.html\",\"classes\":\"tsd-kind-interface\"},{\"kind\":1024,\"name\":\"switchProps\",\"url\":\"interfaces/SwitchControlProps.html#switchProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"SwitchControlProps\"},{\"kind\":1024,\"name\":\"name\",\"url\":\"interfaces/SwitchControlProps.html#name\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SwitchControlProps\"},{\"kind\":1024,\"name\":\"control\",\"url\":\"interfaces/SwitchControlProps.html#control\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SwitchControlProps\"},{\"kind\":1024,\"name\":\"label\",\"url\":\"interfaces/SwitchControlProps.html#label\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SwitchControlProps\"},{\"kind\":1024,\"name\":\"labelProps\",\"url\":\"interfaces/SwitchControlProps.html#labelProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SwitchControlProps\"},{\"kind\":1024,\"name\":\"helperText\",\"url\":\"interfaces/SwitchControlProps.html#helperText\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SwitchControlProps\"},{\"kind\":1024,\"name\":\"helperTextProps\",\"url\":\"interfaces/SwitchControlProps.html#helperTextProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SwitchControlProps\"},{\"kind\":1024,\"name\":\"errorMessageProps\",\"url\":\"interfaces/SwitchControlProps.html#errorMessageProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"SwitchControlProps\"},{\"kind\":256,\"name\":\"TextareaControlProps\",\"url\":\"interfaces/TextareaControlProps.html\",\"classes\":\"tsd-kind-interface\"},{\"kind\":1024,\"name\":\"textareaProps\",\"url\":\"interfaces/TextareaControlProps.html#textareaProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"TextareaControlProps\"},{\"kind\":1024,\"name\":\"name\",\"url\":\"interfaces/TextareaControlProps.html#name\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"TextareaControlProps\"},{\"kind\":1024,\"name\":\"control\",\"url\":\"interfaces/TextareaControlProps.html#control\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"TextareaControlProps\"},{\"kind\":1024,\"name\":\"label\",\"url\":\"interfaces/TextareaControlProps.html#label\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"TextareaControlProps\"},{\"kind\":1024,\"name\":\"labelProps\",\"url\":\"interfaces/TextareaControlProps.html#labelProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"TextareaControlProps\"},{\"kind\":1024,\"name\":\"helperText\",\"url\":\"interfaces/TextareaControlProps.html#helperText\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"TextareaControlProps\"},{\"kind\":1024,\"name\":\"helperTextProps\",\"url\":\"interfaces/TextareaControlProps.html#helperTextProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"TextareaControlProps\"},{\"kind\":1024,\"name\":\"errorMessageProps\",\"url\":\"interfaces/TextareaControlProps.html#errorMessageProps\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited\",\"parent\":\"TextareaControlProps\"}],\"index\":{\"version\":\"2.3.9\",\"fields\":[\"name\",\"comment\"],\"fieldVectors\":[[\"name/0\",[0,44.466]],[\"comment/0\",[]],[\"name/1\",[1,35.993]],[\"comment/1\",[]],[\"name/2\",[2,33.48]],[\"comment/2\",[]],[\"name/3\",[3,22.493]],[\"comment/3\",[]],[\"name/4\",[4,21.112]],[\"comment/4\",[]],[\"name/5\",[5,22.493]],[\"comment/5\",[]],[\"name/6\",[6,23.263]],[\"comment/6\",[]],[\"name/7\",[7,23.263]],[\"comment/7\",[]],[\"name/8\",[8,23.263]],[\"comment/8\",[]],[\"name/9\",[9,23.263]],[\"comment/9\",[]],[\"name/10\",[10,44.466]],[\"comment/10\",[]],[\"name/11\",[3,22.493]],[\"comment/11\",[]],[\"name/12\",[4,21.112]],[\"comment/12\",[]],[\"name/13\",[5,22.493]],[\"comment/13\",[]],[\"name/14\",[11,44.466]],[\"comment/14\",[]],[\"name/15\",[12,44.466]],[\"comment/15\",[]],[\"name/16\",[3,22.493]],[\"comment/16\",[]],[\"name/17\",[4,21.112]],[\"comment/17\",[]],[\"name/18\",[5,22.493]],[\"comment/18\",[]],[\"name/19\",[6,23.263]],[\"comment/19\",[]],[\"name/20\",[7,23.263]],[\"comment/20\",[]],[\"name/21\",[8,23.263]],[\"comment/21\",[]],[\"name/22\",[9,23.263]],[\"comment/22\",[]],[\"name/23\",[13,44.466]],[\"comment/23\",[]],[\"name/24\",[14,44.466]],[\"comment/24\",[]],[\"name/25\",[3,22.493]],[\"comment/25\",[]],[\"name/26\",[4,21.112]],[\"comment/26\",[]],[\"name/27\",[5,22.493]],[\"comment/27\",[]],[\"name/28\",[6,23.263]],[\"comment/28\",[]],[\"name/29\",[7,23.263]],[\"comment/29\",[]],[\"name/30\",[8,23.263]],[\"comment/30\",[]],[\"name/31\",[9,23.263]],[\"comment/31\",[]],[\"name/32\",[15,44.466]],[\"comment/32\",[]],[\"name/33\",[3,22.493]],[\"comment/33\",[]],[\"name/34\",[4,21.112]],[\"comment/34\",[]],[\"name/35\",[5,22.493]],[\"comment/35\",[]],[\"name/36\",[6,23.263]],[\"comment/36\",[]],[\"name/37\",[7,23.263]],[\"comment/37\",[]],[\"name/38\",[8,23.263]],[\"comment/38\",[]],[\"name/39\",[9,23.263]],[\"comment/39\",[]],[\"name/40\",[16,44.466]],[\"comment/40\",[]],[\"name/41\",[3,22.493]],[\"comment/41\",[]],[\"name/42\",[4,21.112]],[\"comment/42\",[]],[\"name/43\",[5,22.493]],[\"comment/43\",[]],[\"name/44\",[6,23.263]],[\"comment/44\",[]],[\"name/45\",[7,23.263]],[\"comment/45\",[]],[\"name/46\",[8,23.263]],[\"comment/46\",[]],[\"name/47\",[9,23.263]],[\"comment/47\",[]],[\"name/48\",[17,44.466]],[\"comment/48\",[]],[\"name/49\",[18,44.466]],[\"comment/49\",[]],[\"name/50\",[19,44.466]],[\"comment/50\",[]],[\"name/51\",[2,33.48]],[\"comment/51\",[]],[\"name/52\",[20,44.466]],[\"comment/52\",[]],[\"name/53\",[21,44.466]],[\"comment/53\",[]],[\"name/54\",[3,22.493]],[\"comment/54\",[]],[\"name/55\",[4,21.112]],[\"comment/55\",[]],[\"name/56\",[5,22.493]],[\"comment/56\",[]],[\"name/57\",[6,23.263]],[\"comment/57\",[]],[\"name/58\",[7,23.263]],[\"comment/58\",[]],[\"name/59\",[8,23.263]],[\"comment/59\",[]],[\"name/60\",[9,23.263]],[\"comment/60\",[]],[\"name/61\",[22,44.466]],[\"comment/61\",[]],[\"name/62\",[23,44.466]],[\"comment/62\",[]],[\"name/63\",[1,35.993]],[\"comment/63\",[]],[\"name/64\",[24,44.466]],[\"comment/64\",[]],[\"name/65\",[3,22.493]],[\"comment/65\",[]],[\"name/66\",[4,21.112]],[\"comment/66\",[]],[\"name/67\",[5,22.493]],[\"comment/67\",[]],[\"name/68\",[6,23.263]],[\"comment/68\",[]],[\"name/69\",[7,23.263]],[\"comment/69\",[]],[\"name/70\",[8,23.263]],[\"comment/70\",[]],[\"name/71\",[9,23.263]],[\"comment/71\",[]],[\"name/72\",[25,44.466]],[\"comment/72\",[]],[\"name/73\",[26,44.466]],[\"comment/73\",[]],[\"name/74\",[1,35.993]],[\"comment/74\",[]],[\"name/75\",[2,33.48]],[\"comment/75\",[]],[\"name/76\",[3,22.493]],[\"comment/76\",[]],[\"name/77\",[4,21.112]],[\"comment/77\",[]],[\"name/78\",[5,22.493]],[\"comment/78\",[]],[\"name/79\",[6,23.263]],[\"comment/79\",[]],[\"name/80\",[7,23.263]],[\"comment/80\",[]],[\"name/81\",[8,23.263]],[\"comment/81\",[]],[\"name/82\",[9,23.263]],[\"comment/82\",[]],[\"name/83\",[27,44.466]],[\"comment/83\",[]],[\"name/84\",[4,21.112]],[\"comment/84\",[]],[\"name/85\",[28,44.466]],[\"comment/85\",[]],[\"name/86\",[29,44.466]],[\"comment/86\",[]],[\"name/87\",[30,44.466]],[\"comment/87\",[]],[\"name/88\",[2,33.48]],[\"comment/88\",[]],[\"name/89\",[3,22.493]],[\"comment/89\",[]],[\"name/90\",[4,21.112]],[\"comment/90\",[]],[\"name/91\",[5,22.493]],[\"comment/91\",[]],[\"name/92\",[6,23.263]],[\"comment/92\",[]],[\"name/93\",[7,23.263]],[\"comment/93\",[]],[\"name/94\",[8,23.263]],[\"comment/94\",[]],[\"name/95\",[9,23.263]],[\"comment/95\",[]],[\"name/96\",[31,44.466]],[\"comment/96\",[]],[\"name/97\",[32,44.466]],[\"comment/97\",[]],[\"name/98\",[33,44.466]],[\"comment/98\",[]],[\"name/99\",[34,44.466]],[\"comment/99\",[]],[\"name/100\",[3,22.493]],[\"comment/100\",[]],[\"name/101\",[4,21.112]],[\"comment/101\",[]],[\"name/102\",[5,22.493]],[\"comment/102\",[]],[\"name/103\",[6,23.263]],[\"comment/103\",[]],[\"name/104\",[7,23.263]],[\"comment/104\",[]],[\"name/105\",[8,23.263]],[\"comment/105\",[]],[\"name/106\",[9,23.263]],[\"comment/106\",[]],[\"name/107\",[35,44.466]],[\"comment/107\",[]],[\"name/108\",[4,21.112]],[\"comment/108\",[]],[\"name/109\",[36,44.466]],[\"comment/109\",[]],[\"name/110\",[37,44.466]],[\"comment/110\",[]],[\"name/111\",[3,22.493]],[\"comment/111\",[]],[\"name/112\",[4,21.112]],[\"comment/112\",[]],[\"name/113\",[5,22.493]],[\"comment/113\",[]],[\"name/114\",[6,23.263]],[\"comment/114\",[]],[\"name/115\",[7,23.263]],[\"comment/115\",[]],[\"name/116\",[8,23.263]],[\"comment/116\",[]],[\"name/117\",[9,23.263]],[\"comment/117\",[]],[\"name/118\",[38,44.466]],[\"comment/118\",[]],[\"name/119\",[39,44.466]],[\"comment/119\",[]],[\"name/120\",[3,22.493]],[\"comment/120\",[]],[\"name/121\",[4,21.112]],[\"comment/121\",[]],[\"name/122\",[5,22.493]],[\"comment/122\",[]],[\"name/123\",[6,23.263]],[\"comment/123\",[]],[\"name/124\",[7,23.263]],[\"comment/124\",[]],[\"name/125\",[8,23.263]],[\"comment/125\",[]],[\"name/126\",[9,23.263]],[\"comment/126\",[]]],\"invertedIndex\":[[\"baseprops\",{\"_index\":15,\"name\":{\"32\":{}},\"comment\":{}}],[\"basereacthookformprops\",{\"_index\":14,\"name\":{\"24\":{}},\"comment\":{}}],[\"chakraformcontrolprops\",{\"_index\":13,\"name\":{\"23\":{}},\"comment\":{}}],[\"checkboxcontainerprops\",{\"_index\":0,\"name\":{\"0\":{}},\"comment\":{}}],[\"checkboxcontrolprops\",{\"_index\":10,\"name\":{\"10\":{}},\"comment\":{}}],[\"checkboxprops\",{\"_index\":12,\"name\":{\"15\":{}},\"comment\":{}}],[\"checkboxsingleprops\",{\"_index\":11,\"name\":{\"14\":{}},\"comment\":{}}],[\"children\",{\"_index\":2,\"name\":{\"2\":{},\"51\":{},\"75\":{},\"88\":{}},\"comment\":{}}],[\"control\",{\"_index\":4,\"name\":{\"4\":{},\"12\":{},\"17\":{},\"26\":{},\"34\":{},\"42\":{},\"55\":{},\"66\":{},\"77\":{},\"84\":{},\"90\":{},\"101\":{},\"108\":{},\"112\":{},\"121\":{}},\"comment\":{}}],[\"errormessageprops\",{\"_index\":9,\"name\":{\"9\":{},\"22\":{},\"31\":{},\"39\":{},\"47\":{},\"60\":{},\"71\":{},\"82\":{},\"95\":{},\"106\":{},\"117\":{},\"126\":{}},\"comment\":{}}],[\"helpertext\",{\"_index\":7,\"name\":{\"7\":{},\"20\":{},\"29\":{},\"37\":{},\"45\":{},\"58\":{},\"69\":{},\"80\":{},\"93\":{},\"104\":{},\"115\":{},\"124\":{}},\"comment\":{}}],[\"helpertextprops\",{\"_index\":8,\"name\":{\"8\":{},\"21\":{},\"30\":{},\"38\":{},\"46\":{},\"59\":{},\"70\":{},\"81\":{},\"94\":{},\"105\":{},\"116\":{},\"125\":{}},\"comment\":{}}],[\"inputcontrolprops\",{\"_index\":16,\"name\":{\"40\":{}},\"comment\":{}}],[\"label\",{\"_index\":5,\"name\":{\"5\":{},\"13\":{},\"18\":{},\"27\":{},\"35\":{},\"43\":{},\"56\":{},\"67\":{},\"78\":{},\"91\":{},\"102\":{},\"113\":{},\"122\":{}},\"comment\":{}}],[\"labelprops\",{\"_index\":6,\"name\":{\"6\":{},\"19\":{},\"28\":{},\"36\":{},\"44\":{},\"57\":{},\"68\":{},\"79\":{},\"92\":{},\"103\":{},\"114\":{},\"123\":{}},\"comment\":{}}],[\"leftaddon\",{\"_index\":20,\"name\":{\"52\":{}},\"comment\":{}}],[\"name\",{\"_index\":3,\"name\":{\"3\":{},\"11\":{},\"16\":{},\"25\":{},\"33\":{},\"41\":{},\"54\":{},\"65\":{},\"76\":{},\"89\":{},\"100\":{},\"111\":{},\"120\":{}},\"comment\":{}}],[\"numberinputcontrolprops\",{\"_index\":17,\"name\":{\"48\":{}},\"comment\":{}}],[\"numberinputprops\",{\"_index\":18,\"name\":{\"49\":{}},\"comment\":{}}],[\"pinamount\",{\"_index\":23,\"name\":{\"62\":{}},\"comment\":{}}],[\"pininputcontrolprops\",{\"_index\":22,\"name\":{\"61\":{}},\"comment\":{}}],[\"pininputprops\",{\"_index\":24,\"name\":{\"64\":{}},\"comment\":{}}],[\"radiogroupcontrolprops\",{\"_index\":25,\"name\":{\"72\":{}},\"comment\":{}}],[\"radiogroupprops\",{\"_index\":26,\"name\":{\"73\":{}},\"comment\":{}}],[\"reset\",{\"_index\":28,\"name\":{\"85\":{}},\"comment\":{}}],[\"resetbuttonprops\",{\"_index\":27,\"name\":{\"83\":{}},\"comment\":{}}],[\"rightaddon\",{\"_index\":21,\"name\":{\"53\":{}},\"comment\":{}}],[\"selectcontrolprops\",{\"_index\":29,\"name\":{\"86\":{}},\"comment\":{}}],[\"selectprops\",{\"_index\":30,\"name\":{\"87\":{}},\"comment\":{}}],[\"showstepper\",{\"_index\":19,\"name\":{\"50\":{}},\"comment\":{}}],[\"slidercontrolprops\",{\"_index\":31,\"name\":{\"96\":{}},\"comment\":{}}],[\"sliderprops\",{\"_index\":32,\"name\":{\"97\":{}},\"comment\":{}}],[\"sliderthumbprops\",{\"_index\":34,\"name\":{\"99\":{}},\"comment\":{}}],[\"slidertrackprops\",{\"_index\":33,\"name\":{\"98\":{}},\"comment\":{}}],[\"stackprops\",{\"_index\":1,\"name\":{\"1\":{},\"63\":{},\"74\":{}},\"comment\":{}}],[\"submitbuttonprops\",{\"_index\":35,\"name\":{\"107\":{}},\"comment\":{}}],[\"switchcontrolprops\",{\"_index\":36,\"name\":{\"109\":{}},\"comment\":{}}],[\"switchprops\",{\"_index\":37,\"name\":{\"110\":{}},\"comment\":{}}],[\"textareacontrolprops\",{\"_index\":38,\"name\":{\"118\":{}},\"comment\":{}}],[\"textareaprops\",{\"_index\":39,\"name\":{\"119\":{}},\"comment\":{}}]],\"pipeline\":[]}}"); \ No newline at end of file diff --git a/docs/assets/style.css b/docs/assets/style.css new file mode 100644 index 0000000..496e66f --- /dev/null +++ b/docs/assets/style.css @@ -0,0 +1,1279 @@ +:root { + /* Light */ + --light-color-background: #f2f4f8; + --light-color-background-secondary: #eff0f1; + --light-color-warning-text: #222; + --light-color-background-warning: #e6e600; + --light-color-icon-background: var(--light-color-background); + --light-color-accent: #c5c7c9; + --light-color-text: #222; + --light-color-text-aside: #707070; + --light-color-link: #4da6ff; + --light-color-ts: #db1373; + --light-color-ts-interface: #139d2c; + --light-color-ts-enum: #9c891a; + --light-color-ts-class: #2484e5; + --light-color-ts-function: #572be7; + --light-color-ts-namespace: #b111c9; + --light-color-ts-private: #707070; + --light-color-ts-variable: #4d68ff; + --light-external-icon: url("data:image/svg+xml;utf8,"); + --light-color-scheme: light; + + /* Dark */ + --dark-color-background: #2b2e33; + --dark-color-background-secondary: #1e2024; + --dark-color-background-warning: #bebe00; + --dark-color-warning-text: #222; + --dark-color-icon-background: var(--dark-color-background-secondary); + --dark-color-accent: #9096a2; + --dark-color-text: #f5f5f5; + --dark-color-text-aside: #dddddd; + --dark-color-link: #00aff4; + --dark-color-ts: #ff6492; + --dark-color-ts-interface: #6cff87; + --dark-color-ts-enum: #f4d93e; + --dark-color-ts-class: #61b0ff; + --dark-color-ts-function: #9772ff; + --dark-color-ts-namespace: #e14dff; + --dark-color-ts-private: #e2e2e2; + --dark-color-ts-variable: #4d68ff; + --dark-external-icon: url("data:image/svg+xml;utf8,"); + --dark-color-scheme: dark; +} + +@media (prefers-color-scheme: light) { + :root { + --color-background: var(--light-color-background); + --color-background-secondary: var(--light-color-background-secondary); + --color-background-warning: var(--light-color-background-warning); + --color-warning-text: var(--light-color-warning-text); + --color-icon-background: var(--light-color-icon-background); + --color-accent: var(--light-color-accent); + --color-text: var(--light-color-text); + --color-text-aside: var(--light-color-text-aside); + --color-link: var(--light-color-link); + --color-ts: var(--light-color-ts); + --color-ts-interface: var(--light-color-ts-interface); + --color-ts-enum: var(--light-color-ts-enum); + --color-ts-class: var(--light-color-ts-class); + --color-ts-function: var(--light-color-ts-function); + --color-ts-namespace: var(--light-color-ts-namespace); + --color-ts-private: var(--light-color-ts-private); + --color-ts-variable: var(--light-color-ts-variable); + --external-icon: var(--light-external-icon); + --color-scheme: var(--light-color-scheme); + } +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--dark-color-background); + --color-background-secondary: var(--dark-color-background-secondary); + --color-background-warning: var(--dark-color-background-warning); + --color-warning-text: var(--dark-color-warning-text); + --color-icon-background: var(--dark-color-icon-background); + --color-accent: var(--dark-color-accent); + --color-text: var(--dark-color-text); + --color-text-aside: var(--dark-color-text-aside); + --color-link: var(--dark-color-link); + --color-ts: var(--dark-color-ts); + --color-ts-interface: var(--dark-color-ts-interface); + --color-ts-enum: var(--dark-color-ts-enum); + --color-ts-class: var(--dark-color-ts-class); + --color-ts-function: var(--dark-color-ts-function); + --color-ts-namespace: var(--dark-color-ts-namespace); + --color-ts-private: var(--dark-color-ts-private); + --color-ts-variable: var(--dark-color-ts-variable); + --external-icon: var(--dark-external-icon); + --color-scheme: var(--dark-color-scheme); + } +} + +html { + color-scheme: var(--color-scheme); +} + +body { + margin: 0; +} + +:root[data-theme="light"] { + --color-background: var(--light-color-background); + --color-background-secondary: var(--light-color-background-secondary); + --color-background-warning: var(--light-color-background-warning); + --color-warning-text: var(--light-color-warning-text); + --color-icon-background: var(--light-color-icon-background); + --color-accent: var(--light-color-accent); + --color-text: var(--light-color-text); + --color-text-aside: var(--light-color-text-aside); + --color-link: var(--light-color-link); + --color-ts: var(--light-color-ts); + --color-ts-interface: var(--light-color-ts-interface); + --color-ts-enum: var(--light-color-ts-enum); + --color-ts-class: var(--light-color-ts-class); + --color-ts-function: var(--light-color-ts-function); + --color-ts-namespace: var(--light-color-ts-namespace); + --color-ts-private: var(--light-color-ts-private); + --color-ts-variable: var(--light-color-ts-variable); + --external-icon: var(--light-external-icon); + --color-scheme: var(--light-color-scheme); +} + +:root[data-theme="dark"] { + --color-background: var(--dark-color-background); + --color-background-secondary: var(--dark-color-background-secondary); + --color-background-warning: var(--dark-color-background-warning); + --color-warning-text: var(--dark-color-warning-text); + --color-icon-background: var(--dark-color-icon-background); + --color-accent: var(--dark-color-accent); + --color-text: var(--dark-color-text); + --color-text-aside: var(--dark-color-text-aside); + --color-link: var(--dark-color-link); + --color-ts: var(--dark-color-ts); + --color-ts-interface: var(--dark-color-ts-interface); + --color-ts-enum: var(--dark-color-ts-enum); + --color-ts-class: var(--dark-color-ts-class); + --color-ts-function: var(--dark-color-ts-function); + --color-ts-namespace: var(--dark-color-ts-namespace); + --color-ts-private: var(--dark-color-ts-private); + --color-ts-variable: var(--dark-color-ts-variable); + --external-icon: var(--dark-external-icon); + --color-scheme: var(--dark-color-scheme); +} + +.always-visible, +.always-visible .tsd-signatures { + display: inherit !important; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + line-height: 1.2; +} + +h1 { + font-size: 1.875rem; + margin: 0.67rem 0; +} + +h2 { + font-size: 1.5rem; + margin: 0.83rem 0; +} + +h3 { + font-size: 1.25rem; + margin: 1rem 0; +} + +h4 { + font-size: 1.05rem; + margin: 1.33rem 0; +} + +h5 { + font-size: 1rem; + margin: 1.5rem 0; +} + +h6 { + font-size: 0.875rem; + margin: 2.33rem 0; +} + +.uppercase { + text-transform: uppercase; +} + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +dl, +menu, +ol, +ul { + margin: 1em 0; +} + +dd { + margin: 0 0 0 40px; +} + +.container { + max-width: 1600px; + padding: 0 2rem; +} + +@media (min-width: 640px) { + .container { + padding: 0 4rem; + } +} +@media (min-width: 1200px) { + .container { + padding: 0 8rem; + } +} +@media (min-width: 1600px) { + .container { + padding: 0 12rem; + } +} + +/* Footer */ +.tsd-generator { + border-top: 1px solid var(--color-accent); + padding-top: 1rem; + padding-bottom: 1rem; + max-height: 3.5rem; +} + +.tsd-generator > p { + margin-top: 0; + margin-bottom: 0; + padding: 0 1rem; +} + +.container-main { + display: flex; + justify-content: space-between; + position: relative; + margin: 0 auto; +} + +.col-4, +.col-8 { + box-sizing: border-box; + float: left; + padding: 2rem 1rem; +} + +.col-4 { + flex: 0 0 25%; +} +.col-8 { + flex: 1 0; + flex-wrap: wrap; + padding-left: 0; +} + +@keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes fade-out { + from { + opacity: 1; + visibility: visible; + } + to { + opacity: 0; + } +} +@keyframes fade-in-delayed { + 0% { + opacity: 0; + } + 33% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fade-out-delayed { + 0% { + opacity: 1; + visibility: visible; + } + 66% { + opacity: 0; + } + 100% { + opacity: 0; + } +} +@keyframes shift-to-left { + from { + transform: translate(0, 0); + } + to { + transform: translate(-25%, 0); + } +} +@keyframes unshift-to-left { + from { + transform: translate(-25%, 0); + } + to { + transform: translate(0, 0); + } +} +@keyframes pop-in-from-right { + from { + transform: translate(100%, 0); + } + to { + transform: translate(0, 0); + } +} +@keyframes pop-out-to-right { + from { + transform: translate(0, 0); + visibility: visible; + } + to { + transform: translate(100%, 0); + } +} +body { + background: var(--color-background); + font-family: "Segoe UI", sans-serif; + font-size: 16px; + color: var(--color-text); +} + +a { + color: var(--color-link); + text-decoration: none; +} +a:hover { + text-decoration: underline; +} +a.external[target="_blank"] { + background-image: var(--external-icon); + background-position: top 3px right; + background-repeat: no-repeat; + padding-right: 13px; +} + +code, +pre { + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + padding: 0.2em; + margin: 0; + font-size: 0.875rem; + border-radius: 0.8em; +} + +pre { + padding: 10px; + border: 0.1em solid var(--color-accent); +} +pre code { + padding: 0; + font-size: 100%; +} + +blockquote { + margin: 1em 0; + padding-left: 1em; + border-left: 4px solid gray; +} + +.tsd-typography { + line-height: 1.333em; +} +.tsd-typography ul { + list-style: square; + padding: 0 0 0 20px; + margin: 0; +} +.tsd-typography h4, +.tsd-typography .tsd-index-panel h3, +.tsd-index-panel .tsd-typography h3, +.tsd-typography h5, +.tsd-typography h6 { + font-size: 1em; + margin: 0; +} +.tsd-typography h5, +.tsd-typography h6 { + font-weight: normal; +} +.tsd-typography p, +.tsd-typography ul, +.tsd-typography ol { + margin: 1em 0; +} + +@media (max-width: 1024px) { + html .col-content { + float: none; + max-width: 100%; + width: 100%; + padding-top: 3rem; + } + html .col-menu { + position: fixed !important; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + z-index: 1024; + top: 0 !important; + bottom: 0 !important; + left: auto !important; + right: 0 !important; + padding: 1.5rem 1.5rem 0 0; + max-width: 25rem; + visibility: hidden; + background-color: var(--color-background); + transform: translate(100%, 0); + } + html .col-menu > *:last-child { + padding-bottom: 20px; + } + html .overlay { + content: ""; + display: block; + position: fixed; + z-index: 1023; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.75); + visibility: hidden; + } + + .to-has-menu .overlay { + animation: fade-in 0.4s; + } + + .to-has-menu :is(header, footer, .col-content) { + animation: shift-to-left 0.4s; + } + + .to-has-menu .col-menu { + animation: pop-in-from-right 0.4s; + } + + .from-has-menu .overlay { + animation: fade-out 0.4s; + } + + .from-has-menu :is(header, footer, .col-content) { + animation: unshift-to-left 0.4s; + } + + .from-has-menu .col-menu { + animation: pop-out-to-right 0.4s; + } + + .has-menu body { + overflow: hidden; + } + .has-menu .overlay { + visibility: visible; + } + .has-menu :is(header, footer, .col-content) { + transform: translate(-25%, 0); + } + .has-menu .col-menu { + visibility: visible; + transform: translate(0, 0); + display: flex; + flex-direction: column; + gap: 1.5rem; + max-height: 100vh; + padding: 1rem 2rem; + } + .has-menu .tsd-navigation { + max-height: 100%; + } +} + +.tsd-breadcrumb { + margin: 0; + padding: 0; + color: var(--color-text-aside); +} +.tsd-breadcrumb a { + color: var(--color-text-aside); + text-decoration: none; +} +.tsd-breadcrumb a:hover { + text-decoration: underline; +} +.tsd-breadcrumb li { + display: inline; +} +.tsd-breadcrumb li:after { + content: " / "; +} + +.tsd-comment-tags { + display: flex; + flex-direction: column; +} +dl.tsd-comment-tag-group { + display: flex; + align-items: center; + overflow: hidden; + margin: 0.5em 0; +} +dl.tsd-comment-tag-group dt { + display: flex; + margin-right: 0.5em; + font-size: 0.875em; + font-weight: normal; +} +dl.tsd-comment-tag-group dd { + margin: 0; +} +code.tsd-tag { + padding: 0.25em 0.4em; + border: 0.1em solid var(--color-accent); + margin-right: 0.25em; + font-size: 70%; +} +h1 code.tsd-tag:first-of-type { + margin-left: 0.25em; +} + +dl.tsd-comment-tag-group dd:before, +dl.tsd-comment-tag-group dd:after { + content: " "; +} +dl.tsd-comment-tag-group dd pre, +dl.tsd-comment-tag-group dd:after { + clear: both; +} +dl.tsd-comment-tag-group p { + margin: 0; +} + +.tsd-panel.tsd-comment .lead { + font-size: 1.1em; + line-height: 1.333em; + margin-bottom: 2em; +} +.tsd-panel.tsd-comment .lead:last-child { + margin-bottom: 0; +} + +.tsd-filter-visibility h4 { + font-size: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.5rem; + margin: 0; +} +.tsd-filter-item:not(:last-child) { + margin-bottom: 0.5rem; +} +.tsd-filter-input { + display: flex; + width: fit-content; + width: -moz-fit-content; + align-items: center; + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + cursor: pointer; +} +.tsd-filter-input input[type="checkbox"] { + cursor: pointer; + position: absolute; + width: 1.5em; + height: 1.5em; + opacity: 0; +} +.tsd-filter-input input[type="checkbox"]:disabled { + pointer-events: none; +} +.tsd-filter-input svg { + cursor: pointer; + width: 1.5em; + height: 1.5em; + margin-right: 0.5em; + border-radius: 0.33em; + /* Leaving this at full opacity breaks event listeners on Firefox. + Don't remove unless you know what you're doing. */ + opacity: 0.99; +} +.tsd-filter-input input[type="checkbox"]:focus + svg { + transform: scale(0.95); +} +.tsd-filter-input input[type="checkbox"]:focus:not(:focus-visible) + svg { + transform: scale(1); +} +.tsd-checkbox-background { + fill: var(--color-accent); +} +input[type="checkbox"]:checked ~ svg .tsd-checkbox-checkmark { + stroke: var(--color-text); +} +.tsd-filter-input input:disabled ~ svg > .tsd-checkbox-background { + fill: var(--color-background); + stroke: var(--color-accent); + stroke-width: 0.25rem; +} +.tsd-filter-input input:disabled ~ svg > .tsd-checkbox-checkmark { + stroke: var(--color-accent); +} + +.tsd-theme-toggle { + padding-top: 0.75rem; +} +.tsd-theme-toggle > h4 { + display: inline; + vertical-align: middle; + margin-right: 0.75rem; +} + +.tsd-hierarchy { + list-style: square; + margin: 0; +} +.tsd-hierarchy .target { + font-weight: bold; +} + +.tsd-panel-group.tsd-index-group { + margin-bottom: 0; +} +.tsd-index-panel .tsd-index-list { + list-style: none; + line-height: 1.333em; + margin: 0; + padding: 0.25rem 0 0 0; + overflow: hidden; + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 1rem; + grid-template-rows: auto; +} +@media (max-width: 1024px) { + .tsd-index-panel .tsd-index-list { + grid-template-columns: repeat(2, 1fr); + } +} +@media (max-width: 768px) { + .tsd-index-panel .tsd-index-list { + grid-template-columns: repeat(1, 1fr); + } +} +.tsd-index-panel .tsd-index-list li { + -webkit-page-break-inside: avoid; + -moz-page-break-inside: avoid; + -ms-page-break-inside: avoid; + -o-page-break-inside: avoid; + page-break-inside: avoid; +} +.tsd-index-panel a, +.tsd-index-panel a.tsd-parent-kind-module { + color: var(--color-ts); +} +.tsd-index-panel a.tsd-parent-kind-interface { + color: var(--color-ts-interface); +} +.tsd-index-panel a.tsd-parent-kind-enum { + color: var(--color-ts-enum); +} +.tsd-index-panel a.tsd-parent-kind-class { + color: var(--color-ts-class); +} +.tsd-index-panel a.tsd-kind-module { + color: var(--color-ts-namespace); +} +.tsd-index-panel a.tsd-kind-interface { + color: var(--color-ts-interface); +} +.tsd-index-panel a.tsd-kind-enum { + color: var(--color-ts-enum); +} +.tsd-index-panel a.tsd-kind-class { + color: var(--color-ts-class); +} +.tsd-index-panel a.tsd-kind-function { + color: var(--color-ts-function); +} +.tsd-index-panel a.tsd-kind-namespace { + color: var(--color-ts-namespace); +} +.tsd-index-panel a.tsd-kind-variable { + color: var(--color-ts-variable); +} +.tsd-index-panel a.tsd-is-private { + color: var(--color-ts-private); +} + +.tsd-flag { + display: inline-block; + padding: 0.25em 0.4em; + border-radius: 4px; + color: var(--color-comment-tag-text); + background-color: var(--color-comment-tag); + text-indent: 0; + font-size: 75%; + line-height: 1; + font-weight: normal; +} + +.tsd-anchor { + position: absolute; + top: -100px; +} + +.tsd-member { + position: relative; +} +.tsd-member .tsd-anchor + h3 { + display: flex; + align-items: center; + margin-top: 0; + margin-bottom: 0; + border-bottom: none; +} +.tsd-member [data-tsd-kind] { + color: var(--color-ts); +} +.tsd-member [data-tsd-kind="Interface"] { + color: var(--color-ts-interface); +} +.tsd-member [data-tsd-kind="Enum"] { + color: var(--color-ts-enum); +} +.tsd-member [data-tsd-kind="Class"] { + color: var(--color-ts-class); +} +.tsd-member [data-tsd-kind="Private"] { + color: var(--color-ts-private); +} + +.tsd-navigation a { + display: block; + margin: 0.4rem 0; + border-left: 2px solid transparent; + color: var(--color-text); + text-decoration: none; + transition: border-left-color 0.1s; +} +.tsd-navigation a:hover { + text-decoration: underline; +} +.tsd-navigation ul { + margin: 0; + padding: 0; + list-style: none; +} +.tsd-navigation li { + padding: 0; +} + +.tsd-navigation.primary .tsd-accordion-details > ul { + margin-top: 0.75rem; +} +.tsd-navigation.primary a { + padding: 0.75rem 0.5rem; + margin: 0; +} +.tsd-navigation.primary ul li a { + margin-left: 0.5rem; +} +.tsd-navigation.primary ul li li a { + margin-left: 1.5rem; +} +.tsd-navigation.primary ul li li li a { + margin-left: 2.5rem; +} +.tsd-navigation.primary ul li li li li a { + margin-left: 3.5rem; +} +.tsd-navigation.primary ul li li li li li a { + margin-left: 4.5rem; +} +.tsd-navigation.primary ul li li li li li li a { + margin-left: 5.5rem; +} +.tsd-navigation.primary li.current > a { + border-left: 0.15rem var(--color-text) solid; +} +.tsd-navigation.primary li.selected > a { + font-weight: bold; + border-left: 0.2rem var(--color-text) solid; +} +.tsd-navigation.primary ul li a:hover { + border-left: 0.2rem var(--color-text-aside) solid; +} +.tsd-navigation.primary li.globals + li > span, +.tsd-navigation.primary li.globals + li > a { + padding-top: 20px; +} + +.tsd-navigation.secondary.tsd-navigation--toolbar-hide { + max-height: calc(100vh - 1rem); + top: 0.5rem; +} +.tsd-navigation.secondary > ul { + display: inline; + padding-right: 0.5rem; + transition: opacity 0.2s; +} +.tsd-navigation.secondary ul li a { + padding-left: 0; +} +.tsd-navigation.secondary ul li li a { + padding-left: 1.1rem; +} +.tsd-navigation.secondary ul li li li a { + padding-left: 2.2rem; +} +.tsd-navigation.secondary ul li li li li a { + padding-left: 3.3rem; +} +.tsd-navigation.secondary ul li li li li li a { + padding-left: 4.4rem; +} +.tsd-navigation.secondary ul li li li li li li a { + padding-left: 5.5rem; +} + +#tsd-sidebar-links a { + margin-top: 0; + margin-bottom: 0.5rem; + line-height: 1.25rem; +} +#tsd-sidebar-links a:last-of-type { + margin-bottom: 0; +} + +a.tsd-index-link { + margin: 0.25rem 0; + font-size: 1rem; + line-height: 1.25rem; + display: inline-flex; + align-items: center; +} +.tsd-accordion-summary > h1, +.tsd-accordion-summary > h2, +.tsd-accordion-summary > h3, +.tsd-accordion-summary > h4, +.tsd-accordion-summary > h5 { + display: inline-flex; + align-items: center; + vertical-align: middle; + margin-bottom: 0; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} +.tsd-accordion-summary { + display: block; + cursor: pointer; +} +.tsd-accordion-summary > * { + margin-top: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; +} +.tsd-accordion-summary::-webkit-details-marker { + display: none; +} +.tsd-index-accordion .tsd-accordion-summary svg { + margin-right: 0.25rem; +} +.tsd-index-content > :not(:first-child) { + margin-top: 0.75rem; +} +.tsd-index-heading { + margin-top: 1.5rem; + margin-bottom: 0.75rem; +} + +.tsd-kind-icon { + margin-right: 0.5rem; + width: 1.25rem; + height: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; +} +.tsd-kind-icon path { + transform-origin: center; + transform: scale(1.1); +} +.tsd-signature > .tsd-kind-icon { + margin-right: 0.8rem; +} + +@media (min-width: 1025px) { + .col-content { + margin: 2rem auto; + } + + .menu-sticky-wrap { + position: sticky; + height: calc(100vh - 2rem); + top: 4rem; + right: 0; + padding: 0 1.5rem; + padding-top: 1rem; + margin-top: 3rem; + transition: 0.3s ease-in-out; + transition-property: top, padding-top, padding, height; + overflow-y: auto; + } + .col-menu { + border-left: 1px solid var(--color-accent); + } + .col-menu--hide { + top: 1rem; + } + .col-menu .tsd-navigation:not(:last-child) { + padding-bottom: 1.75rem; + } +} + +.tsd-panel { + margin-bottom: 2.5rem; +} +.tsd-panel.tsd-member { + margin-bottom: 4rem; +} +.tsd-panel:empty { + display: none; +} +.tsd-panel > h1, +.tsd-panel > h2, +.tsd-panel > h3 { + margin: 1.5rem -1.5rem 0.75rem -1.5rem; + padding: 0 1.5rem 0.75rem 1.5rem; +} +.tsd-panel > h1.tsd-before-signature, +.tsd-panel > h2.tsd-before-signature, +.tsd-panel > h3.tsd-before-signature { + margin-bottom: 0; + border-bottom: none; +} + +.tsd-panel-group { + margin: 4rem 0; +} +.tsd-panel-group.tsd-index-group { + margin: 2rem 0; +} +.tsd-panel-group.tsd-index-group details { + margin: 2rem 0; +} + +#tsd-search { + transition: background-color 0.2s; +} +#tsd-search .title { + position: relative; + z-index: 2; +} +#tsd-search .field { + position: absolute; + left: 0; + top: 0; + right: 2.5rem; + height: 100%; +} +#tsd-search .field input { + box-sizing: border-box; + position: relative; + top: -50px; + z-index: 1; + width: 100%; + padding: 0 10px; + opacity: 0; + outline: 0; + border: 0; + background: transparent; + color: var(--color-text); +} +#tsd-search .field label { + position: absolute; + overflow: hidden; + right: -40px; +} +#tsd-search .field input, +#tsd-search .title, +#tsd-toolbar-links a { + transition: opacity 0.2s; +} +#tsd-search .results { + position: absolute; + visibility: hidden; + top: 40px; + width: 100%; + margin: 0; + padding: 0; + list-style: none; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); +} +#tsd-search .results li { + padding: 0 10px; + background-color: var(--color-background); +} +#tsd-search .results li:nth-child(even) { + background-color: var(--color-background-secondary); +} +#tsd-search .results li.state { + display: none; +} +#tsd-search .results li.current, +#tsd-search .results li:hover { + background-color: var(--color-accent); +} +#tsd-search .results a { + display: block; +} +#tsd-search .results a:before { + top: 10px; +} +#tsd-search .results span.parent { + color: var(--color-text-aside); + font-weight: normal; +} +#tsd-search.has-focus { + background-color: var(--color-accent); +} +#tsd-search.has-focus .field input { + top: 0; + opacity: 1; +} +#tsd-search.has-focus .title, +#tsd-search.has-focus #tsd-toolbar-links a { + z-index: 0; + opacity: 0; +} +#tsd-search.has-focus .results { + visibility: visible; +} +#tsd-search.loading .results li.state.loading { + display: block; +} +#tsd-search.failure .results li.state.failure { + display: block; +} + +#tsd-toolbar-links { + position: absolute; + top: 0; + right: 2rem; + height: 100%; + display: flex; + align-items: center; + justify-content: flex-end; +} +#tsd-toolbar-links a { + margin-left: 1.5rem; +} +#tsd-toolbar-links a:hover { + text-decoration: underline; +} + +.tsd-signature { + margin: 0 0 1rem 0; + padding: 1rem 0.5rem; + border: 1px solid var(--color-accent); + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + font-size: 14px; + overflow-x: auto; +} + +.tsd-signature-symbol { + color: var(--color-text-aside); + font-weight: normal; +} + +.tsd-signature-type { + font-style: italic; + font-weight: normal; +} + +.tsd-signatures { + padding: 0; + margin: 0 0 1em 0; + list-style-type: none; +} +.tsd-signatures .tsd-signature { + margin: 0; + border-color: var(--color-accent); + border-width: 1px 0; + transition: background-color 0.1s; +} +.tsd-description .tsd-signatures .tsd-signature { + border-width: 1px; +} + +ul.tsd-parameter-list, +ul.tsd-type-parameter-list { + list-style: square; + margin: 0; + padding-left: 20px; +} +ul.tsd-parameter-list > li.tsd-parameter-signature, +ul.tsd-type-parameter-list > li.tsd-parameter-signature { + list-style: none; + margin-left: -20px; +} +ul.tsd-parameter-list h5, +ul.tsd-type-parameter-list h5 { + font-size: 16px; + margin: 1em 0 0.5em 0; +} +.tsd-sources { + margin-top: 1rem; + font-size: 0.875em; +} +.tsd-sources a { + color: var(--color-text-aside); + text-decoration: underline; +} +.tsd-sources ul { + list-style: none; + padding: 0; +} + +.tsd-page-toolbar { + position: fixed; + z-index: 1; + top: 0; + left: 0; + width: 100%; + color: var(--color-text); + background: var(--color-background-secondary); + border-bottom: 1px var(--color-accent) solid; + transition: transform 0.3s ease-in-out; +} +.tsd-page-toolbar a { + color: var(--color-text); + text-decoration: none; +} +.tsd-page-toolbar a.title { + font-weight: bold; +} +.tsd-page-toolbar a.title:hover { + text-decoration: underline; +} +.tsd-page-toolbar .tsd-toolbar-contents { + display: flex; + justify-content: space-between; + height: 2.5rem; + margin: 0 auto; +} +.tsd-page-toolbar .table-cell { + position: relative; + white-space: nowrap; + line-height: 40px; +} +.tsd-page-toolbar .table-cell:first-child { + width: 100%; +} +.tsd-page-toolbar .tsd-toolbar-icon { + box-sizing: border-box; + line-height: 0; + padding: 12px 0; +} + +.tsd-page-toolbar--hide { + transform: translateY(-100%); +} + +.tsd-widget { + display: inline-block; + overflow: hidden; + opacity: 0.8; + height: 40px; + transition: opacity 0.1s, background-color 0.2s; + vertical-align: bottom; + cursor: pointer; +} +.tsd-widget:hover { + opacity: 0.9; +} +.tsd-widget.active { + opacity: 1; + background-color: var(--color-accent); +} +.tsd-widget.no-caption { + width: 40px; +} +.tsd-widget.no-caption:before { + margin: 0; +} + +.tsd-widget.options, +.tsd-widget.menu { + display: none; +} +@media (max-width: 1024px) { + .tsd-widget.options, + .tsd-widget.menu { + display: inline-block; + } +} +input[type="checkbox"] + .tsd-widget:before { + background-position: -120px 0; +} +input[type="checkbox"]:checked + .tsd-widget:before { + background-position: -160px 0; +} + +img { + max-width: 100%; +} + +.tsd-anchor-icon { + display: inline-flex; + align-items: center; + margin-left: 0.5rem; + vertical-align: middle; + color: var(--color-text); +} + +.tsd-anchor-icon svg { + width: 1em; + height: 1em; + visibility: hidden; +} + +.tsd-anchor-link:hover > .tsd-anchor-icon svg { + visibility: visible; +} + +.deprecated { + text-decoration: line-through; +} + +.warning { + padding: 1rem; + color: var(--color-warning-text); + background: var(--color-background-warning); +} + +* { + scrollbar-width: thin; + scrollbar-color: var(--color-accent) var(--color-icon-background); +} + +*::-webkit-scrollbar { + width: 0.75rem; +} + +*::-webkit-scrollbar-track { + background: var(--color-icon-background); +} + +*::-webkit-scrollbar-thumb { + background-color: var(--color-accent); + border-radius: 999rem; + border: 0.25rem solid var(--color-icon-background); +} diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..cb63d3b --- /dev/null +++ b/docs/index.html @@ -0,0 +1,80 @@ +react-hook-form-chakra
+
+ +
+
+
+
+

react-hook-form-chakra

+
+
+

Index

+
+

Interfaces

+
BaseProps +BaseReactHookFormProps +ChakraFormControlProps +CheckboxContainerProps +CheckboxControlProps +CheckboxSingleProps +InputControlProps +NumberInputControlProps +PinInputControlProps +RadioGroupControlProps +ResetButtonProps +SelectControlProps +SliderControlProps +SubmitButtonProps +SwitchControlProps +TextareaControlProps +
+
+
+
+

Settings

 +
+
+

Member Visibility

+
    +
    • +
    • +
    • +
    • +
    • +
+
+

Theme

+ +
+
+

Generated using TypeDoc

+
\ No newline at end of file diff --git a/docs/interfaces/BaseProps.html b/docs/interfaces/BaseProps.html new file mode 100644 index 0000000..c6b90db --- /dev/null +++ b/docs/interfaces/BaseProps.html @@ -0,0 +1,4488 @@ +BaseProps | react-hook-form-chakra
+
+ +
+
+
+
+ +

Interface BaseProps

+
+

The union of ChakraFormControlProps and BaseReactHookFormProps which defines the base properties +for most of react-hook-form-chakra components

+
+
+

Hierarchy

+
+
+
+
+ +
+
+

Properties

+
__css? +_active? +_activeLink? +_activeStep? +_after? +_autofill? +_before? +_checked? +_dark? +_disabled? +_empty? +_even? +_expanded? +_first? +_firstLetter? +_focus? +_focusVisible? +_focusWithin? +_fullScreen? +_grabbed? +_groupActive? +_groupChecked? +_groupDisabled? +_groupFocus? +_groupFocusVisible? +_groupFocusWithin? +_groupHover? +_groupInvalid? +_hidden? +_highlighted? +_hover? +_indeterminate? +_invalid? +_last? +_light? +_loading? +_ltr? +_mediaDark? +_mediaReduceMotion? +_notFirst? +_notLast? +_odd? +_peerActive? +_peerChecked? +_peerDisabled? +_peerFocus? +_peerFocusVisible? +_peerFocusWithin? +_peerHover? +_peerInvalid? +_peerPlaceholderShown? +_placeholder? +_placeholderShown? +_pressed? +_readOnly? +_rtl? +_selected? +_selection? +_valid? +_visited? +alignContent? +alignItems? +alignSelf? +animation? +appearance? +apply? +aria-activedescendant? +aria-atomic? +aria-autocomplete? +aria-busy? +aria-checked? +aria-colcount? +aria-colindex? +aria-colspan? +aria-controls? +aria-current? +aria-describedby? +aria-details? +aria-disabled? +aria-dropeffect? +aria-errormessage? +aria-expanded? +aria-flowto? +aria-grabbed? +aria-haspopup? +aria-hidden? +aria-invalid? +aria-keyshortcuts? +aria-label? +aria-labelledby? +aria-level? +aria-live? +aria-modal? +aria-multiline? +aria-multiselectable? +aria-orientation? +aria-owns? +aria-placeholder? +aria-posinset? +aria-pressed? +aria-readonly? +aria-relevant? +aria-required? +aria-roledescription? +aria-rowcount? +aria-rowindex? +aria-rowspan? +aria-selected? +aria-setsize? +aria-sort? +aria-valuemax? +aria-valuemin? +aria-valuenow? +aria-valuetext? +backdropBlur? +backdropBrightness? +backdropContrast? +backdropFilter? +backdropHueRotate? +backdropInvert? +backdropSaturate? +background? +backgroundAttachment? +backgroundBlendMode? +backgroundClip? +backgroundColor? +backgroundImage? +backgroundPosition? +backgroundRepeat? +backgroundSize? +bg? +bgAttachment? +bgBlendMode? +bgClip? +bgColor? +bgGradient? +bgImage? +bgImg? +bgPos? +bgPosition? +bgRepeat? +bgSize? +blendMode? +blur? +border? +borderBottom? +borderBottomColor? +borderBottomLeftRadius? +borderBottomRadius? +borderBottomRightRadius? +borderBottomStyle? +borderBottomWidth? +borderColor? +borderEndRadius? +borderInlineEndRadius? +borderInlineStartRadius? +borderLeft? +borderLeftColor? +borderLeftRadius? +borderLeftStyle? +borderLeftWidth? +borderRadius? +borderRight? +borderRightColor? +borderRightRadius? +borderRightStyle? +borderRightWidth? +borderStartRadius? +borderStyle? +borderTop? +borderTopColor? +borderTopLeftRadius? +borderTopRadius? +borderTopRightRadius? +borderTopStyle? +borderTopWidth? +borderWidth? +borderX? +borderY? +bottom? +boxDecorationBreak? +boxShadow? +boxSize? +boxSizing? +brightness? +clipPath? +color? +columnGap? +contrast? +control? +css? +cursor? +display? +dropShadow? +errorMessageProps? +fill? +filter? +flex? +flexBasis? +flexDir? +flexDirection? +flexFlow? +flexGrow? +flexShrink? +flexWrap? +float? +fontFamily? +fontSize? +fontStyle? +fontWeight? +gap? +gridArea? +gridAutoColumns? +gridAutoFlow? +gridAutoRows? +gridColumn? +gridColumnEnd? +gridColumnGap? +gridColumnStart? +gridGap? +gridRow? +gridRowEnd? +gridRowGap? +gridRowStart? +gridTemplate? +gridTemplateAreas? +gridTemplateColumns? +gridTemplateRows? +h? +height? +helperText? +helperTextProps? +hideBelow? +hideFrom? +hueRotate? +inputMode? +inset? +insetEnd? +insetInlineEnd? +insetStart? +insetX? +insetY? +invert? +is? +isDisabled? +isInvalid? +isReadOnly? +isRequired? +isTruncated? +isolation? +justifyContent? +justifyItems? +justifySelf? +label? +labelProps? +layerStyle? +left? +letterSpacing? +lineHeight? +listStyleImage? +listStyleImg? +listStylePos? +listStylePosition? +m? +margin? +marginBottom? +marginEnd? +marginInlineEnd? +marginInlineStart? +marginLeft? +marginRight? +marginStart? +marginTop? +marginX? +marginY? +maxH? +maxHeight? +maxW? +maxWidth? +mb? +me? +minH? +minHeight? +minW? +minWidth? +mixBlendMode? +ml? +mr? +ms? +mt? +mx? +my? +name +noOfLines? +objectFit? +objectPosition? +onKeyPress? +onKeyPressCapture? +opacity? +order? +outline? +outlineColor? +outlineOffset? +overflow? +overflowWrap? +overflowX? +overflowY? +overscroll? +overscrollBehavior? +overscrollBehaviorX? +overscrollBehaviorY? +overscrollX? +overscrollY? +p? +padding? +paddingBottom? +paddingEnd? +paddingInlineEnd? +paddingInlineStart? +paddingLeft? +paddingRight? +paddingStart? +paddingTop? +paddingX? +paddingY? +pb? +pe? +pl? +placeContent? +placeItems? +placeSelf? +pointerEvents? +pos? +position? +pr? +ps? +pt? +px? +py? +resize? +right? +ring? +ringColor? +ringInset? +ringOffset? +ringOffsetColor? +rotate? +rounded? +roundedBottom? +roundedBottomLeft? +roundedBottomRight? +roundedEnd? +roundedLeft? +roundedRight? +roundedStart? +roundedTop? +roundedTopLeft? +roundedTopRight? +rowGap? +saturate? +scale? +scaleX? +scaleY? +shadow? +skewX? +skewY? +srOnly? +stroke? +sx? +textAlign? +textColor? +textDecor? +textDecoration? +textDecorationColor? +textDecorationLine? +textDecorationStyle? +textDecorationThickness? +textIndent? +textOverflow? +textShadow? +textStyle? +textTransform? +textUnderlineOffset? +top? +transform? +transformOrigin? +transition? +transitionDelay? +transitionDuration? +transitionProperty? +transitionTimingFunction? +translateX? +translateY? +userSelect? +verticalAlign? +visibility? +w? +whiteSpace? +width? +willChange? +wordBreak? +zIndex? +
+
+

Properties

+
+

Optional Private __css

+
__css?: SystemStyleObject
+

Used for internal css management

+
+
+

Optional _active

+
_active?: SystemStyleObject
+

Styles for CSS Selector &:active

+
+
+

Optional _activeLink

+
_activeLink?: SystemStyleObject
+

Used to style the active link in a navigation +Styles for CSS Selector &[aria-current=page]

+
+
+

Optional _activeStep

+
_activeStep?: SystemStyleObject
+

Used to style the current step within a process +Styles for CSS Selector &[aria-current=step]

+
+
+

Optional _after

+
_after?: SystemStyleObject
+

Styles for CSS selector &::after

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _after={{content:`""` }}/>
+
+
+
+

Optional _autofill

+
_autofill?: SystemStyleObject
+

Styles for CSS Selector &:-webkit-autofill

+
+
+

Optional _before

+
_before?: SystemStyleObject
+

Styles for CSS selector &::before

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _before={{content:`""` }}/>
+
+
+
+

Optional _checked

+
_checked?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is true

+
    +
  • CSS selector &[aria-checked=true]
    • +
+
+
+

Optional _dark

+
_dark?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _disabled

+
_disabled?: SystemStyleObject
+

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

+
    +
  • &[aria-disabled=true]
    • +
  • &:disabled
    • +
  • &[data-disabled]
    • +
  • &[disabled]
    • +
+
+
+

Optional _empty

+
_empty?: SystemStyleObject
+

Styles for CSS selector &:empty

+
+
+

Optional _even

+
_even?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(even)

+
+
+

Optional _expanded

+
_expanded?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-expanded is true

+
    +
  • CSS selector &[aria-expanded=true]
    • +
+
+
+

Optional _first

+
_first?: SystemStyleObject
+

Styles for CSS Selector &:first-of-type

+
+
+

Optional _firstLetter

+
_firstLetter?: SystemStyleObject
+

Styles for CSS selector &::first-letter

+

NOTE: This selector is only applied for block-level elements and not preceded by an image or table.

+ +

Example

<Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
+
+
+
+

Optional _focus

+
_focus?: SystemStyleObject
+

Styles for CSS selector &:focus

+
+
+

Optional _focusVisible

+
_focusVisible?: SystemStyleObject
+

Styles to apply when this element has received focus via tabbing

+
    +
  • CSS Selector &:focus-visible
    • +
+
+
+

Optional _focusWithin

+
_focusWithin?: SystemStyleObject
+

Styles to apply when a child of this element has received focus

+
    +
  • CSS Selector &:focus-within
    • +
+
+
+

Optional _fullScreen

+
_fullScreen?: SystemStyleObject
+

Styles for CSS Selector &:fullscreen.

+
+
+

Optional _grabbed

+
_grabbed?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-grabbed is true

+
    +
  • CSS selector &[aria-grabbed=true]
    • +
+
+
+

Optional _groupActive

+
_groupActive?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is active

+
+
+

Optional _groupChecked

+
_groupChecked?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is checked

+
+
+

Optional _groupDisabled

+
_groupDisabled?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is disabled

+
+
+

Optional _groupFocus

+
_groupFocus?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is focused

+
+
+

Optional _groupFocusVisible

+
_groupFocusVisible?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has visible focus

+
+
+

Optional _groupFocusWithin

+
_groupFocusWithin?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has focus within

+
+
+

Optional _groupHover

+
_groupHover?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is hovered

+
+
+

Optional _groupInvalid

+
_groupInvalid?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is invalid

+
+
+

Optional _hidden

+
_hidden?: SystemStyleObject
+

Styles for CSS Selector [hidden=true]

+
+
+

Optional _highlighted

+
_highlighted?: SystemStyleObject
+

Styles for the highlighted state.

+
+
+

Optional _hover

+
_hover?: SystemStyleObject
+

Styles for CSS selector &:hover

+
+
+

Optional _indeterminate

+
_indeterminate?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is mixed

+
    +
  • CSS selector &[aria-checked=mixed]
    • +
+
+
+

Optional _invalid

+
_invalid?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-invalid is true

+
    +
  • CSS selector &[aria-invalid=true]
    • +
+
+
+

Optional _last

+
_last?: SystemStyleObject
+

Styles for CSS Selector &:last-of-type

+
+
+

Optional _light

+
_light?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _loading

+
_loading?: SystemStyleObject
+

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. +Useful for styling loading states

+
+
+

Optional _ltr

+
_ltr?: SystemStyleObject
+

Styles for CSS Selector [dir=ltr] & +It is applied when a parent element or this element has dir="ltr"

+
+
+

Optional _mediaDark

+
_mediaDark?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-color-scheme: dark) +It is used when the user has requested the system use a light or dark color theme.

+
+
+

Optional _mediaReduceMotion

+
_mediaReduceMotion?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-reduced-motion: reduce) +It is used when the user has requested the system to reduce the amount of animations.

+
+
+

Optional _notFirst

+
_notFirst?: SystemStyleObject
+

Styles for CSS Selector &:not(:first-of-type)

+
+
+

Optional _notLast

+
_notLast?: SystemStyleObject
+

Styles for CSS Selector &:not(:last-of-type)

+
+
+

Optional _odd

+
_odd?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(odd)

+
+
+

Optional _peerActive

+
_peerActive?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is active

+
+
+

Optional _peerChecked

+
_peerChecked?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is checked

+
+
+

Optional _peerDisabled

+
_peerDisabled?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is disabled

+
+
+

Optional _peerFocus

+
_peerFocus?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is focused

+
+
+

Optional _peerFocusVisible

+
_peerFocusVisible?: SystemStyleObject
+

Styles to apply when a sibling element with .peeror data-peer has visible focus

+
+
+

Optional _peerFocusWithin

+
_peerFocusWithin?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has focus within

+
+
+

Optional _peerHover

+
_peerHover?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is hovered

+
+
+

Optional _peerInvalid

+
_peerInvalid?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is invalid

+
+
+

Optional _peerPlaceholderShown

+
_peerPlaceholderShown?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

+
+
+

Optional _placeholder

+
_placeholder?: SystemStyleObject
+

Styles for CSS Selector &::placeholder.

+
+
+

Optional _placeholderShown

+
_placeholderShown?: SystemStyleObject
+

Styles for CSS Selector &:placeholder-shown.

+
+
+

Optional _pressed

+
_pressed?: SystemStyleObject
+

Styles for CSS Selector &[aria-pressed=true] +Typically used to style the current "pressed" state of toggle buttons

+
+
+

Optional _readOnly

+
_readOnly?: SystemStyleObject
+

Styles for CSS Selector &:readonly

+
+
+

Optional _rtl

+
_rtl?: SystemStyleObject
+

Styles for CSS Selector [dir=rtl] & +It is applied when a parent element or this element has dir="rtl"

+
+
+

Optional _selected

+
_selected?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-selected is true

+
    +
  • CSS selector &[aria-selected=true]
    • +
+
+
+

Optional _selection

+
_selection?: SystemStyleObject
+

Styles for CSS Selector &::selection

+
+
+

Optional _valid

+
_valid?: SystemStyleObject
+

Styles for the valid state

+
    +
  • CSS selector &[data-valid], &[data-state=valid]
    • +
+
+
+

Optional _visited

+
_visited?: SystemStyleObject
+

Styles for CSS Selector &:visited

+
+
+

Optional alignContent

+
alignContent?: ResponsiveValue<AlignContent>
+

The CSS align-content property.

+

It defines the distribution of space between and around +content items along a flexbox cross-axis or a grid's block axis.

+ +

See

Mozilla Docs

+
+
+

Optional alignItems

+
alignItems?: ResponsiveValue<AlignItems>
+

The CSS align-items property.

+

It defines the align-self value on all direct children as a group.

+
    +
  • In Flexbox, it controls the alignment of items on the Cross Axis.
    • +
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
    • +
+ +

See

Mozilla Docs

+
+
+

Optional alignSelf

+
alignSelf?: ResponsiveValue<AlignSelf>
+

The CSS align-self property.

+

It works like align-items, but applies only to a +single flexbox item, instead of all of them.

+ +

See

Mozilla Docs

+
+
+

Optional animation

+
animation?: ResponsiveValue<Animation<string & {}>>
+

The CSS animation property

+
+
+

Optional appearance

+
appearance?: ResponsiveValue<Appearance>
+

The CSS appearance property

+
+
+

Optional apply

+
apply?: ResponsiveValue<string>
+

Apply theme-aware style objects in theme

+ +

Example

<Box apply="styles.h3">This is a div</Box>
+
+

This will apply styles defined in theme.styles.h3

+
+
+

Optional aria-activedescendant

+
aria-activedescendant?: string
+

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

+
+
+

Optional aria-atomic

+
aria-atomic?: Booleanish
+

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

+
+
+

Optional aria-autocomplete

+
aria-autocomplete?: "none" | "both" | "inline" | "list"
+

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be +presented if they are made.

+
+
+

Optional aria-busy

+
aria-busy?: Booleanish
+

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

+
+
+

Optional aria-checked

+
aria-checked?: boolean | "true" | "false" | "mixed"
+

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

+ +

See

    +
  • aria-pressed
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-colcount

+
aria-colcount?: number
+

Defines the total number of columns in a table, grid, or treegrid.

+ +

See

aria-colindex.

+
+
+

Optional aria-colindex

+
aria-colindex?: number
+

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

+ +

See

    +
  • aria-colcount
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-colspan

+
aria-colspan?: number
+

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-colindex
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-controls

+
aria-controls?: string
+

Identifies the element (or elements) whose contents or presence are controlled by the current element.

+ +

See

aria-owns.

+
+
+

Optional aria-current

+
aria-current?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"
+

Indicates the element that represents the current item within a container or set of related elements.

+
+
+

Optional aria-describedby

+
aria-describedby?: string
+

Identifies the element (or elements) that describes the object.

+ +

See

aria-labelledby

+
+
+

Optional aria-details

+
aria-details?: string
+

Identifies the element that provides a detailed, extended description for the object.

+ +

See

aria-describedby.

+
+
+

Optional aria-disabled

+
aria-disabled?: Booleanish
+

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

+ +

See

    +
  • aria-hidden
    • +
  • aria-readonly.
    • +
+
+
+

Optional aria-dropeffect

+
aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"
+

Indicates what functions can be performed when a dragged object is released on the drop target.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-errormessage

+
aria-errormessage?: string
+

Identifies the element that provides an error message for the object.

+ +

See

    +
  • aria-invalid
    • +
  • aria-describedby.
    • +
+
+
+

Optional aria-expanded

+
aria-expanded?: Booleanish
+

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

+
+
+

Optional aria-flowto

+
aria-flowto?: string
+

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, +allows assistive technology to override the general default of reading in document source order.

+
+
+

Optional aria-grabbed

+
aria-grabbed?: Booleanish
+

Indicates an element's "grabbed" state in a drag-and-drop operation.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-haspopup

+
aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "true" | "false" | "tree"
+

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

+
+
+

Optional aria-hidden

+
aria-hidden?: Booleanish
+

Indicates whether the element is exposed to an accessibility API.

+ +

See

aria-disabled.

+
+
+

Optional aria-invalid

+
aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"
+

Indicates the entered value does not conform to the format expected by the application.

+ +

See

aria-errormessage.

+
+
+

Optional aria-keyshortcuts

+
aria-keyshortcuts?: string
+

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

+
+
+

Optional aria-label

+
aria-label?: string
+

Defines a string value that labels the current element.

+ +

See

aria-labelledby.

+
+
+

Optional aria-labelledby

+
aria-labelledby?: string
+

Identifies the element (or elements) that labels the current element.

+ +

See

aria-describedby.

+
+
+

Optional aria-level

+
aria-level?: number
+

Defines the hierarchical level of an element within a structure.

+
+
+

Optional aria-live

+
aria-live?: "off" | "assertive" | "polite"
+

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

+
+
+

Optional aria-modal

+
aria-modal?: Booleanish
+

Indicates whether an element is modal when displayed.

+
+
+

Optional aria-multiline

+
aria-multiline?: Booleanish
+

Indicates whether a text box accepts multiple lines of input or only a single line.

+
+
+

Optional aria-multiselectable

+
aria-multiselectable?: Booleanish
+

Indicates that the user may select more than one item from the current selectable descendants.

+
+
+

Optional aria-orientation

+
aria-orientation?: "horizontal" | "vertical"
+

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

+
+
+

Optional aria-owns

+
aria-owns?: string
+

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship +between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

+ +

See

aria-controls.

+
+
+

Optional aria-placeholder

+
aria-placeholder?: string
+

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. +A hint could be a sample value or a brief description of the expected format.

+
+
+

Optional aria-posinset

+
aria-posinset?: number
+

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-setsize.

+
+
+

Optional aria-pressed

+
aria-pressed?: boolean | "true" | "false" | "mixed"
+

Indicates the current "pressed" state of toggle buttons.

+ +

See

    +
  • aria-checked
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-readonly

+
aria-readonly?: Booleanish
+

Indicates that the element is not editable, but is otherwise operable.

+ +

See

aria-disabled.

+
+
+

Optional aria-relevant

+
aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
+

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

+ +

See

aria-atomic.

+
+
+

Optional aria-required

+
aria-required?: Booleanish
+

Indicates that user input is required on the element before a form may be submitted.

+
+
+

Optional aria-roledescription

+
aria-roledescription?: string
+

Defines a human-readable, author-localized description for the role of an element.

+
+
+

Optional aria-rowcount

+
aria-rowcount?: number
+

Defines the total number of rows in a table, grid, or treegrid.

+ +

See

aria-rowindex.

+
+
+

Optional aria-rowindex

+
aria-rowindex?: number
+

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowcount
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-rowspan

+
aria-rowspan?: number
+

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowindex
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-selected

+
aria-selected?: Booleanish
+

Indicates the current "selected" state of various widgets.

+ +

See

    +
  • aria-checked
    • +
  • aria-pressed.
    • +
+
+
+

Optional aria-setsize

+
aria-setsize?: number
+

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-posinset.

+
+
+

Optional aria-sort

+
aria-sort?: "none" | "ascending" | "descending" | "other"
+

Indicates if items in a table or grid are sorted in ascending or descending order.

+
+
+

Optional aria-valuemax

+
aria-valuemax?: number
+

Defines the maximum allowed value for a range widget.

+
+
+

Optional aria-valuemin

+
aria-valuemin?: number
+

Defines the minimum allowed value for a range widget.

+
+
+

Optional aria-valuenow

+
aria-valuenow?: number
+

Defines the current value for a range widget.

+ +

See

aria-valuetext.

+
+
+

Optional aria-valuetext

+
aria-valuetext?: string
+

Defines the human readable text alternative of aria-valuenow for a range widget.

+
+
+

Optional backdropBlur

+
backdropBlur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the backdrop-blur filter value of an element. +Value is assigned to --chakra-backdrop-blur css variable

+
+
+

Optional backdropBrightness

+
backdropBrightness?: ResponsiveValue<Length>
+

Sets the backdrop-brightness filter value of an element. +Value is assigned to --chakra-backdrop-brightness css variable

+
+
+

Optional backdropContrast

+
backdropContrast?: ResponsiveValue<Length>
+

Sets the backdrop-contrast filter value of an element. +Value is assigned to --chakra-backdrop-contrast css variable

+
+
+

Optional backdropFilter

+
backdropFilter?: ResponsiveValue<"auto" | BackdropFilter>
+

The CSS backdrop-filter property. When set to auto, you allow +Chakra UI to define the color based on the backdrop filter style props +(backdropBlur, backdropSaturate, etc.)

+
+
+

Optional backdropHueRotate

+
backdropHueRotate?: ResponsiveValue<Length>
+

Sets the backdrop-hue-rotate filter value of an element. +Value is assigned to --chakra-backdrop-hue-rotate css variable

+
+
+

Optional backdropInvert

+
backdropInvert?: ResponsiveValue<Length>
+

Sets the backdrop-invert filter value of an element. +Value is assigned to --chakra-backdrop-invert css variable

+
+
+

Optional backdropSaturate

+
backdropSaturate?: ResponsiveValue<Length>
+

Sets the backdrop-saturate filter value of an element. +Value is assigned to --chakra-backdrop-saturate css variable

+
+
+

Optional background

+
background?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional backgroundAttachment

+
backgroundAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional backgroundBlendMode

+
backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional backgroundClip

+
backgroundClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional backgroundColor

+
backgroundColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional backgroundImage

+
backgroundImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional backgroundPosition

+
backgroundPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional backgroundRepeat

+
backgroundRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional backgroundSize

+
backgroundSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional bg

+
bg?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional bgAttachment

+
bgAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional bgBlendMode

+
bgBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional bgClip

+
bgClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional bgColor

+
bgColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional bgGradient

+
bgGradient?: ResponsiveValue<string | string & {}>
+

The background-gradient shorthand

+
+
+

Optional bgImage

+
bgImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgImg

+
bgImg?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgPos

+
bgPos?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgPosition

+
bgPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgRepeat

+
bgRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional bgSize

+
bgSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional blendMode

+
blendMode?: ResponsiveValue<MixBlendMode>
+

The blend-mode property

+
+
+

Optional blur

+
blur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the blur filter value of an element. +Value is assigned to --chakra-filter css variable

+
+
+

Optional border

+
border?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border property

+
+
+

Optional borderBottom

+
borderBottom?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-bottom property

+
+
+

Optional borderBottomColor

+
borderBottomColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderBottomColor>
+

The CSS border-bottom-color property

+
+
+

Optional borderBottomLeftRadius

+
borderBottomLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional borderBottomRadius

+
borderBottomRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional borderBottomRightRadius

+
borderBottomRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional borderBottomStyle

+
borderBottomStyle?: ResponsiveValue<BorderBottomStyle>
+

The CSS border-bottom-style property

+
+
+

Optional borderBottomWidth

+
borderBottomWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-bottom-width property

+
+
+

Optional borderColor

+
borderColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-color property

+
+
+

Optional borderEndRadius

+
borderEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineEndRadius

+
borderInlineEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderInlineEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineStartRadius

+
borderInlineStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderInlineStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderLeft

+
borderLeft?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-left property

+
+
+

Optional borderLeftColor

+
borderLeftColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderLeftColor>
+

The CSS border-left-color property

+
+
+

Optional borderLeftRadius

+
borderLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional borderLeftStyle

+
borderLeftStyle?: ResponsiveValue<BorderLeftStyle>
+

The CSS border-left-style property

+
+
+

Optional borderLeftWidth

+
borderLeftWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-left-width property

+
+
+

Optional borderRadius

+
borderRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional borderRight

+
borderRight?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right property

+
+
+

Optional borderRightColor

+
borderRightColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderRightColor>
+

The CSS border-right-color property

+
+
+

Optional borderRightRadius

+
borderRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional borderRightStyle

+
borderRightStyle?: ResponsiveValue<BorderRightStyle>
+

The CSS border-right-styles property

+
+
+

Optional borderRightWidth

+
borderRightWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-right-width property

+
+
+

Optional borderStartRadius

+
borderStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderStyle

+
borderStyle?: ResponsiveValue<BorderStyle>
+

The CSS border-style property

+
+
+

Optional borderTop

+
borderTop?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top property

+
+
+

Optional borderTopColor

+
borderTopColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-top-color property

+
+
+

Optional borderTopLeftRadius

+
borderTopLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional borderTopRadius

+
borderTopRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional borderTopRightRadius

+
borderTopRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional borderTopStyle

+
borderTopStyle?: ResponsiveValue<BorderTopStyle>
+

The CSS border-top-style property

+
+
+

Optional borderTopWidth

+
borderTopWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-top-width property

+
+
+

Optional borderWidth

+
borderWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-width property

+
+
+

Optional borderX

+
borderX?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right and border-left property

+
+
+

Optional borderY

+
borderY?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top and border-bottom property

+
+
+

Optional bottom

+
bottom?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS bottom property

+
+
+

Optional boxDecorationBreak

+
boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>
+

The CSS box-decoration property

+
+
+

Optional boxShadow

+
boxShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional boxSize

+
boxSize?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width and height property

+
+
+

Optional boxSizing

+
boxSizing?: BoxSizing
+

The CSS box-sizing property

+
+
+

Optional brightness

+
brightness?: ResponsiveValue<Length>
+

Sets the brightness filter value of an element. +Value is assigned to --chakra-brightness css variable

+
+
+

Optional clipPath

+
clipPath?: ResponsiveValue<ClipPath>
+

The CSS clip-path property.

+

It creates a clipping region that sets what part of an element should be shown.

+
+
+

Optional color

+
color?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional columnGap

+
columnGap?: ResponsiveValue<ColumnGap<Length>>
+

The CSS column-gap property.

+

It sets the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional contrast

+
contrast?: ResponsiveValue<Length>
+

Sets the contrast filter value of an element. +Value is assigned to --chakra-contrast css variable

+
+
+

Optional control

+
control?: Control<any, any>
+

The control passed down from react-hook-form. +Only required if not using FormProvider

+
+
+

Optional css

+
css?: Interpolation<{}>
+

The emotion's css style object

+
+
+

Optional cursor

+
cursor?: ResponsiveValue<Cursor>
+

The CSS cursor property

+
+
+

Optional display

+
display?: ResponsiveValue<Display>
+

The CSS display property

+
+
+

Optional dropShadow

+
dropShadow?: ResponsiveValue<"base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

Sets the drop-shadow filter value of an element. +Value is assigned to --chakra-drop-shadow css variable

+
+
+

Optional errorMessageProps

+
errorMessageProps?: FormErrorMessageProps
+

Chakra FormErrorMessageProps for error message

+
+
+

Optional fill

+
fill?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS fill property for icon svgs and paths

+
+
+

Optional filter

+
filter?: ResponsiveValue<Filter | "auto">
+

The CSS filter property. When set to auto, you allow +Chakra UI to define the color based on the filter style props +(blur, saturate, etc.)

+
+
+

Optional flex

+
flex?: ResponsiveValue<Flex<Length>>
+

The CSS flex property.

+

It defines how a flex item will grow or shrink +to fit the space available in its flex container.

+ +

See

Mozilla Docs

+
+
+

Optional flexBasis

+
flexBasis?: ResponsiveValue<FlexBasis<Length>>
+

The CSS flex-basis property.

+

It defines the initial main size of a flex item.

+ +

See

Mozilla Docs

+
+
+

Optional flexDir

+
flexDir?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexDirection

+
flexDirection?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexFlow

+
flexFlow?: ResponsiveValue<FlexFlow>
+

The CSS flex-flow property.

+

It is a shorthand property for flex-direction and flex-wrap. +It specifies the direction of a flex container, as well as its wrapping behavior.

+ +

See

Mozilla Docs

+
+
+

Optional flexGrow

+
flexGrow?: ResponsiveValue<FlexGrow>
+

The CSS flex-grow property.

+

It defines how much a flexbox item should grow +if there's space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexShrink

+
flexShrink?: ResponsiveValue<FlexShrink>
+

The CSS flex-shrink property.

+

It defines how much a flexbox item should shrink +if there's not enough space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexWrap

+
flexWrap?: ResponsiveValue<FlexWrap>
+

The CSS flex-wrap property.

+

It defines whether flex items are forced onto one line or +can wrap onto multiple lines. If wrapping is allowed, +it sets the direction that lines are stacked.

+ +

See

Mozilla Docs

+
+
+

Optional float

+
float?: ResponsiveValue<Float>
+

The CSS float property

+
+
+

Optional fontFamily

+
fontFamily?: ResponsiveValue<"body" | FontFamily | "heading" | "mono">
+

The CSS font-family property

+
+
+

Optional fontSize

+
fontSize?: ResponsiveValue<number | "small" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl">
+

The CSS font-size property

+
+
+

Optional fontStyle

+
fontStyle?: ResponsiveValue<FontStyle>
+

The CSS font-style property

+
+
+

Optional fontWeight

+
fontWeight?: ResponsiveValue<number | "bold" | string & {} | "black" | "normal" | "hairline" | "thin" | "light" | "medium" | "semibold" | "extrabold">
+

The CSS font-weight property

+
+
+

Optional gap

+
gap?: ResponsiveValue<Gap<Length>>
+

The CSS gap property.

+

It defines the gap between items in both flex and +grid contexts.

+ +

See

Mozilla Docs

+
+
+

Optional gridArea

+
gridArea?: ResponsiveValue<GridArea>
+

The CSS grid-areas property.

+

It specifies a grid item’s size and location within a grid by +contributing a line, a span, or nothing (automatic) +to its grid placement, thereby specifying the edges of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoColumns

+
gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>
+

The CSS grid-auto-columns property.

+

It specifies the size of an implicitly-created grid column track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoFlow

+
gridAutoFlow?: ResponsiveValue<GridAutoFlow>
+

The CSS grid-auto-flow property

+

It controls how the auto-placement algorithm works, +specifying exactly how auto-placed items get flowed into the grid.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoRows

+
gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>
+

The CSS grid-auto-rows property.

+

It specifies the size of an implicitly-created grid row track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumn

+
gridColumn?: ResponsiveValue<GridColumn>
+

The CSS grid-column property.

+

It specifies a grid item's size and location within a grid column +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnEnd

+
gridColumnEnd?: ResponsiveValue<GridColumnEnd>
+

The CSS grid-column property

+

It specifies a grid item’s end position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the block-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnGap

+
gridColumnGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-column-gap property.

+

It defines the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnStart

+
gridColumnStart?: ResponsiveValue<GridColumnStart>
+

The CSS grid-column property.

+

It specifies a grid item’s start position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement

+ +

See

Mozilla Docs

+
+
+

Optional gridGap

+
gridGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-gap property.

+

It defines the gaps (gutters) between rows and columns

+ +

See

Mozilla Docs

+
+
+

Optional gridRow

+
gridRow?: ResponsiveValue<GridRow>
+

The CSS grid-row property

+

It specifies a grid item’s size and location within the grid row +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowEnd

+
gridRowEnd?: ResponsiveValue<GridRowEnd>
+

The CSS grid-row-end property

+

It specifies a grid item’s end position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowGap

+
gridRowGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-row-gap property.

+

It defines the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowStart

+
gridRowStart?: ResponsiveValue<GridRowStart>
+

The CSS grid-row-start property

+

It specifies a grid item’s start position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplate

+
gridTemplate?: ResponsiveValue<GridTemplate>
+

The CSS grid-template property.

+

It is a shorthand property for defining grid columns, rows, and areas.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateAreas

+
gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>
+

The CSS grid-template-areas property.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateColumns

+
gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>
+

The CSS grid-template-columns property

+

It defines the line names and track sizing functions of the grid columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateRows

+
gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>
+

The CSS grid-template-rows property.

+

It defines the line names and track sizing functions of the grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional h

+
h?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional height

+
height?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional helperText

+
helperText?: ReactNode
+

Helper text to show alongside input

+
+
+

Optional helperTextProps

+
helperTextProps?: TextProps
+

Chakra TextProps associated with the helper text

+
+
+

Optional hideBelow

+
hideBelow?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element below the specified breakpoint

+
+
+

Optional hideFrom

+
hideFrom?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element from the specified breakpoint and up

+
+
+

Optional hueRotate

+
hueRotate?: ResponsiveValue<Length>
+

Sets the hue-rotate filter value of an element. +Value is assigned to --chakra-hue-rotate css variable

+
+
+

Optional inputMode

+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
+

Hints at the type of data that might be entered by the user while editing the element or its contents

+ +

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

+
+
+

Optional inset

+
inset?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, right, top, bottom property

+
+
+

Optional insetEnd

+
insetEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetEnd is equivalent to right. +When the direction is rtl, insetEnd is equivalent to left.

+
+
+

Optional insetInlineEnd

+
insetInlineEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetInlineEnd is equivalent to right. +When the direction is rtl, insetInlineEnd is equivalent to left.

+
+
+

Optional insetStart

+
insetStart?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is start, end is equivalent to left. +When the direction is start, end is equivalent to right.

+
+
+

Optional insetX

+
insetX?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, and right property

+
+
+

Optional insetY

+
insetY?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top, and bottom property

+
+
+

Optional invert

+
invert?: ResponsiveValue<Length>
+

Sets the invert filter value of an element. +Value is assigned to --chakra-invert css variable

+
+
+

Optional is

+
is?: string
+

Specify that a standard HTML element should behave like a defined custom built-in element

+ +

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

+
+
+

Optional isDisabled

+
isDisabled?: boolean
+

If true, the form control will be disabled. This has 2 side effects:

+
    +
  • The FormLabel will have data-disabled attribute
    • +
  • The form element (e.g, Input) will be disabled
    • +
+ +

Default

false

+
+
+

Optional isInvalid

+
isInvalid?: boolean
+

If true, the form control will be invalid. This has 2 side effects:

+
    +
  • The FormLabel and FormErrorIcon will have data-invalid set to true
    • +
  • The form element (e.g, Input) will have aria-invalid set to true
    • +
+ +

Default

false

+
+
+

Optional isReadOnly

+
isReadOnly?: boolean
+

If true, the form control will be readonly

+ +

Default

false

+
+
+

Optional isRequired

+
isRequired?: boolean
+

If true, the form control will be required. This has 2 side effects:

+
    +
  • The FormLabel will show a required indicator
    • +
  • The form element (e.g, Input) will have aria-required set to true
    • +
+ +

Default

false

+
+
+

Optional isTruncated

+
isTruncated?: boolean
+

If true, it clamps truncate a text after one line.

+
+
+

Optional isolation

+
isolation?: ResponsiveValue<Isolation>
+

The CSS isolation property

+
+
+

Optional justifyContent

+
justifyContent?: ResponsiveValue<JustifyContent>
+

The CSS justify-content property.

+

It defines how the browser distributes space between and around content items +along the main-axis of a flex container, and the inline axis of a grid container.

+ +

See

Mozilla Docs

+
+
+

Optional justifyItems

+
justifyItems?: ResponsiveValue<JustifyItems>
+

The CSS justify-items property.

+

It defines the default justify-self for all items of the box, +giving them all a default way of justifying each box +along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional justifySelf

+
justifySelf?: ResponsiveValue<JustifySelf>
+

The CSS justify-self property.

+

It defines the way a box is justified inside its +alignment container along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional label

+
label?: ReactNode
+

The label to be associated with the input

+
+
+

Optional labelProps

+
labelProps?: FormLabelProps
+

Chakra FormLabelProps

+
+
+

Optional layerStyle

+
layerStyle?: ResponsiveValue<string & {}>
+

The layer style object to apply. +Note: Styles must be located in theme.layerStyles

+
+
+

Optional left

+
left?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left property

+
+
+

Optional letterSpacing

+
letterSpacing?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "tighter" | "tight" | "wide" | "wider" | "widest">
+

The CSS letter-spacing property

+
+
+

Optional lineHeight

+
lineHeight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "none" | "normal" | number & {} | "shorter" | "short" | "tall" | "taller">
+

The CSS line-height property

+
+
+

Optional listStyleImage

+
listStyleImage?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStyleImg

+
listStyleImg?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStylePos

+
listStylePos?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional listStylePosition

+
listStylePosition?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional m

+
m?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional margin

+
margin?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional marginBottom

+
marginBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional marginEnd

+
marginEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginEnd is equivalent to marginRight. +When direction is rtl, marginEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineEnd

+
marginInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineEnd is equivalent to marginRight. +When direction is rtl, marginInlineEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineStart

+
marginInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineStart is equivalent to marginLeft. +When direction is rtl, marginInlineStart is equivalent to marginRight.

+
+
+

Optional marginLeft

+
marginLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional marginRight

+
marginRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional marginStart

+
marginStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginStart is equivalent to marginLeft. +When direction is rtl, marginStart is equivalent to marginRight.

+
+
+

Optional marginTop

+
marginTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional marginX

+
marginX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional marginY

+
marginY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

Optional maxH

+
maxH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxHeight

+
maxHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxW

+
maxW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional maxWidth

+
maxWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional mb

+
mb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional me

+
me?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, me is equivalent to marginRight. +When direction is rtl, me is equivalent to marginLeft.

+
+
+

Optional minH

+
minH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minHeight

+
minHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minW

+
minW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional minWidth

+
minWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional mixBlendMode

+
mixBlendMode?: ResponsiveValue<MixBlendMode>
+

The mix-blend-mode property

+
+
+

Optional ml

+
ml?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional mr

+
mr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional ms

+
ms?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, ms is equivalent to marginLeft. +When direction is rtl, ms is equivalent to marginRight.

+
+
+

Optional mt

+
mt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional mx

+
mx?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional my

+
my?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

name

+
name: string
+

The name of the input (required)

+
+
+

Optional noOfLines

+
noOfLines?: ResponsiveValue<number>
+

Used to truncate text at a specific number of lines

+
+
+

Optional objectFit

+
objectFit?: ResponsiveValue<ObjectFit>
+

The CSS object-fit property

+
+
+

Optional objectPosition

+
objectPosition?: ResponsiveValue<ObjectPosition<Length>>
+

The CSS object-position property

+
+
+

Optional onKeyPress

+
onKeyPress?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional onKeyPressCapture

+
onKeyPressCapture?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional opacity

+
opacity?: ResponsiveValue<Opacity>
+

The CSS opacity property

+
+
+

Optional order

+
order?: ResponsiveValue<Order>
+

The CSS order property.

+

It defines the order to lay out an item in a flex or grid container.

+ +

See

Mozilla Docs

+
+
+

Optional outline

+
outline?: ResponsiveValue<Outline<Length>>
+

The CSS outline property

+
+
+

Optional outlineColor

+
outlineColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS outline-color property

+
+
+

Optional outlineOffset

+
outlineOffset?: ResponsiveValue<OutlineOffset<Length>>
+

The CSS outline-offset property

+
+
+

Optional overflow

+
overflow?: ResponsiveValue<Overflow>
+

The CSS overflow property

+
+
+

Optional overflowWrap

+
overflowWrap?: ResponsiveValue<OverflowWrap>
+

The CSS overflow-wrap property

+
+
+

Optional overflowX

+
overflowX?: ResponsiveValue<OverflowX>
+

The CSS overflow-x property

+
+
+

Optional overflowY

+
overflowY?: ResponsiveValue<OverflowY>
+

The CSS overflow-y property

+
+
+

Optional overscroll

+
overscroll?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehavior

+
overscrollBehavior?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehaviorX

+
overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollBehaviorY

+
overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional overscrollX

+
overscrollX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollY

+
overscrollY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional p

+
p?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional padding

+
padding?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional paddingBottom

+
paddingBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional paddingEnd

+
paddingEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingEnd is equivalent to paddingRight. +When direction is rtl, paddingEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineEnd

+
paddingInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineEnd is equivalent to paddingRight. +When direction is rtl, paddingInlineEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineStart

+
paddingInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineStart is equivalent to paddingLeft. +When direction is rtl, paddingInlineStart is equivalent to paddingRight.

+
+
+

Optional paddingLeft

+
paddingLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional paddingRight

+
paddingRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional paddingStart

+
paddingStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingStart is equivalent to paddingLeft. +When direction is rtl, paddingStart is equivalent to paddingRight.

+
+
+

Optional paddingTop

+
paddingTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional paddingX

+
paddingX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional paddingY

+
paddingY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional pb

+
pb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional pe

+
pe?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, pe is equivalent to paddingRight. +When direction is rtl, pe is equivalent to paddingLeft.

+
+
+

Optional pl

+
pl?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional placeContent

+
placeContent?: ResponsiveValue<PlaceContent>
+

The CSS place-content property.

+

It allows you to align content along both the block and +inline directions at once (i.e. the align-content and justify-content properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional placeItems

+
placeItems?: ResponsiveValue<PlaceItems>
+

The CSS place-items property.

+

It allows you to align items along both the block and +inline directions at once (i.e. the align-items and justify-items properties) +in a relevant layout system such as Grid or Flex.

+ +

See

Mozilla Docs

+
+
+

Optional placeSelf

+
placeSelf?: ResponsiveValue<PlaceSelf>
+

The CSS place-self property.

+

It allows you to align an individual item in both the block and +inline directions at once (i.e. the align-self and justify-self properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional pointerEvents

+
pointerEvents?: ResponsiveValue<PointerEvents>
+

The CSS pointer-events property

+
+
+

Optional pos

+
pos?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional position

+
position?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional pr

+
pr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional ps

+
ps?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, ps is equivalent to paddingLeft. +When direction is rtl, ps is equivalent to paddingRight.

+
+
+

Optional pt

+
pt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional px

+
px?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional py

+
py?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional resize

+
resize?: ResponsiveValue<Resize>
+

The CSS resize property

+
+
+

Optional right

+
right?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS right property

+
+
+

Optional ring

+
ring?: ResponsiveValue<Length>
+

Creates outline rings with CSS box-shadow property

+
+
+

Optional ringColor

+
ringColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the outline ring

+
+
+

Optional ringInset

+
ringInset?: ResponsiveValue<"inset" | "none">
+

If the outline ring should an inset

+
+
+

Optional ringOffset

+
ringOffset?: ResponsiveValue<Length>
+

The thickness of the offset shadow when using outline rings

+
+
+

Optional ringOffsetColor

+
ringOffsetColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the offset shadow when adding outline rings

+
+
+

Optional rotate

+
rotate?: ResponsiveValue<Length>
+

Sets the rotation value of the element

+
+
+

Optional rounded

+
rounded?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional roundedBottom

+
roundedBottom?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional roundedBottomLeft

+
roundedBottomLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional roundedBottomRight

+
roundedBottomRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional roundedEnd

+
roundedEnd?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedLeft

+
roundedLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional roundedRight

+
roundedRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional roundedStart

+
roundedStart?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedTop

+
roundedTop?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional roundedTopLeft

+
roundedTopLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional roundedTopRight

+
roundedTopRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional rowGap

+
rowGap?: ResponsiveValue<RowGap<Length>>
+

The CSS row-gap property.

+

It sets the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional saturate

+
saturate?: ResponsiveValue<Length>
+

Sets the saturation filter value of an element. +Value is assigned to --chakra-saturate css variable

+
+
+

Optional scale

+
scale?: ResponsiveValue<Length>
+

Sets the scale value of the element

+
+
+

Optional scaleX

+
scaleX?: ResponsiveValue<Length>
+

Scale value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-x
    • +
+
+
+

Optional scaleY

+
scaleY?: ResponsiveValue<Length>
+

Scale value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-y
    • +
+
+
+

Optional shadow

+
shadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional skewX

+
skewX?: ResponsiveValue<Length>
+

Skew value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-x
    • +
+
+
+

Optional skewY

+
skewY?: ResponsiveValue<Length>
+

Skew value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-y
    • +
+
+
+

Optional srOnly

+
srOnly?: true | "focusable"
+

If true, hide an element visually without hiding it from screen readers.

+

If focusable, the sr-only styles will be undone, making the element visible +to sighted users as well as screen readers.

+
+
+

Optional stroke

+
stroke?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS stroke property for icon svgs and paths

+
+
+

Optional sx

+
sx?: SystemStyleObject
+

Used to pass theme-aware style props. +NB: This is the public API for user-land

+
+
+

Optional textAlign

+
textAlign?: ResponsiveValue<TextAlign>
+

The CSS text-align property

+
+
+

Optional textColor

+
textColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional textDecor

+
textDecor?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecoration

+
textDecoration?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecorationColor

+
textDecorationColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | TextDecorationColor>
+

The CSS text-decoration-color property

+
+
+

Optional textDecorationLine

+
textDecorationLine?: ResponsiveValue<TextDecorationLine>
+

The CSS text-decoration-line property

+
+
+

Optional textDecorationStyle

+
textDecorationStyle?: ResponsiveValue<TextDecorationStyle>
+

The CSS text-decoration-style property

+
+
+

Optional textDecorationThickness

+
textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>
+

The CSS text-decoration-thickness property

+
+
+

Optional textIndent

+
textIndent?: ResponsiveValue<TextIndent<0 | string & {}>>
+

The CSS text-indent property

+
+
+

Optional textOverflow

+
textOverflow?: ResponsiveValue<TextOverflow>
+

The CSS text-overflow property

+
+
+

Optional textShadow

+
textShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "inner" | "dark-lg" | TextShadow>
+

The text-shadow property

+
+
+

Optional textStyle

+
textStyle?: ResponsiveValue<string & {}>
+

The text style object to apply. +Note: Styles must be located in theme.textStyles

+
+
+

Optional textTransform

+
textTransform?: ResponsiveValue<TextTransform>
+

The CSS text-transform property

+
+
+

Optional textUnderlineOffset

+
textUnderlineOffset?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto">
+

The CSS text-underline-offset property

+
+
+

Optional top

+
top?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top property

+
+
+

Optional transform

+
transform?: ResponsiveValue<"auto" | Transform | "auto-gpu">
+

The CSS transform property

+
+
+

Optional transformOrigin

+
transformOrigin?: ResponsiveValue<number | "center" | "px" | "top" | "right" | "bottom" | "left" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS transform-origin property

+
+
+

Optional transition

+
transition?: ResponsiveValue<Transition<string & {}>>
+

The CSS transition property

+
+
+

Optional transitionDelay

+
transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>
+

The CSS transition-delay property

+
+
+

Optional transitionDuration

+
transitionDuration?: ResponsiveValue<string>
+

The CSS transition-duration property

+
+
+

Optional transitionProperty

+
transitionProperty?: ResponsiveValue<TransitionProperty>
+

The CSS transition-property property

+
+
+

Optional transitionTimingFunction

+
transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>
+

The CSS transition-timing-function property

+
+
+

Optional translateX

+
translateX?: ResponsiveValue<Length>
+

Translate value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-x
    • +
+
+
+

Optional translateY

+
translateY?: ResponsiveValue<Length>
+

Translate value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-y
    • +
+
+
+

Optional userSelect

+
userSelect?: ResponsiveValue<UserSelect>
+

The CSS user-select property

+
+
+

Optional verticalAlign

+
verticalAlign?: ResponsiveValue<VerticalAlign<Length>>
+

The CSS vertical-align property

+
+
+

Optional visibility

+
visibility?: ResponsiveValue<Visibility>
+

The CSS visibility property

+
+
+

Optional w

+
w?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional whiteSpace

+
whiteSpace?: ResponsiveValue<WhiteSpace>
+

The CSS white-space property

+
+
+

Optional width

+
width?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional willChange

+
willChange?: ResponsiveValue<WillChange>
+

The CSS will-change property

+
+
+

Optional wordBreak

+
wordBreak?: ResponsiveValue<WordBreak>
+

The CSS word-break property

+
+
+

Optional zIndex

+
zIndex?: ResponsiveValue<"base" | "overlay" | ZIndex | "hide" | "docked" | "dropdown" | "sticky" | "banner" | "modal" | "popover" | "skipLink" | "toast" | "tooltip">
+

The CSS z-index property

+
+
+
+
+

Settings

 +
+
+

Member Visibility

+
    +
    • +
    • +
    • +
    • +
    • +
+
+

Theme

+ +
+
+

Generated using TypeDoc

+
\ No newline at end of file diff --git a/docs/interfaces/BaseReactHookFormProps.html b/docs/interfaces/BaseReactHookFormProps.html new file mode 100644 index 0000000..c476969 --- /dev/null +++ b/docs/interfaces/BaseReactHookFormProps.html @@ -0,0 +1,132 @@ +BaseReactHookFormProps | react-hook-form-chakra
+
+ +
+
+
+
+ +

Interface BaseReactHookFormProps

+
+

Defines react-hook-form-chakra specific properties for all components

+
+
+

Hierarchy

+
+
+
+
+ +
+
+

Properties

+
control? +errorMessageProps? +helperText? +helperTextProps? +label? +labelProps? +name +
+
+

Properties

+
+

Optional control

+
control?: Control<any, any>
+

The control passed down from react-hook-form. +Only required if not using FormProvider

+
+
+

Optional errorMessageProps

+
errorMessageProps?: FormErrorMessageProps
+

Chakra FormErrorMessageProps for error message

+
+
+

Optional helperText

+
helperText?: ReactNode
+

Helper text to show alongside input

+
+
+

Optional helperTextProps

+
helperTextProps?: TextProps
+

Chakra TextProps associated with the helper text

+
+
+

Optional label

+
label?: ReactNode
+

The label to be associated with the input

+
+
+

Optional labelProps

+
labelProps?: FormLabelProps
+

Chakra FormLabelProps

+
+
+

name

+
name: string
+

The name of the input (required)

+
+
+
+
+

Settings

 +
+
+

Member Visibility

+
    +
    • +
    • +
    • +
    • +
    • +
+
+

Theme

+ +
+
+

Generated using TypeDoc

+
\ No newline at end of file diff --git a/docs/interfaces/ChakraFormControlProps.html b/docs/interfaces/ChakraFormControlProps.html new file mode 100644 index 0000000..38b76e2 --- /dev/null +++ b/docs/interfaces/ChakraFormControlProps.html @@ -0,0 +1,4407 @@ +ChakraFormControlProps | react-hook-form-chakra
+
+ +
+
+
+
+ +

Interface ChakraFormControlProps

+
+

All of the properties from Chakra's FormControlProps except "label" which +we are overriding to accept a ReactNode instead of a simple string

+
+
+

Hierarchy

+
    +
  • Omit<FormControlProps, "label"> +
+
+
+
+ +
+
+

Properties

+
__css? +_active? +_activeLink? +_activeStep? +_after? +_autofill? +_before? +_checked? +_dark? +_disabled? +_empty? +_even? +_expanded? +_first? +_firstLetter? +_focus? +_focusVisible? +_focusWithin? +_fullScreen? +_grabbed? +_groupActive? +_groupChecked? +_groupDisabled? +_groupFocus? +_groupFocusVisible? +_groupFocusWithin? +_groupHover? +_groupInvalid? +_hidden? +_highlighted? +_hover? +_indeterminate? +_invalid? +_last? +_light? +_loading? +_ltr? +_mediaDark? +_mediaReduceMotion? +_notFirst? +_notLast? +_odd? +_peerActive? +_peerChecked? +_peerDisabled? +_peerFocus? +_peerFocusVisible? +_peerFocusWithin? +_peerHover? +_peerInvalid? +_peerPlaceholderShown? +_placeholder? +_placeholderShown? +_pressed? +_readOnly? +_rtl? +_selected? +_selection? +_valid? +_visited? +alignContent? +alignItems? +alignSelf? +animation? +appearance? +apply? +aria-activedescendant? +aria-atomic? +aria-autocomplete? +aria-busy? +aria-checked? +aria-colcount? +aria-colindex? +aria-colspan? +aria-controls? +aria-current? +aria-describedby? +aria-details? +aria-disabled? +aria-dropeffect? +aria-errormessage? +aria-expanded? +aria-flowto? +aria-grabbed? +aria-haspopup? +aria-hidden? +aria-invalid? +aria-keyshortcuts? +aria-label? +aria-labelledby? +aria-level? +aria-live? +aria-modal? +aria-multiline? +aria-multiselectable? +aria-orientation? +aria-owns? +aria-placeholder? +aria-posinset? +aria-pressed? +aria-readonly? +aria-relevant? +aria-required? +aria-roledescription? +aria-rowcount? +aria-rowindex? +aria-rowspan? +aria-selected? +aria-setsize? +aria-sort? +aria-valuemax? +aria-valuemin? +aria-valuenow? +aria-valuetext? +backdropBlur? +backdropBrightness? +backdropContrast? +backdropFilter? +backdropHueRotate? +backdropInvert? +backdropSaturate? +background? +backgroundAttachment? +backgroundBlendMode? +backgroundClip? +backgroundColor? +backgroundImage? +backgroundPosition? +backgroundRepeat? +backgroundSize? +bg? +bgAttachment? +bgBlendMode? +bgClip? +bgColor? +bgGradient? +bgImage? +bgImg? +bgPos? +bgPosition? +bgRepeat? +bgSize? +blendMode? +blur? +border? +borderBottom? +borderBottomColor? +borderBottomLeftRadius? +borderBottomRadius? +borderBottomRightRadius? +borderBottomStyle? +borderBottomWidth? +borderColor? +borderEndRadius? +borderInlineEndRadius? +borderInlineStartRadius? +borderLeft? +borderLeftColor? +borderLeftRadius? +borderLeftStyle? +borderLeftWidth? +borderRadius? +borderRight? +borderRightColor? +borderRightRadius? +borderRightStyle? +borderRightWidth? +borderStartRadius? +borderStyle? +borderTop? +borderTopColor? +borderTopLeftRadius? +borderTopRadius? +borderTopRightRadius? +borderTopStyle? +borderTopWidth? +borderWidth? +borderX? +borderY? +bottom? +boxDecorationBreak? +boxShadow? +boxSize? +boxSizing? +brightness? +clipPath? +color? +columnGap? +contrast? +css? +cursor? +display? +dropShadow? +fill? +filter? +flex? +flexBasis? +flexDir? +flexDirection? +flexFlow? +flexGrow? +flexShrink? +flexWrap? +float? +fontFamily? +fontSize? +fontStyle? +fontWeight? +gap? +gridArea? +gridAutoColumns? +gridAutoFlow? +gridAutoRows? +gridColumn? +gridColumnEnd? +gridColumnGap? +gridColumnStart? +gridGap? +gridRow? +gridRowEnd? +gridRowGap? +gridRowStart? +gridTemplate? +gridTemplateAreas? +gridTemplateColumns? +gridTemplateRows? +h? +height? +hideBelow? +hideFrom? +hueRotate? +inputMode? +inset? +insetEnd? +insetInlineEnd? +insetStart? +insetX? +insetY? +invert? +is? +isDisabled? +isInvalid? +isReadOnly? +isRequired? +isTruncated? +isolation? +justifyContent? +justifyItems? +justifySelf? +layerStyle? +left? +letterSpacing? +lineHeight? +listStyleImage? +listStyleImg? +listStylePos? +listStylePosition? +m? +margin? +marginBottom? +marginEnd? +marginInlineEnd? +marginInlineStart? +marginLeft? +marginRight? +marginStart? +marginTop? +marginX? +marginY? +maxH? +maxHeight? +maxW? +maxWidth? +mb? +me? +minH? +minHeight? +minW? +minWidth? +mixBlendMode? +ml? +mr? +ms? +mt? +mx? +my? +noOfLines? +objectFit? +objectPosition? +onKeyPress? +onKeyPressCapture? +opacity? +order? +outline? +outlineColor? +outlineOffset? +overflow? +overflowWrap? +overflowX? +overflowY? +overscroll? +overscrollBehavior? +overscrollBehaviorX? +overscrollBehaviorY? +overscrollX? +overscrollY? +p? +padding? +paddingBottom? +paddingEnd? +paddingInlineEnd? +paddingInlineStart? +paddingLeft? +paddingRight? +paddingStart? +paddingTop? +paddingX? +paddingY? +pb? +pe? +pl? +placeContent? +placeItems? +placeSelf? +pointerEvents? +pos? +position? +pr? +ps? +pt? +px? +py? +resize? +right? +ring? +ringColor? +ringInset? +ringOffset? +ringOffsetColor? +rotate? +rounded? +roundedBottom? +roundedBottomLeft? +roundedBottomRight? +roundedEnd? +roundedLeft? +roundedRight? +roundedStart? +roundedTop? +roundedTopLeft? +roundedTopRight? +rowGap? +saturate? +scale? +scaleX? +scaleY? +shadow? +skewX? +skewY? +srOnly? +stroke? +sx? +textAlign? +textColor? +textDecor? +textDecoration? +textDecorationColor? +textDecorationLine? +textDecorationStyle? +textDecorationThickness? +textIndent? +textOverflow? +textShadow? +textStyle? +textTransform? +textUnderlineOffset? +top? +transform? +transformOrigin? +transition? +transitionDelay? +transitionDuration? +transitionProperty? +transitionTimingFunction? +translateX? +translateY? +userSelect? +verticalAlign? +visibility? +w? +whiteSpace? +width? +willChange? +wordBreak? +zIndex? +
+
+

Properties

+
+

Optional Private __css

+
__css?: SystemStyleObject
+

Used for internal css management

+
+
+

Optional _active

+
_active?: SystemStyleObject
+

Styles for CSS Selector &:active

+
+
+

Optional _activeLink

+
_activeLink?: SystemStyleObject
+

Used to style the active link in a navigation +Styles for CSS Selector &[aria-current=page]

+
+
+

Optional _activeStep

+
_activeStep?: SystemStyleObject
+

Used to style the current step within a process +Styles for CSS Selector &[aria-current=step]

+
+
+

Optional _after

+
_after?: SystemStyleObject
+

Styles for CSS selector &::after

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _after={{content:`""` }}/>
+
+
+
+

Optional _autofill

+
_autofill?: SystemStyleObject
+

Styles for CSS Selector &:-webkit-autofill

+
+
+

Optional _before

+
_before?: SystemStyleObject
+

Styles for CSS selector &::before

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _before={{content:`""` }}/>
+
+
+
+

Optional _checked

+
_checked?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is true

+
    +
  • CSS selector &[aria-checked=true]
    • +
+
+
+

Optional _dark

+
_dark?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _disabled

+
_disabled?: SystemStyleObject
+

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

+
    +
  • &[aria-disabled=true]
    • +
  • &:disabled
    • +
  • &[data-disabled]
    • +
  • &[disabled]
    • +
+
+
+

Optional _empty

+
_empty?: SystemStyleObject
+

Styles for CSS selector &:empty

+
+
+

Optional _even

+
_even?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(even)

+
+
+

Optional _expanded

+
_expanded?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-expanded is true

+
    +
  • CSS selector &[aria-expanded=true]
    • +
+
+
+

Optional _first

+
_first?: SystemStyleObject
+

Styles for CSS Selector &:first-of-type

+
+
+

Optional _firstLetter

+
_firstLetter?: SystemStyleObject
+

Styles for CSS selector &::first-letter

+

NOTE: This selector is only applied for block-level elements and not preceded by an image or table.

+ +

Example

<Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
+
+
+
+

Optional _focus

+
_focus?: SystemStyleObject
+

Styles for CSS selector &:focus

+
+
+

Optional _focusVisible

+
_focusVisible?: SystemStyleObject
+

Styles to apply when this element has received focus via tabbing

+
    +
  • CSS Selector &:focus-visible
    • +
+
+
+

Optional _focusWithin

+
_focusWithin?: SystemStyleObject
+

Styles to apply when a child of this element has received focus

+
    +
  • CSS Selector &:focus-within
    • +
+
+
+

Optional _fullScreen

+
_fullScreen?: SystemStyleObject
+

Styles for CSS Selector &:fullscreen.

+
+
+

Optional _grabbed

+
_grabbed?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-grabbed is true

+
    +
  • CSS selector &[aria-grabbed=true]
    • +
+
+
+

Optional _groupActive

+
_groupActive?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is active

+
+
+

Optional _groupChecked

+
_groupChecked?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is checked

+
+
+

Optional _groupDisabled

+
_groupDisabled?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is disabled

+
+
+

Optional _groupFocus

+
_groupFocus?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is focused

+
+
+

Optional _groupFocusVisible

+
_groupFocusVisible?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has visible focus

+
+
+

Optional _groupFocusWithin

+
_groupFocusWithin?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has focus within

+
+
+

Optional _groupHover

+
_groupHover?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is hovered

+
+
+

Optional _groupInvalid

+
_groupInvalid?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is invalid

+
+
+

Optional _hidden

+
_hidden?: SystemStyleObject
+

Styles for CSS Selector [hidden=true]

+
+
+

Optional _highlighted

+
_highlighted?: SystemStyleObject
+

Styles for the highlighted state.

+
+
+

Optional _hover

+
_hover?: SystemStyleObject
+

Styles for CSS selector &:hover

+
+
+

Optional _indeterminate

+
_indeterminate?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is mixed

+
    +
  • CSS selector &[aria-checked=mixed]
    • +
+
+
+

Optional _invalid

+
_invalid?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-invalid is true

+
    +
  • CSS selector &[aria-invalid=true]
    • +
+
+
+

Optional _last

+
_last?: SystemStyleObject
+

Styles for CSS Selector &:last-of-type

+
+
+

Optional _light

+
_light?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _loading

+
_loading?: SystemStyleObject
+

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. +Useful for styling loading states

+
+
+

Optional _ltr

+
_ltr?: SystemStyleObject
+

Styles for CSS Selector [dir=ltr] & +It is applied when a parent element or this element has dir="ltr"

+
+
+

Optional _mediaDark

+
_mediaDark?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-color-scheme: dark) +It is used when the user has requested the system use a light or dark color theme.

+
+
+

Optional _mediaReduceMotion

+
_mediaReduceMotion?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-reduced-motion: reduce) +It is used when the user has requested the system to reduce the amount of animations.

+
+
+

Optional _notFirst

+
_notFirst?: SystemStyleObject
+

Styles for CSS Selector &:not(:first-of-type)

+
+
+

Optional _notLast

+
_notLast?: SystemStyleObject
+

Styles for CSS Selector &:not(:last-of-type)

+
+
+

Optional _odd

+
_odd?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(odd)

+
+
+

Optional _peerActive

+
_peerActive?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is active

+
+
+

Optional _peerChecked

+
_peerChecked?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is checked

+
+
+

Optional _peerDisabled

+
_peerDisabled?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is disabled

+
+
+

Optional _peerFocus

+
_peerFocus?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is focused

+
+
+

Optional _peerFocusVisible

+
_peerFocusVisible?: SystemStyleObject
+

Styles to apply when a sibling element with .peeror data-peer has visible focus

+
+
+

Optional _peerFocusWithin

+
_peerFocusWithin?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has focus within

+
+
+

Optional _peerHover

+
_peerHover?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is hovered

+
+
+

Optional _peerInvalid

+
_peerInvalid?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is invalid

+
+
+

Optional _peerPlaceholderShown

+
_peerPlaceholderShown?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

+
+
+

Optional _placeholder

+
_placeholder?: SystemStyleObject
+

Styles for CSS Selector &::placeholder.

+
+
+

Optional _placeholderShown

+
_placeholderShown?: SystemStyleObject
+

Styles for CSS Selector &:placeholder-shown.

+
+
+

Optional _pressed

+
_pressed?: SystemStyleObject
+

Styles for CSS Selector &[aria-pressed=true] +Typically used to style the current "pressed" state of toggle buttons

+
+
+

Optional _readOnly

+
_readOnly?: SystemStyleObject
+

Styles for CSS Selector &:readonly

+
+
+

Optional _rtl

+
_rtl?: SystemStyleObject
+

Styles for CSS Selector [dir=rtl] & +It is applied when a parent element or this element has dir="rtl"

+
+
+

Optional _selected

+
_selected?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-selected is true

+
    +
  • CSS selector &[aria-selected=true]
    • +
+
+
+

Optional _selection

+
_selection?: SystemStyleObject
+

Styles for CSS Selector &::selection

+
+
+

Optional _valid

+
_valid?: SystemStyleObject
+

Styles for the valid state

+
    +
  • CSS selector &[data-valid], &[data-state=valid]
    • +
+
+
+

Optional _visited

+
_visited?: SystemStyleObject
+

Styles for CSS Selector &:visited

+
+
+

Optional alignContent

+
alignContent?: ResponsiveValue<AlignContent>
+

The CSS align-content property.

+

It defines the distribution of space between and around +content items along a flexbox cross-axis or a grid's block axis.

+ +

See

Mozilla Docs

+
+
+

Optional alignItems

+
alignItems?: ResponsiveValue<AlignItems>
+

The CSS align-items property.

+

It defines the align-self value on all direct children as a group.

+
    +
  • In Flexbox, it controls the alignment of items on the Cross Axis.
    • +
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
    • +
+ +

See

Mozilla Docs

+
+
+

Optional alignSelf

+
alignSelf?: ResponsiveValue<AlignSelf>
+

The CSS align-self property.

+

It works like align-items, but applies only to a +single flexbox item, instead of all of them.

+ +

See

Mozilla Docs

+
+
+

Optional animation

+
animation?: ResponsiveValue<Animation<string & {}>>
+

The CSS animation property

+
+
+

Optional appearance

+
appearance?: ResponsiveValue<Appearance>
+

The CSS appearance property

+
+
+

Optional apply

+
apply?: ResponsiveValue<string>
+

Apply theme-aware style objects in theme

+ +

Example

<Box apply="styles.h3">This is a div</Box>
+
+

This will apply styles defined in theme.styles.h3

+
+
+

Optional aria-activedescendant

+
aria-activedescendant?: string
+

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

+
+
+

Optional aria-atomic

+
aria-atomic?: Booleanish
+

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

+
+
+

Optional aria-autocomplete

+
aria-autocomplete?: "none" | "both" | "inline" | "list"
+

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be +presented if they are made.

+
+
+

Optional aria-busy

+
aria-busy?: Booleanish
+

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

+
+
+

Optional aria-checked

+
aria-checked?: boolean | "true" | "false" | "mixed"
+

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

+ +

See

    +
  • aria-pressed
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-colcount

+
aria-colcount?: number
+

Defines the total number of columns in a table, grid, or treegrid.

+ +

See

aria-colindex.

+
+
+

Optional aria-colindex

+
aria-colindex?: number
+

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

+ +

See

    +
  • aria-colcount
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-colspan

+
aria-colspan?: number
+

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-colindex
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-controls

+
aria-controls?: string
+

Identifies the element (or elements) whose contents or presence are controlled by the current element.

+ +

See

aria-owns.

+
+
+

Optional aria-current

+
aria-current?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"
+

Indicates the element that represents the current item within a container or set of related elements.

+
+
+

Optional aria-describedby

+
aria-describedby?: string
+

Identifies the element (or elements) that describes the object.

+ +

See

aria-labelledby

+
+
+

Optional aria-details

+
aria-details?: string
+

Identifies the element that provides a detailed, extended description for the object.

+ +

See

aria-describedby.

+
+
+

Optional aria-disabled

+
aria-disabled?: Booleanish
+

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

+ +

See

    +
  • aria-hidden
    • +
  • aria-readonly.
    • +
+
+
+

Optional aria-dropeffect

+
aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"
+

Indicates what functions can be performed when a dragged object is released on the drop target.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-errormessage

+
aria-errormessage?: string
+

Identifies the element that provides an error message for the object.

+ +

See

    +
  • aria-invalid
    • +
  • aria-describedby.
    • +
+
+
+

Optional aria-expanded

+
aria-expanded?: Booleanish
+

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

+
+
+

Optional aria-flowto

+
aria-flowto?: string
+

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, +allows assistive technology to override the general default of reading in document source order.

+
+
+

Optional aria-grabbed

+
aria-grabbed?: Booleanish
+

Indicates an element's "grabbed" state in a drag-and-drop operation.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-haspopup

+
aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "true" | "false" | "tree"
+

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

+
+
+

Optional aria-hidden

+
aria-hidden?: Booleanish
+

Indicates whether the element is exposed to an accessibility API.

+ +

See

aria-disabled.

+
+
+

Optional aria-invalid

+
aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"
+

Indicates the entered value does not conform to the format expected by the application.

+ +

See

aria-errormessage.

+
+
+

Optional aria-keyshortcuts

+
aria-keyshortcuts?: string
+

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

+
+
+

Optional aria-label

+
aria-label?: string
+

Defines a string value that labels the current element.

+ +

See

aria-labelledby.

+
+
+

Optional aria-labelledby

+
aria-labelledby?: string
+

Identifies the element (or elements) that labels the current element.

+ +

See

aria-describedby.

+
+
+

Optional aria-level

+
aria-level?: number
+

Defines the hierarchical level of an element within a structure.

+
+
+

Optional aria-live

+
aria-live?: "off" | "assertive" | "polite"
+

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

+
+
+

Optional aria-modal

+
aria-modal?: Booleanish
+

Indicates whether an element is modal when displayed.

+
+
+

Optional aria-multiline

+
aria-multiline?: Booleanish
+

Indicates whether a text box accepts multiple lines of input or only a single line.

+
+
+

Optional aria-multiselectable

+
aria-multiselectable?: Booleanish
+

Indicates that the user may select more than one item from the current selectable descendants.

+
+
+

Optional aria-orientation

+
aria-orientation?: "horizontal" | "vertical"
+

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

+
+
+

Optional aria-owns

+
aria-owns?: string
+

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship +between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

+ +

See

aria-controls.

+
+
+

Optional aria-placeholder

+
aria-placeholder?: string
+

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. +A hint could be a sample value or a brief description of the expected format.

+
+
+

Optional aria-posinset

+
aria-posinset?: number
+

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-setsize.

+
+
+

Optional aria-pressed

+
aria-pressed?: boolean | "true" | "false" | "mixed"
+

Indicates the current "pressed" state of toggle buttons.

+ +

See

    +
  • aria-checked
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-readonly

+
aria-readonly?: Booleanish
+

Indicates that the element is not editable, but is otherwise operable.

+ +

See

aria-disabled.

+
+
+

Optional aria-relevant

+
aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
+

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

+ +

See

aria-atomic.

+
+
+

Optional aria-required

+
aria-required?: Booleanish
+

Indicates that user input is required on the element before a form may be submitted.

+
+
+

Optional aria-roledescription

+
aria-roledescription?: string
+

Defines a human-readable, author-localized description for the role of an element.

+
+
+

Optional aria-rowcount

+
aria-rowcount?: number
+

Defines the total number of rows in a table, grid, or treegrid.

+ +

See

aria-rowindex.

+
+
+

Optional aria-rowindex

+
aria-rowindex?: number
+

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowcount
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-rowspan

+
aria-rowspan?: number
+

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowindex
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-selected

+
aria-selected?: Booleanish
+

Indicates the current "selected" state of various widgets.

+ +

See

    +
  • aria-checked
    • +
  • aria-pressed.
    • +
+
+
+

Optional aria-setsize

+
aria-setsize?: number
+

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-posinset.

+
+
+

Optional aria-sort

+
aria-sort?: "none" | "ascending" | "descending" | "other"
+

Indicates if items in a table or grid are sorted in ascending or descending order.

+
+
+

Optional aria-valuemax

+
aria-valuemax?: number
+

Defines the maximum allowed value for a range widget.

+
+
+

Optional aria-valuemin

+
aria-valuemin?: number
+

Defines the minimum allowed value for a range widget.

+
+
+

Optional aria-valuenow

+
aria-valuenow?: number
+

Defines the current value for a range widget.

+ +

See

aria-valuetext.

+
+
+

Optional aria-valuetext

+
aria-valuetext?: string
+

Defines the human readable text alternative of aria-valuenow for a range widget.

+
+
+

Optional backdropBlur

+
backdropBlur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the backdrop-blur filter value of an element. +Value is assigned to --chakra-backdrop-blur css variable

+
+
+

Optional backdropBrightness

+
backdropBrightness?: ResponsiveValue<Length>
+

Sets the backdrop-brightness filter value of an element. +Value is assigned to --chakra-backdrop-brightness css variable

+
+
+

Optional backdropContrast

+
backdropContrast?: ResponsiveValue<Length>
+

Sets the backdrop-contrast filter value of an element. +Value is assigned to --chakra-backdrop-contrast css variable

+
+
+

Optional backdropFilter

+
backdropFilter?: ResponsiveValue<"auto" | BackdropFilter>
+

The CSS backdrop-filter property. When set to auto, you allow +Chakra UI to define the color based on the backdrop filter style props +(backdropBlur, backdropSaturate, etc.)

+
+
+

Optional backdropHueRotate

+
backdropHueRotate?: ResponsiveValue<Length>
+

Sets the backdrop-hue-rotate filter value of an element. +Value is assigned to --chakra-backdrop-hue-rotate css variable

+
+
+

Optional backdropInvert

+
backdropInvert?: ResponsiveValue<Length>
+

Sets the backdrop-invert filter value of an element. +Value is assigned to --chakra-backdrop-invert css variable

+
+
+

Optional backdropSaturate

+
backdropSaturate?: ResponsiveValue<Length>
+

Sets the backdrop-saturate filter value of an element. +Value is assigned to --chakra-backdrop-saturate css variable

+
+
+

Optional background

+
background?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional backgroundAttachment

+
backgroundAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional backgroundBlendMode

+
backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional backgroundClip

+
backgroundClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional backgroundColor

+
backgroundColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional backgroundImage

+
backgroundImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional backgroundPosition

+
backgroundPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional backgroundRepeat

+
backgroundRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional backgroundSize

+
backgroundSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional bg

+
bg?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional bgAttachment

+
bgAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional bgBlendMode

+
bgBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional bgClip

+
bgClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional bgColor

+
bgColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional bgGradient

+
bgGradient?: ResponsiveValue<string | string & {}>
+

The background-gradient shorthand

+
+
+

Optional bgImage

+
bgImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgImg

+
bgImg?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgPos

+
bgPos?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgPosition

+
bgPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgRepeat

+
bgRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional bgSize

+
bgSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional blendMode

+
blendMode?: ResponsiveValue<MixBlendMode>
+

The blend-mode property

+
+
+

Optional blur

+
blur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the blur filter value of an element. +Value is assigned to --chakra-filter css variable

+
+
+

Optional border

+
border?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border property

+
+
+

Optional borderBottom

+
borderBottom?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-bottom property

+
+
+

Optional borderBottomColor

+
borderBottomColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderBottomColor>
+

The CSS border-bottom-color property

+
+
+

Optional borderBottomLeftRadius

+
borderBottomLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional borderBottomRadius

+
borderBottomRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional borderBottomRightRadius

+
borderBottomRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional borderBottomStyle

+
borderBottomStyle?: ResponsiveValue<BorderBottomStyle>
+

The CSS border-bottom-style property

+
+
+

Optional borderBottomWidth

+
borderBottomWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-bottom-width property

+
+
+

Optional borderColor

+
borderColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-color property

+
+
+

Optional borderEndRadius

+
borderEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineEndRadius

+
borderInlineEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderInlineEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineStartRadius

+
borderInlineStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderInlineStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderLeft

+
borderLeft?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-left property

+
+
+

Optional borderLeftColor

+
borderLeftColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderLeftColor>
+

The CSS border-left-color property

+
+
+

Optional borderLeftRadius

+
borderLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional borderLeftStyle

+
borderLeftStyle?: ResponsiveValue<BorderLeftStyle>
+

The CSS border-left-style property

+
+
+

Optional borderLeftWidth

+
borderLeftWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-left-width property

+
+
+

Optional borderRadius

+
borderRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional borderRight

+
borderRight?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right property

+
+
+

Optional borderRightColor

+
borderRightColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderRightColor>
+

The CSS border-right-color property

+
+
+

Optional borderRightRadius

+
borderRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional borderRightStyle

+
borderRightStyle?: ResponsiveValue<BorderRightStyle>
+

The CSS border-right-styles property

+
+
+

Optional borderRightWidth

+
borderRightWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-right-width property

+
+
+

Optional borderStartRadius

+
borderStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderStyle

+
borderStyle?: ResponsiveValue<BorderStyle>
+

The CSS border-style property

+
+
+

Optional borderTop

+
borderTop?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top property

+
+
+

Optional borderTopColor

+
borderTopColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-top-color property

+
+
+

Optional borderTopLeftRadius

+
borderTopLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional borderTopRadius

+
borderTopRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional borderTopRightRadius

+
borderTopRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional borderTopStyle

+
borderTopStyle?: ResponsiveValue<BorderTopStyle>
+

The CSS border-top-style property

+
+
+

Optional borderTopWidth

+
borderTopWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-top-width property

+
+
+

Optional borderWidth

+
borderWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-width property

+
+
+

Optional borderX

+
borderX?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right and border-left property

+
+
+

Optional borderY

+
borderY?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top and border-bottom property

+
+
+

Optional bottom

+
bottom?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS bottom property

+
+
+

Optional boxDecorationBreak

+
boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>
+

The CSS box-decoration property

+
+
+

Optional boxShadow

+
boxShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional boxSize

+
boxSize?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width and height property

+
+
+

Optional boxSizing

+
boxSizing?: BoxSizing
+

The CSS box-sizing property

+
+
+

Optional brightness

+
brightness?: ResponsiveValue<Length>
+

Sets the brightness filter value of an element. +Value is assigned to --chakra-brightness css variable

+
+
+

Optional clipPath

+
clipPath?: ResponsiveValue<ClipPath>
+

The CSS clip-path property.

+

It creates a clipping region that sets what part of an element should be shown.

+
+
+

Optional color

+
color?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional columnGap

+
columnGap?: ResponsiveValue<ColumnGap<Length>>
+

The CSS column-gap property.

+

It sets the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional contrast

+
contrast?: ResponsiveValue<Length>
+

Sets the contrast filter value of an element. +Value is assigned to --chakra-contrast css variable

+
+
+

Optional css

+
css?: Interpolation<{}>
+

The emotion's css style object

+
+
+

Optional cursor

+
cursor?: ResponsiveValue<Cursor>
+

The CSS cursor property

+
+
+

Optional display

+
display?: ResponsiveValue<Display>
+

The CSS display property

+
+
+

Optional dropShadow

+
dropShadow?: ResponsiveValue<"base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

Sets the drop-shadow filter value of an element. +Value is assigned to --chakra-drop-shadow css variable

+
+
+

Optional fill

+
fill?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS fill property for icon svgs and paths

+
+
+

Optional filter

+
filter?: ResponsiveValue<Filter | "auto">
+

The CSS filter property. When set to auto, you allow +Chakra UI to define the color based on the filter style props +(blur, saturate, etc.)

+
+
+

Optional flex

+
flex?: ResponsiveValue<Flex<Length>>
+

The CSS flex property.

+

It defines how a flex item will grow or shrink +to fit the space available in its flex container.

+ +

See

Mozilla Docs

+
+
+

Optional flexBasis

+
flexBasis?: ResponsiveValue<FlexBasis<Length>>
+

The CSS flex-basis property.

+

It defines the initial main size of a flex item.

+ +

See

Mozilla Docs

+
+
+

Optional flexDir

+
flexDir?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexDirection

+
flexDirection?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexFlow

+
flexFlow?: ResponsiveValue<FlexFlow>
+

The CSS flex-flow property.

+

It is a shorthand property for flex-direction and flex-wrap. +It specifies the direction of a flex container, as well as its wrapping behavior.

+ +

See

Mozilla Docs

+
+
+

Optional flexGrow

+
flexGrow?: ResponsiveValue<FlexGrow>
+

The CSS flex-grow property.

+

It defines how much a flexbox item should grow +if there's space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexShrink

+
flexShrink?: ResponsiveValue<FlexShrink>
+

The CSS flex-shrink property.

+

It defines how much a flexbox item should shrink +if there's not enough space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexWrap

+
flexWrap?: ResponsiveValue<FlexWrap>
+

The CSS flex-wrap property.

+

It defines whether flex items are forced onto one line or +can wrap onto multiple lines. If wrapping is allowed, +it sets the direction that lines are stacked.

+ +

See

Mozilla Docs

+
+
+

Optional float

+
float?: ResponsiveValue<Float>
+

The CSS float property

+
+
+

Optional fontFamily

+
fontFamily?: ResponsiveValue<"body" | FontFamily | "heading" | "mono">
+

The CSS font-family property

+
+
+

Optional fontSize

+
fontSize?: ResponsiveValue<number | "small" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl">
+

The CSS font-size property

+
+
+

Optional fontStyle

+
fontStyle?: ResponsiveValue<FontStyle>
+

The CSS font-style property

+
+
+

Optional fontWeight

+
fontWeight?: ResponsiveValue<number | "bold" | string & {} | "black" | "normal" | "hairline" | "thin" | "light" | "medium" | "semibold" | "extrabold">
+

The CSS font-weight property

+
+
+

Optional gap

+
gap?: ResponsiveValue<Gap<Length>>
+

The CSS gap property.

+

It defines the gap between items in both flex and +grid contexts.

+ +

See

Mozilla Docs

+
+
+

Optional gridArea

+
gridArea?: ResponsiveValue<GridArea>
+

The CSS grid-areas property.

+

It specifies a grid item’s size and location within a grid by +contributing a line, a span, or nothing (automatic) +to its grid placement, thereby specifying the edges of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoColumns

+
gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>
+

The CSS grid-auto-columns property.

+

It specifies the size of an implicitly-created grid column track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoFlow

+
gridAutoFlow?: ResponsiveValue<GridAutoFlow>
+

The CSS grid-auto-flow property

+

It controls how the auto-placement algorithm works, +specifying exactly how auto-placed items get flowed into the grid.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoRows

+
gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>
+

The CSS grid-auto-rows property.

+

It specifies the size of an implicitly-created grid row track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumn

+
gridColumn?: ResponsiveValue<GridColumn>
+

The CSS grid-column property.

+

It specifies a grid item's size and location within a grid column +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnEnd

+
gridColumnEnd?: ResponsiveValue<GridColumnEnd>
+

The CSS grid-column property

+

It specifies a grid item’s end position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the block-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnGap

+
gridColumnGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-column-gap property.

+

It defines the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnStart

+
gridColumnStart?: ResponsiveValue<GridColumnStart>
+

The CSS grid-column property.

+

It specifies a grid item’s start position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement

+ +

See

Mozilla Docs

+
+
+

Optional gridGap

+
gridGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-gap property.

+

It defines the gaps (gutters) between rows and columns

+ +

See

Mozilla Docs

+
+
+

Optional gridRow

+
gridRow?: ResponsiveValue<GridRow>
+

The CSS grid-row property

+

It specifies a grid item’s size and location within the grid row +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowEnd

+
gridRowEnd?: ResponsiveValue<GridRowEnd>
+

The CSS grid-row-end property

+

It specifies a grid item’s end position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowGap

+
gridRowGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-row-gap property.

+

It defines the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowStart

+
gridRowStart?: ResponsiveValue<GridRowStart>
+

The CSS grid-row-start property

+

It specifies a grid item’s start position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplate

+
gridTemplate?: ResponsiveValue<GridTemplate>
+

The CSS grid-template property.

+

It is a shorthand property for defining grid columns, rows, and areas.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateAreas

+
gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>
+

The CSS grid-template-areas property.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateColumns

+
gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>
+

The CSS grid-template-columns property

+

It defines the line names and track sizing functions of the grid columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateRows

+
gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>
+

The CSS grid-template-rows property.

+

It defines the line names and track sizing functions of the grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional h

+
h?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional height

+
height?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional hideBelow

+
hideBelow?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element below the specified breakpoint

+
+
+

Optional hideFrom

+
hideFrom?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element from the specified breakpoint and up

+
+
+

Optional hueRotate

+
hueRotate?: ResponsiveValue<Length>
+

Sets the hue-rotate filter value of an element. +Value is assigned to --chakra-hue-rotate css variable

+
+
+

Optional inputMode

+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
+

Hints at the type of data that might be entered by the user while editing the element or its contents

+ +

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

+
+
+

Optional inset

+
inset?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, right, top, bottom property

+
+
+

Optional insetEnd

+
insetEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetEnd is equivalent to right. +When the direction is rtl, insetEnd is equivalent to left.

+
+
+

Optional insetInlineEnd

+
insetInlineEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetInlineEnd is equivalent to right. +When the direction is rtl, insetInlineEnd is equivalent to left.

+
+
+

Optional insetStart

+
insetStart?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is start, end is equivalent to left. +When the direction is start, end is equivalent to right.

+
+
+

Optional insetX

+
insetX?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, and right property

+
+
+

Optional insetY

+
insetY?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top, and bottom property

+
+
+

Optional invert

+
invert?: ResponsiveValue<Length>
+

Sets the invert filter value of an element. +Value is assigned to --chakra-invert css variable

+
+
+

Optional is

+
is?: string
+

Specify that a standard HTML element should behave like a defined custom built-in element

+ +

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

+
+
+

Optional isDisabled

+
isDisabled?: boolean
+

If true, the form control will be disabled. This has 2 side effects:

+
    +
  • The FormLabel will have data-disabled attribute
    • +
  • The form element (e.g, Input) will be disabled
    • +
+ +

Default

false

+
+
+

Optional isInvalid

+
isInvalid?: boolean
+

If true, the form control will be invalid. This has 2 side effects:

+
    +
  • The FormLabel and FormErrorIcon will have data-invalid set to true
    • +
  • The form element (e.g, Input) will have aria-invalid set to true
    • +
+ +

Default

false

+
+
+

Optional isReadOnly

+
isReadOnly?: boolean
+

If true, the form control will be readonly

+ +

Default

false

+
+
+

Optional isRequired

+
isRequired?: boolean
+

If true, the form control will be required. This has 2 side effects:

+
    +
  • The FormLabel will show a required indicator
    • +
  • The form element (e.g, Input) will have aria-required set to true
    • +
+ +

Default

false

+
+
+

Optional isTruncated

+
isTruncated?: boolean
+

If true, it clamps truncate a text after one line.

+
+
+

Optional isolation

+
isolation?: ResponsiveValue<Isolation>
+

The CSS isolation property

+
+
+

Optional justifyContent

+
justifyContent?: ResponsiveValue<JustifyContent>
+

The CSS justify-content property.

+

It defines how the browser distributes space between and around content items +along the main-axis of a flex container, and the inline axis of a grid container.

+ +

See

Mozilla Docs

+
+
+

Optional justifyItems

+
justifyItems?: ResponsiveValue<JustifyItems>
+

The CSS justify-items property.

+

It defines the default justify-self for all items of the box, +giving them all a default way of justifying each box +along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional justifySelf

+
justifySelf?: ResponsiveValue<JustifySelf>
+

The CSS justify-self property.

+

It defines the way a box is justified inside its +alignment container along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional layerStyle

+
layerStyle?: ResponsiveValue<string & {}>
+

The layer style object to apply. +Note: Styles must be located in theme.layerStyles

+
+
+

Optional left

+
left?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left property

+
+
+

Optional letterSpacing

+
letterSpacing?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "tighter" | "tight" | "wide" | "wider" | "widest">
+

The CSS letter-spacing property

+
+
+

Optional lineHeight

+
lineHeight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "none" | "normal" | number & {} | "shorter" | "short" | "tall" | "taller">
+

The CSS line-height property

+
+
+

Optional listStyleImage

+
listStyleImage?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStyleImg

+
listStyleImg?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStylePos

+
listStylePos?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional listStylePosition

+
listStylePosition?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional m

+
m?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional margin

+
margin?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional marginBottom

+
marginBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional marginEnd

+
marginEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginEnd is equivalent to marginRight. +When direction is rtl, marginEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineEnd

+
marginInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineEnd is equivalent to marginRight. +When direction is rtl, marginInlineEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineStart

+
marginInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineStart is equivalent to marginLeft. +When direction is rtl, marginInlineStart is equivalent to marginRight.

+
+
+

Optional marginLeft

+
marginLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional marginRight

+
marginRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional marginStart

+
marginStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginStart is equivalent to marginLeft. +When direction is rtl, marginStart is equivalent to marginRight.

+
+
+

Optional marginTop

+
marginTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional marginX

+
marginX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional marginY

+
marginY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

Optional maxH

+
maxH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxHeight

+
maxHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxW

+
maxW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional maxWidth

+
maxWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional mb

+
mb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional me

+
me?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, me is equivalent to marginRight. +When direction is rtl, me is equivalent to marginLeft.

+
+
+

Optional minH

+
minH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minHeight

+
minHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minW

+
minW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional minWidth

+
minWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional mixBlendMode

+
mixBlendMode?: ResponsiveValue<MixBlendMode>
+

The mix-blend-mode property

+
+
+

Optional ml

+
ml?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional mr

+
mr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional ms

+
ms?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, ms is equivalent to marginLeft. +When direction is rtl, ms is equivalent to marginRight.

+
+
+

Optional mt

+
mt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional mx

+
mx?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional my

+
my?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

Optional noOfLines

+
noOfLines?: ResponsiveValue<number>
+

Used to truncate text at a specific number of lines

+
+
+

Optional objectFit

+
objectFit?: ResponsiveValue<ObjectFit>
+

The CSS object-fit property

+
+
+

Optional objectPosition

+
objectPosition?: ResponsiveValue<ObjectPosition<Length>>
+

The CSS object-position property

+
+
+

Optional onKeyPress

+
onKeyPress?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional onKeyPressCapture

+
onKeyPressCapture?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional opacity

+
opacity?: ResponsiveValue<Opacity>
+

The CSS opacity property

+
+
+

Optional order

+
order?: ResponsiveValue<Order>
+

The CSS order property.

+

It defines the order to lay out an item in a flex or grid container.

+ +

See

Mozilla Docs

+
+
+

Optional outline

+
outline?: ResponsiveValue<Outline<Length>>
+

The CSS outline property

+
+
+

Optional outlineColor

+
outlineColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS outline-color property

+
+
+

Optional outlineOffset

+
outlineOffset?: ResponsiveValue<OutlineOffset<Length>>
+

The CSS outline-offset property

+
+
+

Optional overflow

+
overflow?: ResponsiveValue<Overflow>
+

The CSS overflow property

+
+
+

Optional overflowWrap

+
overflowWrap?: ResponsiveValue<OverflowWrap>
+

The CSS overflow-wrap property

+
+
+

Optional overflowX

+
overflowX?: ResponsiveValue<OverflowX>
+

The CSS overflow-x property

+
+
+

Optional overflowY

+
overflowY?: ResponsiveValue<OverflowY>
+

The CSS overflow-y property

+
+
+

Optional overscroll

+
overscroll?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehavior

+
overscrollBehavior?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehaviorX

+
overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollBehaviorY

+
overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional overscrollX

+
overscrollX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollY

+
overscrollY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional p

+
p?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional padding

+
padding?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional paddingBottom

+
paddingBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional paddingEnd

+
paddingEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingEnd is equivalent to paddingRight. +When direction is rtl, paddingEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineEnd

+
paddingInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineEnd is equivalent to paddingRight. +When direction is rtl, paddingInlineEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineStart

+
paddingInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineStart is equivalent to paddingLeft. +When direction is rtl, paddingInlineStart is equivalent to paddingRight.

+
+
+

Optional paddingLeft

+
paddingLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional paddingRight

+
paddingRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional paddingStart

+
paddingStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingStart is equivalent to paddingLeft. +When direction is rtl, paddingStart is equivalent to paddingRight.

+
+
+

Optional paddingTop

+
paddingTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional paddingX

+
paddingX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional paddingY

+
paddingY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional pb

+
pb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional pe

+
pe?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, pe is equivalent to paddingRight. +When direction is rtl, pe is equivalent to paddingLeft.

+
+
+

Optional pl

+
pl?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional placeContent

+
placeContent?: ResponsiveValue<PlaceContent>
+

The CSS place-content property.

+

It allows you to align content along both the block and +inline directions at once (i.e. the align-content and justify-content properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional placeItems

+
placeItems?: ResponsiveValue<PlaceItems>
+

The CSS place-items property.

+

It allows you to align items along both the block and +inline directions at once (i.e. the align-items and justify-items properties) +in a relevant layout system such as Grid or Flex.

+ +

See

Mozilla Docs

+
+
+

Optional placeSelf

+
placeSelf?: ResponsiveValue<PlaceSelf>
+

The CSS place-self property.

+

It allows you to align an individual item in both the block and +inline directions at once (i.e. the align-self and justify-self properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional pointerEvents

+
pointerEvents?: ResponsiveValue<PointerEvents>
+

The CSS pointer-events property

+
+
+

Optional pos

+
pos?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional position

+
position?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional pr

+
pr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional ps

+
ps?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, ps is equivalent to paddingLeft. +When direction is rtl, ps is equivalent to paddingRight.

+
+
+

Optional pt

+
pt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional px

+
px?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional py

+
py?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional resize

+
resize?: ResponsiveValue<Resize>
+

The CSS resize property

+
+
+

Optional right

+
right?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS right property

+
+
+

Optional ring

+
ring?: ResponsiveValue<Length>
+

Creates outline rings with CSS box-shadow property

+
+
+

Optional ringColor

+
ringColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the outline ring

+
+
+

Optional ringInset

+
ringInset?: ResponsiveValue<"inset" | "none">
+

If the outline ring should an inset

+
+
+

Optional ringOffset

+
ringOffset?: ResponsiveValue<Length>
+

The thickness of the offset shadow when using outline rings

+
+
+

Optional ringOffsetColor

+
ringOffsetColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the offset shadow when adding outline rings

+
+
+

Optional rotate

+
rotate?: ResponsiveValue<Length>
+

Sets the rotation value of the element

+
+
+

Optional rounded

+
rounded?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional roundedBottom

+
roundedBottom?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional roundedBottomLeft

+
roundedBottomLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional roundedBottomRight

+
roundedBottomRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional roundedEnd

+
roundedEnd?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedLeft

+
roundedLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional roundedRight

+
roundedRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional roundedStart

+
roundedStart?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedTop

+
roundedTop?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional roundedTopLeft

+
roundedTopLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional roundedTopRight

+
roundedTopRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional rowGap

+
rowGap?: ResponsiveValue<RowGap<Length>>
+

The CSS row-gap property.

+

It sets the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional saturate

+
saturate?: ResponsiveValue<Length>
+

Sets the saturation filter value of an element. +Value is assigned to --chakra-saturate css variable

+
+
+

Optional scale

+
scale?: ResponsiveValue<Length>
+

Sets the scale value of the element

+
+
+

Optional scaleX

+
scaleX?: ResponsiveValue<Length>
+

Scale value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-x
    • +
+
+
+

Optional scaleY

+
scaleY?: ResponsiveValue<Length>
+

Scale value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-y
    • +
+
+
+

Optional shadow

+
shadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional skewX

+
skewX?: ResponsiveValue<Length>
+

Skew value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-x
    • +
+
+
+

Optional skewY

+
skewY?: ResponsiveValue<Length>
+

Skew value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-y
    • +
+
+
+

Optional srOnly

+
srOnly?: true | "focusable"
+

If true, hide an element visually without hiding it from screen readers.

+

If focusable, the sr-only styles will be undone, making the element visible +to sighted users as well as screen readers.

+
+
+

Optional stroke

+
stroke?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS stroke property for icon svgs and paths

+
+
+

Optional sx

+
sx?: SystemStyleObject
+

Used to pass theme-aware style props. +NB: This is the public API for user-land

+
+
+

Optional textAlign

+
textAlign?: ResponsiveValue<TextAlign>
+

The CSS text-align property

+
+
+

Optional textColor

+
textColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional textDecor

+
textDecor?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecoration

+
textDecoration?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecorationColor

+
textDecorationColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | TextDecorationColor>
+

The CSS text-decoration-color property

+
+
+

Optional textDecorationLine

+
textDecorationLine?: ResponsiveValue<TextDecorationLine>
+

The CSS text-decoration-line property

+
+
+

Optional textDecorationStyle

+
textDecorationStyle?: ResponsiveValue<TextDecorationStyle>
+

The CSS text-decoration-style property

+
+
+

Optional textDecorationThickness

+
textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>
+

The CSS text-decoration-thickness property

+
+
+

Optional textIndent

+
textIndent?: ResponsiveValue<TextIndent<0 | string & {}>>
+

The CSS text-indent property

+
+
+

Optional textOverflow

+
textOverflow?: ResponsiveValue<TextOverflow>
+

The CSS text-overflow property

+
+
+

Optional textShadow

+
textShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "inner" | "dark-lg" | TextShadow>
+

The text-shadow property

+
+
+

Optional textStyle

+
textStyle?: ResponsiveValue<string & {}>
+

The text style object to apply. +Note: Styles must be located in theme.textStyles

+
+
+

Optional textTransform

+
textTransform?: ResponsiveValue<TextTransform>
+

The CSS text-transform property

+
+
+

Optional textUnderlineOffset

+
textUnderlineOffset?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto">
+

The CSS text-underline-offset property

+
+
+

Optional top

+
top?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top property

+
+
+

Optional transform

+
transform?: ResponsiveValue<"auto" | Transform | "auto-gpu">
+

The CSS transform property

+
+
+

Optional transformOrigin

+
transformOrigin?: ResponsiveValue<number | "center" | "px" | "top" | "right" | "bottom" | "left" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS transform-origin property

+
+
+

Optional transition

+
transition?: ResponsiveValue<Transition<string & {}>>
+

The CSS transition property

+
+
+

Optional transitionDelay

+
transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>
+

The CSS transition-delay property

+
+
+

Optional transitionDuration

+
transitionDuration?: ResponsiveValue<string>
+

The CSS transition-duration property

+
+
+

Optional transitionProperty

+
transitionProperty?: ResponsiveValue<TransitionProperty>
+

The CSS transition-property property

+
+
+

Optional transitionTimingFunction

+
transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>
+

The CSS transition-timing-function property

+
+
+

Optional translateX

+
translateX?: ResponsiveValue<Length>
+

Translate value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-x
    • +
+
+
+

Optional translateY

+
translateY?: ResponsiveValue<Length>
+

Translate value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-y
    • +
+
+
+

Optional userSelect

+
userSelect?: ResponsiveValue<UserSelect>
+

The CSS user-select property

+
+
+

Optional verticalAlign

+
verticalAlign?: ResponsiveValue<VerticalAlign<Length>>
+

The CSS vertical-align property

+
+
+

Optional visibility

+
visibility?: ResponsiveValue<Visibility>
+

The CSS visibility property

+
+
+

Optional w

+
w?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional whiteSpace

+
whiteSpace?: ResponsiveValue<WhiteSpace>
+

The CSS white-space property

+
+
+

Optional width

+
width?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional willChange

+
willChange?: ResponsiveValue<WillChange>
+

The CSS will-change property

+
+
+

Optional wordBreak

+
wordBreak?: ResponsiveValue<WordBreak>
+

The CSS word-break property

+
+
+

Optional zIndex

+
zIndex?: ResponsiveValue<"base" | "overlay" | ZIndex | "hide" | "docked" | "dropdown" | "sticky" | "banner" | "modal" | "popover" | "skipLink" | "toast" | "tooltip">
+

The CSS z-index property

+
+
+
+
+

Settings

 +
+
+

Member Visibility

+
    +
    • +
    • +
    • +
    • +
    • +
+
+

Theme

+ +
+
+

Generated using TypeDoc

+
\ No newline at end of file diff --git a/docs/interfaces/CheckboxContainerProps.html b/docs/interfaces/CheckboxContainerProps.html new file mode 100644 index 0000000..7dbb0f2 --- /dev/null +++ b/docs/interfaces/CheckboxContainerProps.html @@ -0,0 +1,4497 @@ +CheckboxContainerProps | react-hook-form-chakra
+
+ +
+
+
+
+ +

Interface CheckboxContainerProps

+
+

This component wraps CheckboxControl to build groups of checkboxes. +If you need a standalone checkbox please use CheckboxSingleControl

+ +

Property

Chakra StackProps

+
+
+

Hierarchy

+
+
+
+
+ +
+
+

Properties

+
__css? +_active? +_activeLink? +_activeStep? +_after? +_autofill? +_before? +_checked? +_dark? +_disabled? +_empty? +_even? +_expanded? +_first? +_firstLetter? +_focus? +_focusVisible? +_focusWithin? +_fullScreen? +_grabbed? +_groupActive? +_groupChecked? +_groupDisabled? +_groupFocus? +_groupFocusVisible? +_groupFocusWithin? +_groupHover? +_groupInvalid? +_hidden? +_highlighted? +_hover? +_indeterminate? +_invalid? +_last? +_light? +_loading? +_ltr? +_mediaDark? +_mediaReduceMotion? +_notFirst? +_notLast? +_odd? +_peerActive? +_peerChecked? +_peerDisabled? +_peerFocus? +_peerFocusVisible? +_peerFocusWithin? +_peerHover? +_peerInvalid? +_peerPlaceholderShown? +_placeholder? +_placeholderShown? +_pressed? +_readOnly? +_rtl? +_selected? +_selection? +_valid? +_visited? +alignContent? +alignItems? +alignSelf? +animation? +appearance? +apply? +aria-activedescendant? +aria-atomic? +aria-autocomplete? +aria-busy? +aria-checked? +aria-colcount? +aria-colindex? +aria-colspan? +aria-controls? +aria-current? +aria-describedby? +aria-details? +aria-disabled? +aria-dropeffect? +aria-errormessage? +aria-expanded? +aria-flowto? +aria-grabbed? +aria-haspopup? +aria-hidden? +aria-invalid? +aria-keyshortcuts? +aria-label? +aria-labelledby? +aria-level? +aria-live? +aria-modal? +aria-multiline? +aria-multiselectable? +aria-orientation? +aria-owns? +aria-placeholder? +aria-posinset? +aria-pressed? +aria-readonly? +aria-relevant? +aria-required? +aria-roledescription? +aria-rowcount? +aria-rowindex? +aria-rowspan? +aria-selected? +aria-setsize? +aria-sort? +aria-valuemax? +aria-valuemin? +aria-valuenow? +aria-valuetext? +backdropBlur? +backdropBrightness? +backdropContrast? +backdropFilter? +backdropHueRotate? +backdropInvert? +backdropSaturate? +background? +backgroundAttachment? +backgroundBlendMode? +backgroundClip? +backgroundColor? +backgroundImage? +backgroundPosition? +backgroundRepeat? +backgroundSize? +bg? +bgAttachment? +bgBlendMode? +bgClip? +bgColor? +bgGradient? +bgImage? +bgImg? +bgPos? +bgPosition? +bgRepeat? +bgSize? +blendMode? +blur? +border? +borderBottom? +borderBottomColor? +borderBottomLeftRadius? +borderBottomRadius? +borderBottomRightRadius? +borderBottomStyle? +borderBottomWidth? +borderColor? +borderEndRadius? +borderInlineEndRadius? +borderInlineStartRadius? +borderLeft? +borderLeftColor? +borderLeftRadius? +borderLeftStyle? +borderLeftWidth? +borderRadius? +borderRight? +borderRightColor? +borderRightRadius? +borderRightStyle? +borderRightWidth? +borderStartRadius? +borderStyle? +borderTop? +borderTopColor? +borderTopLeftRadius? +borderTopRadius? +borderTopRightRadius? +borderTopStyle? +borderTopWidth? +borderWidth? +borderX? +borderY? +bottom? +boxDecorationBreak? +boxShadow? +boxSize? +boxSizing? +brightness? +children +clipPath? +color? +columnGap? +contrast? +control? +css? +cursor? +display? +dropShadow? +errorMessageProps? +fill? +filter? +flex? +flexBasis? +flexDir? +flexDirection? +flexFlow? +flexGrow? +flexShrink? +flexWrap? +float? +fontFamily? +fontSize? +fontStyle? +fontWeight? +gap? +gridArea? +gridAutoColumns? +gridAutoFlow? +gridAutoRows? +gridColumn? +gridColumnEnd? +gridColumnGap? +gridColumnStart? +gridGap? +gridRow? +gridRowEnd? +gridRowGap? +gridRowStart? +gridTemplate? +gridTemplateAreas? +gridTemplateColumns? +gridTemplateRows? +h? +height? +helperText? +helperTextProps? +hideBelow? +hideFrom? +hueRotate? +inputMode? +inset? +insetEnd? +insetInlineEnd? +insetStart? +insetX? +insetY? +invert? +is? +isDisabled? +isInvalid? +isReadOnly? +isRequired? +isTruncated? +isolation? +justifyContent? +justifyItems? +justifySelf? +label? +labelProps? +layerStyle? +left? +letterSpacing? +lineHeight? +listStyleImage? +listStyleImg? +listStylePos? +listStylePosition? +m? +margin? +marginBottom? +marginEnd? +marginInlineEnd? +marginInlineStart? +marginLeft? +marginRight? +marginStart? +marginTop? +marginX? +marginY? +maxH? +maxHeight? +maxW? +maxWidth? +mb? +me? +minH? +minHeight? +minW? +minWidth? +mixBlendMode? +ml? +mr? +ms? +mt? +mx? +my? +name +noOfLines? +objectFit? +objectPosition? +onKeyPress? +onKeyPressCapture? +opacity? +order? +outline? +outlineColor? +outlineOffset? +overflow? +overflowWrap? +overflowX? +overflowY? +overscroll? +overscrollBehavior? +overscrollBehaviorX? +overscrollBehaviorY? +overscrollX? +overscrollY? +p? +padding? +paddingBottom? +paddingEnd? +paddingInlineEnd? +paddingInlineStart? +paddingLeft? +paddingRight? +paddingStart? +paddingTop? +paddingX? +paddingY? +pb? +pe? +pl? +placeContent? +placeItems? +placeSelf? +pointerEvents? +pos? +position? +pr? +ps? +pt? +px? +py? +resize? +right? +ring? +ringColor? +ringInset? +ringOffset? +ringOffsetColor? +rotate? +rounded? +roundedBottom? +roundedBottomLeft? +roundedBottomRight? +roundedEnd? +roundedLeft? +roundedRight? +roundedStart? +roundedTop? +roundedTopLeft? +roundedTopRight? +rowGap? +saturate? +scale? +scaleX? +scaleY? +shadow? +skewX? +skewY? +srOnly? +stackProps? +stroke? +sx? +textAlign? +textColor? +textDecor? +textDecoration? +textDecorationColor? +textDecorationLine? +textDecorationStyle? +textDecorationThickness? +textIndent? +textOverflow? +textShadow? +textStyle? +textTransform? +textUnderlineOffset? +top? +transform? +transformOrigin? +transition? +transitionDelay? +transitionDuration? +transitionProperty? +transitionTimingFunction? +translateX? +translateY? +userSelect? +verticalAlign? +visibility? +w? +whiteSpace? +width? +willChange? +wordBreak? +zIndex? +
+
+

Properties

+
+

Optional Private __css

+
__css?: SystemStyleObject
+

Used for internal css management

+
+
+

Optional _active

+
_active?: SystemStyleObject
+

Styles for CSS Selector &:active

+
+
+

Optional _activeLink

+
_activeLink?: SystemStyleObject
+

Used to style the active link in a navigation +Styles for CSS Selector &[aria-current=page]

+
+
+

Optional _activeStep

+
_activeStep?: SystemStyleObject
+

Used to style the current step within a process +Styles for CSS Selector &[aria-current=step]

+
+
+

Optional _after

+
_after?: SystemStyleObject
+

Styles for CSS selector &::after

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _after={{content:`""` }}/>
+
+
+
+

Optional _autofill

+
_autofill?: SystemStyleObject
+

Styles for CSS Selector &:-webkit-autofill

+
+
+

Optional _before

+
_before?: SystemStyleObject
+

Styles for CSS selector &::before

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _before={{content:`""` }}/>
+
+
+
+

Optional _checked

+
_checked?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is true

+
    +
  • CSS selector &[aria-checked=true]
    • +
+
+
+

Optional _dark

+
_dark?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _disabled

+
_disabled?: SystemStyleObject
+

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

+
    +
  • &[aria-disabled=true]
    • +
  • &:disabled
    • +
  • &[data-disabled]
    • +
  • &[disabled]
    • +
+
+
+

Optional _empty

+
_empty?: SystemStyleObject
+

Styles for CSS selector &:empty

+
+
+

Optional _even

+
_even?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(even)

+
+
+

Optional _expanded

+
_expanded?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-expanded is true

+
    +
  • CSS selector &[aria-expanded=true]
    • +
+
+
+

Optional _first

+
_first?: SystemStyleObject
+

Styles for CSS Selector &:first-of-type

+
+
+

Optional _firstLetter

+
_firstLetter?: SystemStyleObject
+

Styles for CSS selector &::first-letter

+

NOTE: This selector is only applied for block-level elements and not preceded by an image or table.

+ +

Example

<Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
+
+
+
+

Optional _focus

+
_focus?: SystemStyleObject
+

Styles for CSS selector &:focus

+
+
+

Optional _focusVisible

+
_focusVisible?: SystemStyleObject
+

Styles to apply when this element has received focus via tabbing

+
    +
  • CSS Selector &:focus-visible
    • +
+
+
+

Optional _focusWithin

+
_focusWithin?: SystemStyleObject
+

Styles to apply when a child of this element has received focus

+
    +
  • CSS Selector &:focus-within
    • +
+
+
+

Optional _fullScreen

+
_fullScreen?: SystemStyleObject
+

Styles for CSS Selector &:fullscreen.

+
+
+

Optional _grabbed

+
_grabbed?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-grabbed is true

+
    +
  • CSS selector &[aria-grabbed=true]
    • +
+
+
+

Optional _groupActive

+
_groupActive?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is active

+
+
+

Optional _groupChecked

+
_groupChecked?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is checked

+
+
+

Optional _groupDisabled

+
_groupDisabled?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is disabled

+
+
+

Optional _groupFocus

+
_groupFocus?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is focused

+
+
+

Optional _groupFocusVisible

+
_groupFocusVisible?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has visible focus

+
+
+

Optional _groupFocusWithin

+
_groupFocusWithin?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has focus within

+
+
+

Optional _groupHover

+
_groupHover?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is hovered

+
+
+

Optional _groupInvalid

+
_groupInvalid?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is invalid

+
+
+

Optional _hidden

+
_hidden?: SystemStyleObject
+

Styles for CSS Selector [hidden=true]

+
+
+

Optional _highlighted

+
_highlighted?: SystemStyleObject
+

Styles for the highlighted state.

+
+
+

Optional _hover

+
_hover?: SystemStyleObject
+

Styles for CSS selector &:hover

+
+
+

Optional _indeterminate

+
_indeterminate?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is mixed

+
    +
  • CSS selector &[aria-checked=mixed]
    • +
+
+
+

Optional _invalid

+
_invalid?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-invalid is true

+
    +
  • CSS selector &[aria-invalid=true]
    • +
+
+
+

Optional _last

+
_last?: SystemStyleObject
+

Styles for CSS Selector &:last-of-type

+
+
+

Optional _light

+
_light?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _loading

+
_loading?: SystemStyleObject
+

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. +Useful for styling loading states

+
+
+

Optional _ltr

+
_ltr?: SystemStyleObject
+

Styles for CSS Selector [dir=ltr] & +It is applied when a parent element or this element has dir="ltr"

+
+
+

Optional _mediaDark

+
_mediaDark?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-color-scheme: dark) +It is used when the user has requested the system use a light or dark color theme.

+
+
+

Optional _mediaReduceMotion

+
_mediaReduceMotion?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-reduced-motion: reduce) +It is used when the user has requested the system to reduce the amount of animations.

+
+
+

Optional _notFirst

+
_notFirst?: SystemStyleObject
+

Styles for CSS Selector &:not(:first-of-type)

+
+
+

Optional _notLast

+
_notLast?: SystemStyleObject
+

Styles for CSS Selector &:not(:last-of-type)

+
+
+

Optional _odd

+
_odd?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(odd)

+
+
+

Optional _peerActive

+
_peerActive?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is active

+
+
+

Optional _peerChecked

+
_peerChecked?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is checked

+
+
+

Optional _peerDisabled

+
_peerDisabled?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is disabled

+
+
+

Optional _peerFocus

+
_peerFocus?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is focused

+
+
+

Optional _peerFocusVisible

+
_peerFocusVisible?: SystemStyleObject
+

Styles to apply when a sibling element with .peeror data-peer has visible focus

+
+
+

Optional _peerFocusWithin

+
_peerFocusWithin?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has focus within

+
+
+

Optional _peerHover

+
_peerHover?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is hovered

+
+
+

Optional _peerInvalid

+
_peerInvalid?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is invalid

+
+
+

Optional _peerPlaceholderShown

+
_peerPlaceholderShown?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

+
+
+

Optional _placeholder

+
_placeholder?: SystemStyleObject
+

Styles for CSS Selector &::placeholder.

+
+
+

Optional _placeholderShown

+
_placeholderShown?: SystemStyleObject
+

Styles for CSS Selector &:placeholder-shown.

+
+
+

Optional _pressed

+
_pressed?: SystemStyleObject
+

Styles for CSS Selector &[aria-pressed=true] +Typically used to style the current "pressed" state of toggle buttons

+
+
+

Optional _readOnly

+
_readOnly?: SystemStyleObject
+

Styles for CSS Selector &:readonly

+
+
+

Optional _rtl

+
_rtl?: SystemStyleObject
+

Styles for CSS Selector [dir=rtl] & +It is applied when a parent element or this element has dir="rtl"

+
+
+

Optional _selected

+
_selected?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-selected is true

+
    +
  • CSS selector &[aria-selected=true]
    • +
+
+
+

Optional _selection

+
_selection?: SystemStyleObject
+

Styles for CSS Selector &::selection

+
+
+

Optional _valid

+
_valid?: SystemStyleObject
+

Styles for the valid state

+
    +
  • CSS selector &[data-valid], &[data-state=valid]
    • +
+
+
+

Optional _visited

+
_visited?: SystemStyleObject
+

Styles for CSS Selector &:visited

+
+
+

Optional alignContent

+
alignContent?: ResponsiveValue<AlignContent>
+

The CSS align-content property.

+

It defines the distribution of space between and around +content items along a flexbox cross-axis or a grid's block axis.

+ +

See

Mozilla Docs

+
+
+

Optional alignItems

+
alignItems?: ResponsiveValue<AlignItems>
+

The CSS align-items property.

+

It defines the align-self value on all direct children as a group.

+
    +
  • In Flexbox, it controls the alignment of items on the Cross Axis.
    • +
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
    • +
+ +

See

Mozilla Docs

+
+
+

Optional alignSelf

+
alignSelf?: ResponsiveValue<AlignSelf>
+

The CSS align-self property.

+

It works like align-items, but applies only to a +single flexbox item, instead of all of them.

+ +

See

Mozilla Docs

+
+
+

Optional animation

+
animation?: ResponsiveValue<Animation<string & {}>>
+

The CSS animation property

+
+
+

Optional appearance

+
appearance?: ResponsiveValue<Appearance>
+

The CSS appearance property

+
+
+

Optional apply

+
apply?: ResponsiveValue<string>
+

Apply theme-aware style objects in theme

+ +

Example

<Box apply="styles.h3">This is a div</Box>
+
+

This will apply styles defined in theme.styles.h3

+
+
+

Optional aria-activedescendant

+
aria-activedescendant?: string
+

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

+
+
+

Optional aria-atomic

+
aria-atomic?: Booleanish
+

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

+
+
+

Optional aria-autocomplete

+
aria-autocomplete?: "none" | "both" | "inline" | "list"
+

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be +presented if they are made.

+
+
+

Optional aria-busy

+
aria-busy?: Booleanish
+

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

+
+
+

Optional aria-checked

+
aria-checked?: boolean | "true" | "false" | "mixed"
+

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

+ +

See

    +
  • aria-pressed
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-colcount

+
aria-colcount?: number
+

Defines the total number of columns in a table, grid, or treegrid.

+ +

See

aria-colindex.

+
+
+

Optional aria-colindex

+
aria-colindex?: number
+

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

+ +

See

    +
  • aria-colcount
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-colspan

+
aria-colspan?: number
+

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-colindex
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-controls

+
aria-controls?: string
+

Identifies the element (or elements) whose contents or presence are controlled by the current element.

+ +

See

aria-owns.

+
+
+

Optional aria-current

+
aria-current?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"
+

Indicates the element that represents the current item within a container or set of related elements.

+
+
+

Optional aria-describedby

+
aria-describedby?: string
+

Identifies the element (or elements) that describes the object.

+ +

See

aria-labelledby

+
+
+

Optional aria-details

+
aria-details?: string
+

Identifies the element that provides a detailed, extended description for the object.

+ +

See

aria-describedby.

+
+
+

Optional aria-disabled

+
aria-disabled?: Booleanish
+

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

+ +

See

    +
  • aria-hidden
    • +
  • aria-readonly.
    • +
+
+
+

Optional aria-dropeffect

+
aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"
+

Indicates what functions can be performed when a dragged object is released on the drop target.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-errormessage

+
aria-errormessage?: string
+

Identifies the element that provides an error message for the object.

+ +

See

    +
  • aria-invalid
    • +
  • aria-describedby.
    • +
+
+
+

Optional aria-expanded

+
aria-expanded?: Booleanish
+

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

+
+
+

Optional aria-flowto

+
aria-flowto?: string
+

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, +allows assistive technology to override the general default of reading in document source order.

+
+
+

Optional aria-grabbed

+
aria-grabbed?: Booleanish
+

Indicates an element's "grabbed" state in a drag-and-drop operation.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-haspopup

+
aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "true" | "false" | "tree"
+

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

+
+
+

Optional aria-hidden

+
aria-hidden?: Booleanish
+

Indicates whether the element is exposed to an accessibility API.

+ +

See

aria-disabled.

+
+
+

Optional aria-invalid

+
aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"
+

Indicates the entered value does not conform to the format expected by the application.

+ +

See

aria-errormessage.

+
+
+

Optional aria-keyshortcuts

+
aria-keyshortcuts?: string
+

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

+
+
+

Optional aria-label

+
aria-label?: string
+

Defines a string value that labels the current element.

+ +

See

aria-labelledby.

+
+
+

Optional aria-labelledby

+
aria-labelledby?: string
+

Identifies the element (or elements) that labels the current element.

+ +

See

aria-describedby.

+
+
+

Optional aria-level

+
aria-level?: number
+

Defines the hierarchical level of an element within a structure.

+
+
+

Optional aria-live

+
aria-live?: "off" | "assertive" | "polite"
+

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

+
+
+

Optional aria-modal

+
aria-modal?: Booleanish
+

Indicates whether an element is modal when displayed.

+
+
+

Optional aria-multiline

+
aria-multiline?: Booleanish
+

Indicates whether a text box accepts multiple lines of input or only a single line.

+
+
+

Optional aria-multiselectable

+
aria-multiselectable?: Booleanish
+

Indicates that the user may select more than one item from the current selectable descendants.

+
+
+

Optional aria-orientation

+
aria-orientation?: "horizontal" | "vertical"
+

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

+
+
+

Optional aria-owns

+
aria-owns?: string
+

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship +between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

+ +

See

aria-controls.

+
+
+

Optional aria-placeholder

+
aria-placeholder?: string
+

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. +A hint could be a sample value or a brief description of the expected format.

+
+
+

Optional aria-posinset

+
aria-posinset?: number
+

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-setsize.

+
+
+

Optional aria-pressed

+
aria-pressed?: boolean | "true" | "false" | "mixed"
+

Indicates the current "pressed" state of toggle buttons.

+ +

See

    +
  • aria-checked
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-readonly

+
aria-readonly?: Booleanish
+

Indicates that the element is not editable, but is otherwise operable.

+ +

See

aria-disabled.

+
+
+

Optional aria-relevant

+
aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
+

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

+ +

See

aria-atomic.

+
+
+

Optional aria-required

+
aria-required?: Booleanish
+

Indicates that user input is required on the element before a form may be submitted.

+
+
+

Optional aria-roledescription

+
aria-roledescription?: string
+

Defines a human-readable, author-localized description for the role of an element.

+
+
+

Optional aria-rowcount

+
aria-rowcount?: number
+

Defines the total number of rows in a table, grid, or treegrid.

+ +

See

aria-rowindex.

+
+
+

Optional aria-rowindex

+
aria-rowindex?: number
+

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowcount
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-rowspan

+
aria-rowspan?: number
+

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowindex
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-selected

+
aria-selected?: Booleanish
+

Indicates the current "selected" state of various widgets.

+ +

See

    +
  • aria-checked
    • +
  • aria-pressed.
    • +
+
+
+

Optional aria-setsize

+
aria-setsize?: number
+

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-posinset.

+
+
+

Optional aria-sort

+
aria-sort?: "none" | "ascending" | "descending" | "other"
+

Indicates if items in a table or grid are sorted in ascending or descending order.

+
+
+

Optional aria-valuemax

+
aria-valuemax?: number
+

Defines the maximum allowed value for a range widget.

+
+
+

Optional aria-valuemin

+
aria-valuemin?: number
+

Defines the minimum allowed value for a range widget.

+
+
+

Optional aria-valuenow

+
aria-valuenow?: number
+

Defines the current value for a range widget.

+ +

See

aria-valuetext.

+
+
+

Optional aria-valuetext

+
aria-valuetext?: string
+

Defines the human readable text alternative of aria-valuenow for a range widget.

+
+
+

Optional backdropBlur

+
backdropBlur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the backdrop-blur filter value of an element. +Value is assigned to --chakra-backdrop-blur css variable

+
+
+

Optional backdropBrightness

+
backdropBrightness?: ResponsiveValue<Length>
+

Sets the backdrop-brightness filter value of an element. +Value is assigned to --chakra-backdrop-brightness css variable

+
+
+

Optional backdropContrast

+
backdropContrast?: ResponsiveValue<Length>
+

Sets the backdrop-contrast filter value of an element. +Value is assigned to --chakra-backdrop-contrast css variable

+
+
+

Optional backdropFilter

+
backdropFilter?: ResponsiveValue<"auto" | BackdropFilter>
+

The CSS backdrop-filter property. When set to auto, you allow +Chakra UI to define the color based on the backdrop filter style props +(backdropBlur, backdropSaturate, etc.)

+
+
+

Optional backdropHueRotate

+
backdropHueRotate?: ResponsiveValue<Length>
+

Sets the backdrop-hue-rotate filter value of an element. +Value is assigned to --chakra-backdrop-hue-rotate css variable

+
+
+

Optional backdropInvert

+
backdropInvert?: ResponsiveValue<Length>
+

Sets the backdrop-invert filter value of an element. +Value is assigned to --chakra-backdrop-invert css variable

+
+
+

Optional backdropSaturate

+
backdropSaturate?: ResponsiveValue<Length>
+

Sets the backdrop-saturate filter value of an element. +Value is assigned to --chakra-backdrop-saturate css variable

+
+
+

Optional background

+
background?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional backgroundAttachment

+
backgroundAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional backgroundBlendMode

+
backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional backgroundClip

+
backgroundClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional backgroundColor

+
backgroundColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional backgroundImage

+
backgroundImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional backgroundPosition

+
backgroundPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional backgroundRepeat

+
backgroundRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional backgroundSize

+
backgroundSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional bg

+
bg?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional bgAttachment

+
bgAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional bgBlendMode

+
bgBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional bgClip

+
bgClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional bgColor

+
bgColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional bgGradient

+
bgGradient?: ResponsiveValue<string | string & {}>
+

The background-gradient shorthand

+
+
+

Optional bgImage

+
bgImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgImg

+
bgImg?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgPos

+
bgPos?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgPosition

+
bgPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgRepeat

+
bgRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional bgSize

+
bgSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional blendMode

+
blendMode?: ResponsiveValue<MixBlendMode>
+

The blend-mode property

+
+
+

Optional blur

+
blur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the blur filter value of an element. +Value is assigned to --chakra-filter css variable

+
+
+

Optional border

+
border?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border property

+
+
+

Optional borderBottom

+
borderBottom?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-bottom property

+
+
+

Optional borderBottomColor

+
borderBottomColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderBottomColor>
+

The CSS border-bottom-color property

+
+
+

Optional borderBottomLeftRadius

+
borderBottomLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional borderBottomRadius

+
borderBottomRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional borderBottomRightRadius

+
borderBottomRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional borderBottomStyle

+
borderBottomStyle?: ResponsiveValue<BorderBottomStyle>
+

The CSS border-bottom-style property

+
+
+

Optional borderBottomWidth

+
borderBottomWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-bottom-width property

+
+
+

Optional borderColor

+
borderColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-color property

+
+
+

Optional borderEndRadius

+
borderEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineEndRadius

+
borderInlineEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderInlineEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineStartRadius

+
borderInlineStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderInlineStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderLeft

+
borderLeft?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-left property

+
+
+

Optional borderLeftColor

+
borderLeftColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderLeftColor>
+

The CSS border-left-color property

+
+
+

Optional borderLeftRadius

+
borderLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional borderLeftStyle

+
borderLeftStyle?: ResponsiveValue<BorderLeftStyle>
+

The CSS border-left-style property

+
+
+

Optional borderLeftWidth

+
borderLeftWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-left-width property

+
+
+

Optional borderRadius

+
borderRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional borderRight

+
borderRight?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right property

+
+
+

Optional borderRightColor

+
borderRightColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderRightColor>
+

The CSS border-right-color property

+
+
+

Optional borderRightRadius

+
borderRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional borderRightStyle

+
borderRightStyle?: ResponsiveValue<BorderRightStyle>
+

The CSS border-right-styles property

+
+
+

Optional borderRightWidth

+
borderRightWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-right-width property

+
+
+

Optional borderStartRadius

+
borderStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderStyle

+
borderStyle?: ResponsiveValue<BorderStyle>
+

The CSS border-style property

+
+
+

Optional borderTop

+
borderTop?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top property

+
+
+

Optional borderTopColor

+
borderTopColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-top-color property

+
+
+

Optional borderTopLeftRadius

+
borderTopLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional borderTopRadius

+
borderTopRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional borderTopRightRadius

+
borderTopRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional borderTopStyle

+
borderTopStyle?: ResponsiveValue<BorderTopStyle>
+

The CSS border-top-style property

+
+
+

Optional borderTopWidth

+
borderTopWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-top-width property

+
+
+

Optional borderWidth

+
borderWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-width property

+
+
+

Optional borderX

+
borderX?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right and border-left property

+
+
+

Optional borderY

+
borderY?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top and border-bottom property

+
+
+

Optional bottom

+
bottom?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS bottom property

+
+
+

Optional boxDecorationBreak

+
boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>
+

The CSS box-decoration property

+
+
+

Optional boxShadow

+
boxShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional boxSize

+
boxSize?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width and height property

+
+
+

Optional boxSizing

+
boxSizing?: BoxSizing
+

The CSS box-sizing property

+
+
+

Optional brightness

+
brightness?: ResponsiveValue<Length>
+

Sets the brightness filter value of an element. +Value is assigned to --chakra-brightness css variable

+
+
+

children

+
children: ReactNode
+

The CheckboxControl components to be rendered in this stack (required)

+
+
+

Optional clipPath

+
clipPath?: ResponsiveValue<ClipPath>
+

The CSS clip-path property.

+

It creates a clipping region that sets what part of an element should be shown.

+
+
+

Optional color

+
color?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional columnGap

+
columnGap?: ResponsiveValue<ColumnGap<Length>>
+

The CSS column-gap property.

+

It sets the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional contrast

+
contrast?: ResponsiveValue<Length>
+

Sets the contrast filter value of an element. +Value is assigned to --chakra-contrast css variable

+
+
+

Optional control

+
control?: Control<any, any>
+

The control passed down from react-hook-form. +Only required if not using FormProvider

+
+
+

Optional css

+
css?: Interpolation<{}>
+

The emotion's css style object

+
+
+

Optional cursor

+
cursor?: ResponsiveValue<Cursor>
+

The CSS cursor property

+
+
+

Optional display

+
display?: ResponsiveValue<Display>
+

The CSS display property

+
+
+

Optional dropShadow

+
dropShadow?: ResponsiveValue<"base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

Sets the drop-shadow filter value of an element. +Value is assigned to --chakra-drop-shadow css variable

+
+
+

Optional errorMessageProps

+
errorMessageProps?: FormErrorMessageProps
+

Chakra FormErrorMessageProps for error message

+
+
+

Optional fill

+
fill?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS fill property for icon svgs and paths

+
+
+

Optional filter

+
filter?: ResponsiveValue<Filter | "auto">
+

The CSS filter property. When set to auto, you allow +Chakra UI to define the color based on the filter style props +(blur, saturate, etc.)

+
+
+

Optional flex

+
flex?: ResponsiveValue<Flex<Length>>
+

The CSS flex property.

+

It defines how a flex item will grow or shrink +to fit the space available in its flex container.

+ +

See

Mozilla Docs

+
+
+

Optional flexBasis

+
flexBasis?: ResponsiveValue<FlexBasis<Length>>
+

The CSS flex-basis property.

+

It defines the initial main size of a flex item.

+ +

See

Mozilla Docs

+
+
+

Optional flexDir

+
flexDir?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexDirection

+
flexDirection?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexFlow

+
flexFlow?: ResponsiveValue<FlexFlow>
+

The CSS flex-flow property.

+

It is a shorthand property for flex-direction and flex-wrap. +It specifies the direction of a flex container, as well as its wrapping behavior.

+ +

See

Mozilla Docs

+
+
+

Optional flexGrow

+
flexGrow?: ResponsiveValue<FlexGrow>
+

The CSS flex-grow property.

+

It defines how much a flexbox item should grow +if there's space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexShrink

+
flexShrink?: ResponsiveValue<FlexShrink>
+

The CSS flex-shrink property.

+

It defines how much a flexbox item should shrink +if there's not enough space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexWrap

+
flexWrap?: ResponsiveValue<FlexWrap>
+

The CSS flex-wrap property.

+

It defines whether flex items are forced onto one line or +can wrap onto multiple lines. If wrapping is allowed, +it sets the direction that lines are stacked.

+ +

See

Mozilla Docs

+
+
+

Optional float

+
float?: ResponsiveValue<Float>
+

The CSS float property

+
+
+

Optional fontFamily

+
fontFamily?: ResponsiveValue<"body" | FontFamily | "heading" | "mono">
+

The CSS font-family property

+
+
+

Optional fontSize

+
fontSize?: ResponsiveValue<number | "small" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl">
+

The CSS font-size property

+
+
+

Optional fontStyle

+
fontStyle?: ResponsiveValue<FontStyle>
+

The CSS font-style property

+
+
+

Optional fontWeight

+
fontWeight?: ResponsiveValue<number | "bold" | string & {} | "black" | "normal" | "hairline" | "thin" | "light" | "medium" | "semibold" | "extrabold">
+

The CSS font-weight property

+
+
+

Optional gap

+
gap?: ResponsiveValue<Gap<Length>>
+

The CSS gap property.

+

It defines the gap between items in both flex and +grid contexts.

+ +

See

Mozilla Docs

+
+
+

Optional gridArea

+
gridArea?: ResponsiveValue<GridArea>
+

The CSS grid-areas property.

+

It specifies a grid item’s size and location within a grid by +contributing a line, a span, or nothing (automatic) +to its grid placement, thereby specifying the edges of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoColumns

+
gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>
+

The CSS grid-auto-columns property.

+

It specifies the size of an implicitly-created grid column track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoFlow

+
gridAutoFlow?: ResponsiveValue<GridAutoFlow>
+

The CSS grid-auto-flow property

+

It controls how the auto-placement algorithm works, +specifying exactly how auto-placed items get flowed into the grid.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoRows

+
gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>
+

The CSS grid-auto-rows property.

+

It specifies the size of an implicitly-created grid row track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumn

+
gridColumn?: ResponsiveValue<GridColumn>
+

The CSS grid-column property.

+

It specifies a grid item's size and location within a grid column +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnEnd

+
gridColumnEnd?: ResponsiveValue<GridColumnEnd>
+

The CSS grid-column property

+

It specifies a grid item’s end position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the block-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnGap

+
gridColumnGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-column-gap property.

+

It defines the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnStart

+
gridColumnStart?: ResponsiveValue<GridColumnStart>
+

The CSS grid-column property.

+

It specifies a grid item’s start position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement

+ +

See

Mozilla Docs

+
+
+

Optional gridGap

+
gridGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-gap property.

+

It defines the gaps (gutters) between rows and columns

+ +

See

Mozilla Docs

+
+
+

Optional gridRow

+
gridRow?: ResponsiveValue<GridRow>
+

The CSS grid-row property

+

It specifies a grid item’s size and location within the grid row +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowEnd

+
gridRowEnd?: ResponsiveValue<GridRowEnd>
+

The CSS grid-row-end property

+

It specifies a grid item’s end position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowGap

+
gridRowGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-row-gap property.

+

It defines the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowStart

+
gridRowStart?: ResponsiveValue<GridRowStart>
+

The CSS grid-row-start property

+

It specifies a grid item’s start position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplate

+
gridTemplate?: ResponsiveValue<GridTemplate>
+

The CSS grid-template property.

+

It is a shorthand property for defining grid columns, rows, and areas.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateAreas

+
gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>
+

The CSS grid-template-areas property.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateColumns

+
gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>
+

The CSS grid-template-columns property

+

It defines the line names and track sizing functions of the grid columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateRows

+
gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>
+

The CSS grid-template-rows property.

+

It defines the line names and track sizing functions of the grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional h

+
h?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional height

+
height?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional helperText

+
helperText?: ReactNode
+

Helper text to show alongside input

+
+
+

Optional helperTextProps

+
helperTextProps?: TextProps
+

Chakra TextProps associated with the helper text

+
+
+

Optional hideBelow

+
hideBelow?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element below the specified breakpoint

+
+
+

Optional hideFrom

+
hideFrom?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element from the specified breakpoint and up

+
+
+

Optional hueRotate

+
hueRotate?: ResponsiveValue<Length>
+

Sets the hue-rotate filter value of an element. +Value is assigned to --chakra-hue-rotate css variable

+
+
+

Optional inputMode

+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
+

Hints at the type of data that might be entered by the user while editing the element or its contents

+ +

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

+
+
+

Optional inset

+
inset?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, right, top, bottom property

+
+
+

Optional insetEnd

+
insetEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetEnd is equivalent to right. +When the direction is rtl, insetEnd is equivalent to left.

+
+
+

Optional insetInlineEnd

+
insetInlineEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetInlineEnd is equivalent to right. +When the direction is rtl, insetInlineEnd is equivalent to left.

+
+
+

Optional insetStart

+
insetStart?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is start, end is equivalent to left. +When the direction is start, end is equivalent to right.

+
+
+

Optional insetX

+
insetX?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, and right property

+
+
+

Optional insetY

+
insetY?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top, and bottom property

+
+
+

Optional invert

+
invert?: ResponsiveValue<Length>
+

Sets the invert filter value of an element. +Value is assigned to --chakra-invert css variable

+
+
+

Optional is

+
is?: string
+

Specify that a standard HTML element should behave like a defined custom built-in element

+ +

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

+
+
+

Optional isDisabled

+
isDisabled?: boolean
+

If true, the form control will be disabled. This has 2 side effects:

+
    +
  • The FormLabel will have data-disabled attribute
    • +
  • The form element (e.g, Input) will be disabled
    • +
+ +

Default

false

+
+
+

Optional isInvalid

+
isInvalid?: boolean
+

If true, the form control will be invalid. This has 2 side effects:

+
    +
  • The FormLabel and FormErrorIcon will have data-invalid set to true
    • +
  • The form element (e.g, Input) will have aria-invalid set to true
    • +
+ +

Default

false

+
+
+

Optional isReadOnly

+
isReadOnly?: boolean
+

If true, the form control will be readonly

+ +

Default

false

+
+
+

Optional isRequired

+
isRequired?: boolean
+

If true, the form control will be required. This has 2 side effects:

+
    +
  • The FormLabel will show a required indicator
    • +
  • The form element (e.g, Input) will have aria-required set to true
    • +
+ +

Default

false

+
+
+

Optional isTruncated

+
isTruncated?: boolean
+

If true, it clamps truncate a text after one line.

+
+
+

Optional isolation

+
isolation?: ResponsiveValue<Isolation>
+

The CSS isolation property

+
+
+

Optional justifyContent

+
justifyContent?: ResponsiveValue<JustifyContent>
+

The CSS justify-content property.

+

It defines how the browser distributes space between and around content items +along the main-axis of a flex container, and the inline axis of a grid container.

+ +

See

Mozilla Docs

+
+
+

Optional justifyItems

+
justifyItems?: ResponsiveValue<JustifyItems>
+

The CSS justify-items property.

+

It defines the default justify-self for all items of the box, +giving them all a default way of justifying each box +along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional justifySelf

+
justifySelf?: ResponsiveValue<JustifySelf>
+

The CSS justify-self property.

+

It defines the way a box is justified inside its +alignment container along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional label

+
label?: ReactNode
+

The label to be associated with the input

+
+
+

Optional labelProps

+
labelProps?: FormLabelProps
+

Chakra FormLabelProps

+
+
+

Optional layerStyle

+
layerStyle?: ResponsiveValue<string & {}>
+

The layer style object to apply. +Note: Styles must be located in theme.layerStyles

+
+
+

Optional left

+
left?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left property

+
+
+

Optional letterSpacing

+
letterSpacing?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "tighter" | "tight" | "wide" | "wider" | "widest">
+

The CSS letter-spacing property

+
+
+

Optional lineHeight

+
lineHeight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "none" | "normal" | number & {} | "shorter" | "short" | "tall" | "taller">
+

The CSS line-height property

+
+
+

Optional listStyleImage

+
listStyleImage?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStyleImg

+
listStyleImg?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStylePos

+
listStylePos?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional listStylePosition

+
listStylePosition?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional m

+
m?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional margin

+
margin?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional marginBottom

+
marginBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional marginEnd

+
marginEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginEnd is equivalent to marginRight. +When direction is rtl, marginEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineEnd

+
marginInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineEnd is equivalent to marginRight. +When direction is rtl, marginInlineEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineStart

+
marginInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineStart is equivalent to marginLeft. +When direction is rtl, marginInlineStart is equivalent to marginRight.

+
+
+

Optional marginLeft

+
marginLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional marginRight

+
marginRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional marginStart

+
marginStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginStart is equivalent to marginLeft. +When direction is rtl, marginStart is equivalent to marginRight.

+
+
+

Optional marginTop

+
marginTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional marginX

+
marginX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional marginY

+
marginY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

Optional maxH

+
maxH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxHeight

+
maxHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxW

+
maxW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional maxWidth

+
maxWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional mb

+
mb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional me

+
me?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, me is equivalent to marginRight. +When direction is rtl, me is equivalent to marginLeft.

+
+
+

Optional minH

+
minH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minHeight

+
minHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minW

+
minW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional minWidth

+
minWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional mixBlendMode

+
mixBlendMode?: ResponsiveValue<MixBlendMode>
+

The mix-blend-mode property

+
+
+

Optional ml

+
ml?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional mr

+
mr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional ms

+
ms?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, ms is equivalent to marginLeft. +When direction is rtl, ms is equivalent to marginRight.

+
+
+

Optional mt

+
mt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional mx

+
mx?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional my

+
my?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

name

+
name: string
+

The name of the input (required)

+
+
+

Optional noOfLines

+
noOfLines?: ResponsiveValue<number>
+

Used to truncate text at a specific number of lines

+
+
+

Optional objectFit

+
objectFit?: ResponsiveValue<ObjectFit>
+

The CSS object-fit property

+
+
+

Optional objectPosition

+
objectPosition?: ResponsiveValue<ObjectPosition<Length>>
+

The CSS object-position property

+
+
+

Optional onKeyPress

+
onKeyPress?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional onKeyPressCapture

+
onKeyPressCapture?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional opacity

+
opacity?: ResponsiveValue<Opacity>
+

The CSS opacity property

+
+
+

Optional order

+
order?: ResponsiveValue<Order>
+

The CSS order property.

+

It defines the order to lay out an item in a flex or grid container.

+ +

See

Mozilla Docs

+
+
+

Optional outline

+
outline?: ResponsiveValue<Outline<Length>>
+

The CSS outline property

+
+
+

Optional outlineColor

+
outlineColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS outline-color property

+
+
+

Optional outlineOffset

+
outlineOffset?: ResponsiveValue<OutlineOffset<Length>>
+

The CSS outline-offset property

+
+
+

Optional overflow

+
overflow?: ResponsiveValue<Overflow>
+

The CSS overflow property

+
+
+

Optional overflowWrap

+
overflowWrap?: ResponsiveValue<OverflowWrap>
+

The CSS overflow-wrap property

+
+
+

Optional overflowX

+
overflowX?: ResponsiveValue<OverflowX>
+

The CSS overflow-x property

+
+
+

Optional overflowY

+
overflowY?: ResponsiveValue<OverflowY>
+

The CSS overflow-y property

+
+
+

Optional overscroll

+
overscroll?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehavior

+
overscrollBehavior?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehaviorX

+
overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollBehaviorY

+
overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional overscrollX

+
overscrollX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollY

+
overscrollY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional p

+
p?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional padding

+
padding?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional paddingBottom

+
paddingBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional paddingEnd

+
paddingEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingEnd is equivalent to paddingRight. +When direction is rtl, paddingEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineEnd

+
paddingInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineEnd is equivalent to paddingRight. +When direction is rtl, paddingInlineEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineStart

+
paddingInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineStart is equivalent to paddingLeft. +When direction is rtl, paddingInlineStart is equivalent to paddingRight.

+
+
+

Optional paddingLeft

+
paddingLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional paddingRight

+
paddingRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional paddingStart

+
paddingStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingStart is equivalent to paddingLeft. +When direction is rtl, paddingStart is equivalent to paddingRight.

+
+
+

Optional paddingTop

+
paddingTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional paddingX

+
paddingX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional paddingY

+
paddingY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional pb

+
pb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional pe

+
pe?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, pe is equivalent to paddingRight. +When direction is rtl, pe is equivalent to paddingLeft.

+
+
+

Optional pl

+
pl?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional placeContent

+
placeContent?: ResponsiveValue<PlaceContent>
+

The CSS place-content property.

+

It allows you to align content along both the block and +inline directions at once (i.e. the align-content and justify-content properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional placeItems

+
placeItems?: ResponsiveValue<PlaceItems>
+

The CSS place-items property.

+

It allows you to align items along both the block and +inline directions at once (i.e. the align-items and justify-items properties) +in a relevant layout system such as Grid or Flex.

+ +

See

Mozilla Docs

+
+
+

Optional placeSelf

+
placeSelf?: ResponsiveValue<PlaceSelf>
+

The CSS place-self property.

+

It allows you to align an individual item in both the block and +inline directions at once (i.e. the align-self and justify-self properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional pointerEvents

+
pointerEvents?: ResponsiveValue<PointerEvents>
+

The CSS pointer-events property

+
+
+

Optional pos

+
pos?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional position

+
position?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional pr

+
pr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional ps

+
ps?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, ps is equivalent to paddingLeft. +When direction is rtl, ps is equivalent to paddingRight.

+
+
+

Optional pt

+
pt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional px

+
px?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional py

+
py?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional resize

+
resize?: ResponsiveValue<Resize>
+

The CSS resize property

+
+
+

Optional right

+
right?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS right property

+
+
+

Optional ring

+
ring?: ResponsiveValue<Length>
+

Creates outline rings with CSS box-shadow property

+
+
+

Optional ringColor

+
ringColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the outline ring

+
+
+

Optional ringInset

+
ringInset?: ResponsiveValue<"inset" | "none">
+

If the outline ring should an inset

+
+
+

Optional ringOffset

+
ringOffset?: ResponsiveValue<Length>
+

The thickness of the offset shadow when using outline rings

+
+
+

Optional ringOffsetColor

+
ringOffsetColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the offset shadow when adding outline rings

+
+
+

Optional rotate

+
rotate?: ResponsiveValue<Length>
+

Sets the rotation value of the element

+
+
+

Optional rounded

+
rounded?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional roundedBottom

+
roundedBottom?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional roundedBottomLeft

+
roundedBottomLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional roundedBottomRight

+
roundedBottomRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional roundedEnd

+
roundedEnd?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedLeft

+
roundedLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional roundedRight

+
roundedRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional roundedStart

+
roundedStart?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedTop

+
roundedTop?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional roundedTopLeft

+
roundedTopLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional roundedTopRight

+
roundedTopRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional rowGap

+
rowGap?: ResponsiveValue<RowGap<Length>>
+

The CSS row-gap property.

+

It sets the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional saturate

+
saturate?: ResponsiveValue<Length>
+

Sets the saturation filter value of an element. +Value is assigned to --chakra-saturate css variable

+
+
+

Optional scale

+
scale?: ResponsiveValue<Length>
+

Sets the scale value of the element

+
+
+

Optional scaleX

+
scaleX?: ResponsiveValue<Length>
+

Scale value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-x
    • +
+
+
+

Optional scaleY

+
scaleY?: ResponsiveValue<Length>
+

Scale value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-y
    • +
+
+
+

Optional shadow

+
shadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional skewX

+
skewX?: ResponsiveValue<Length>
+

Skew value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-x
    • +
+
+
+

Optional skewY

+
skewY?: ResponsiveValue<Length>
+

Skew value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-y
    • +
+
+
+

Optional srOnly

+
srOnly?: true | "focusable"
+

If true, hide an element visually without hiding it from screen readers.

+

If focusable, the sr-only styles will be undone, making the element visible +to sighted users as well as screen readers.

+
+
+

Optional stackProps

+
stackProps?: StackProps
+

Chakra StackProps

+
+
+

Optional stroke

+
stroke?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS stroke property for icon svgs and paths

+
+
+

Optional sx

+
sx?: SystemStyleObject
+

Used to pass theme-aware style props. +NB: This is the public API for user-land

+
+
+

Optional textAlign

+
textAlign?: ResponsiveValue<TextAlign>
+

The CSS text-align property

+
+
+

Optional textColor

+
textColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional textDecor

+
textDecor?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecoration

+
textDecoration?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecorationColor

+
textDecorationColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | TextDecorationColor>
+

The CSS text-decoration-color property

+
+
+

Optional textDecorationLine

+
textDecorationLine?: ResponsiveValue<TextDecorationLine>
+

The CSS text-decoration-line property

+
+
+

Optional textDecorationStyle

+
textDecorationStyle?: ResponsiveValue<TextDecorationStyle>
+

The CSS text-decoration-style property

+
+
+

Optional textDecorationThickness

+
textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>
+

The CSS text-decoration-thickness property

+
+
+

Optional textIndent

+
textIndent?: ResponsiveValue<TextIndent<0 | string & {}>>
+

The CSS text-indent property

+
+
+

Optional textOverflow

+
textOverflow?: ResponsiveValue<TextOverflow>
+

The CSS text-overflow property

+
+
+

Optional textShadow

+
textShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "inner" | "dark-lg" | TextShadow>
+

The text-shadow property

+
+
+

Optional textStyle

+
textStyle?: ResponsiveValue<string & {}>
+

The text style object to apply. +Note: Styles must be located in theme.textStyles

+
+
+

Optional textTransform

+
textTransform?: ResponsiveValue<TextTransform>
+

The CSS text-transform property

+
+
+

Optional textUnderlineOffset

+
textUnderlineOffset?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto">
+

The CSS text-underline-offset property

+
+
+

Optional top

+
top?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top property

+
+
+

Optional transform

+
transform?: ResponsiveValue<"auto" | Transform | "auto-gpu">
+

The CSS transform property

+
+
+

Optional transformOrigin

+
transformOrigin?: ResponsiveValue<number | "center" | "px" | "top" | "right" | "bottom" | "left" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS transform-origin property

+
+
+

Optional transition

+
transition?: ResponsiveValue<Transition<string & {}>>
+

The CSS transition property

+
+
+

Optional transitionDelay

+
transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>
+

The CSS transition-delay property

+
+
+

Optional transitionDuration

+
transitionDuration?: ResponsiveValue<string>
+

The CSS transition-duration property

+
+
+

Optional transitionProperty

+
transitionProperty?: ResponsiveValue<TransitionProperty>
+

The CSS transition-property property

+
+
+

Optional transitionTimingFunction

+
transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>
+

The CSS transition-timing-function property

+
+
+

Optional translateX

+
translateX?: ResponsiveValue<Length>
+

Translate value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-x
    • +
+
+
+

Optional translateY

+
translateY?: ResponsiveValue<Length>
+

Translate value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-y
    • +
+
+
+

Optional userSelect

+
userSelect?: ResponsiveValue<UserSelect>
+

The CSS user-select property

+
+
+

Optional verticalAlign

+
verticalAlign?: ResponsiveValue<VerticalAlign<Length>>
+

The CSS vertical-align property

+
+
+

Optional visibility

+
visibility?: ResponsiveValue<Visibility>
+

The CSS visibility property

+
+
+

Optional w

+
w?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional whiteSpace

+
whiteSpace?: ResponsiveValue<WhiteSpace>
+

The CSS white-space property

+
+
+

Optional width

+
width?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional willChange

+
willChange?: ResponsiveValue<WillChange>
+

The CSS will-change property

+
+
+

Optional wordBreak

+
wordBreak?: ResponsiveValue<WordBreak>
+

The CSS word-break property

+
+
+

Optional zIndex

+
zIndex?: ResponsiveValue<"base" | "overlay" | ZIndex | "hide" | "docked" | "dropdown" | "sticky" | "banner" | "modal" | "popover" | "skipLink" | "toast" | "tooltip">
+

The CSS z-index property

+
+
+
+
+

Settings

 +
+
+

Member Visibility

+
    +
    • +
    • +
    • +
    • +
    • +
+
+

Theme

+ +
+
+

Generated using TypeDoc

+
\ No newline at end of file diff --git a/docs/interfaces/CheckboxControlProps.html b/docs/interfaces/CheckboxControlProps.html new file mode 100644 index 0000000..e5850e0 --- /dev/null +++ b/docs/interfaces/CheckboxControlProps.html @@ -0,0 +1,4563 @@ +CheckboxControlProps | react-hook-form-chakra
+
+ +
+
+
+
+ +

Interface CheckboxControlProps

+
+

Hierarchy

+
    +
  • CheckboxProps +
      +
    • CheckboxControlProps
+
+
+
+ +
+
+

Properties

+
__css? +_active? +_activeLink? +_activeStep? +_after? +_autofill? +_before? +_checked? +_dark? +_disabled? +_empty? +_even? +_expanded? +_first? +_firstLetter? +_focus? +_focusVisible? +_focusWithin? +_fullScreen? +_grabbed? +_groupActive? +_groupChecked? +_groupDisabled? +_groupFocus? +_groupFocusVisible? +_groupFocusWithin? +_groupHover? +_groupInvalid? +_hidden? +_highlighted? +_hover? +_indeterminate? +_invalid? +_last? +_light? +_loading? +_ltr? +_mediaDark? +_mediaReduceMotion? +_notFirst? +_notLast? +_odd? +_peerActive? +_peerChecked? +_peerDisabled? +_peerFocus? +_peerFocusVisible? +_peerFocusWithin? +_peerHover? +_peerInvalid? +_peerPlaceholderShown? +_placeholder? +_placeholderShown? +_pressed? +_readOnly? +_rtl? +_selected? +_selection? +_valid? +_visited? +alignContent? +alignItems? +alignSelf? +animation? +appearance? +apply? +aria-activedescendant? +aria-atomic? +aria-autocomplete? +aria-busy? +aria-checked? +aria-colcount? +aria-colindex? +aria-colspan? +aria-controls? +aria-current? +aria-details? +aria-disabled? +aria-dropeffect? +aria-errormessage? +aria-expanded? +aria-flowto? +aria-grabbed? +aria-haspopup? +aria-hidden? +aria-keyshortcuts? +aria-label? +aria-labelledby? +aria-level? +aria-live? +aria-modal? +aria-multiline? +aria-multiselectable? +aria-orientation? +aria-owns? +aria-placeholder? +aria-posinset? +aria-pressed? +aria-readonly? +aria-relevant? +aria-required? +aria-roledescription? +aria-rowcount? +aria-rowindex? +aria-rowspan? +aria-selected? +aria-setsize? +aria-sort? +aria-valuemax? +aria-valuemin? +aria-valuenow? +aria-valuetext? +backdropBlur? +backdropBrightness? +backdropContrast? +backdropFilter? +backdropHueRotate? +backdropInvert? +backdropSaturate? +background? +backgroundAttachment? +backgroundBlendMode? +backgroundClip? +backgroundColor? +backgroundImage? +backgroundPosition? +backgroundRepeat? +backgroundSize? +bg? +bgAttachment? +bgBlendMode? +bgClip? +bgColor? +bgGradient? +bgImage? +bgImg? +bgPos? +bgPosition? +bgRepeat? +bgSize? +blendMode? +blur? +border? +borderBottom? +borderBottomColor? +borderBottomLeftRadius? +borderBottomRadius? +borderBottomRightRadius? +borderBottomStyle? +borderBottomWidth? +borderColor? +borderEndRadius? +borderInlineEndRadius? +borderInlineStartRadius? +borderLeft? +borderLeftColor? +borderLeftRadius? +borderLeftStyle? +borderLeftWidth? +borderRadius? +borderRight? +borderRightColor? +borderRightRadius? +borderRightStyle? +borderRightWidth? +borderStartRadius? +borderStyle? +borderTop? +borderTopColor? +borderTopLeftRadius? +borderTopRadius? +borderTopRightRadius? +borderTopStyle? +borderTopWidth? +borderWidth? +borderX? +borderY? +bottom? +boxDecorationBreak? +boxShadow? +boxSize? +boxSizing? +brightness? +clipPath? +color? +columnGap? +contrast? +control? +css? +cursor? +display? +dropShadow? +fill? +filter? +flex? +flexBasis? +flexDir? +flexDirection? +flexFlow? +flexGrow? +flexShrink? +flexWrap? +float? +fontFamily? +fontSize? +fontStyle? +fontWeight? +gap? +gridArea? +gridAutoColumns? +gridAutoFlow? +gridAutoRows? +gridColumn? +gridColumnEnd? +gridColumnGap? +gridColumnStart? +gridGap? +gridRow? +gridRowEnd? +gridRowGap? +gridRowStart? +gridTemplate? +gridTemplateAreas? +gridTemplateColumns? +gridTemplateRows? +h? +height? +hideBelow? +hideFrom? +hueRotate? +icon? +iconColor? +iconSize? +id? +inputMode? +inputProps? +inset? +insetEnd? +insetInlineEnd? +insetStart? +insetX? +insetY? +invert? +is? +isChecked? +isDisabled? +isFocusable? +isIndeterminate? +isInvalid? +isReadOnly? +isRequired? +isTruncated? +isolation? +justifyContent? +justifyItems? +justifySelf? +label? +layerStyle? +left? +letterSpacing? +lineHeight? +listStyleImage? +listStyleImg? +listStylePos? +listStylePosition? +m? +margin? +marginBottom? +marginEnd? +marginInlineEnd? +marginInlineStart? +marginLeft? +marginRight? +marginStart? +marginTop? +marginX? +marginY? +maxH? +maxHeight? +maxW? +maxWidth? +mb? +me? +minH? +minHeight? +minW? +minWidth? +mixBlendMode? +ml? +mr? +ms? +mt? +mx? +my? +name +noOfLines? +objectFit? +objectPosition? +onChange? +onFocus? +onKeyPress? +onKeyPressCapture? +opacity? +order? +outline? +outlineColor? +outlineOffset? +overflow? +overflowWrap? +overflowX? +overflowY? +overscroll? +overscrollBehavior? +overscrollBehaviorX? +overscrollBehaviorY? +overscrollX? +overscrollY? +p? +padding? +paddingBottom? +paddingEnd? +paddingInlineEnd? +paddingInlineStart? +paddingLeft? +paddingRight? +paddingStart? +paddingTop? +paddingX? +paddingY? +pb? +pe? +pl? +placeContent? +placeItems? +placeSelf? +pointerEvents? +pos? +position? +pr? +ps? +pt? +px? +py? +resize? +right? +ring? +ringColor? +ringInset? +ringOffset? +ringOffsetColor? +rotate? +rounded? +roundedBottom? +roundedBottomLeft? +roundedBottomRight? +roundedEnd? +roundedLeft? +roundedRight? +roundedStart? +roundedTop? +roundedTopLeft? +roundedTopRight? +rowGap? +saturate? +scale? +scaleX? +scaleY? +shadow? +skewX? +skewY? +spacing? +srOnly? +stroke? +sx? +tabIndex? +textAlign? +textColor? +textDecor? +textDecoration? +textDecorationColor? +textDecorationLine? +textDecorationStyle? +textDecorationThickness? +textIndent? +textOverflow? +textShadow? +textStyle? +textTransform? +textUnderlineOffset? +top? +transform? +transformOrigin? +transition? +transitionDelay? +transitionDuration? +transitionProperty? +transitionTimingFunction? +translateX? +translateY? +userSelect? +value? +verticalAlign? +visibility? +w? +whiteSpace? +width? +willChange? +wordBreak? +zIndex? +
+
+

Properties

+
+

Optional Private __css

+
__css?: SystemStyleObject
+

Used for internal css management

+
+
+

Optional _active

+
_active?: SystemStyleObject
+

Styles for CSS Selector &:active

+
+
+

Optional _activeLink

+
_activeLink?: SystemStyleObject
+

Used to style the active link in a navigation +Styles for CSS Selector &[aria-current=page]

+
+
+

Optional _activeStep

+
_activeStep?: SystemStyleObject
+

Used to style the current step within a process +Styles for CSS Selector &[aria-current=step]

+
+
+

Optional _after

+
_after?: SystemStyleObject
+

Styles for CSS selector &::after

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _after={{content:`""` }}/>
+
+
+
+

Optional _autofill

+
_autofill?: SystemStyleObject
+

Styles for CSS Selector &:-webkit-autofill

+
+
+

Optional _before

+
_before?: SystemStyleObject
+

Styles for CSS selector &::before

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _before={{content:`""` }}/>
+
+
+
+

Optional _checked

+
_checked?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is true

+
    +
  • CSS selector &[aria-checked=true]
    • +
+
+
+

Optional _dark

+
_dark?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _disabled

+
_disabled?: SystemStyleObject
+

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

+
    +
  • &[aria-disabled=true]
    • +
  • &:disabled
    • +
  • &[data-disabled]
    • +
  • &[disabled]
    • +
+
+
+

Optional _empty

+
_empty?: SystemStyleObject
+

Styles for CSS selector &:empty

+
+
+

Optional _even

+
_even?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(even)

+
+
+

Optional _expanded

+
_expanded?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-expanded is true

+
    +
  • CSS selector &[aria-expanded=true]
    • +
+
+
+

Optional _first

+
_first?: SystemStyleObject
+

Styles for CSS Selector &:first-of-type

+
+
+

Optional _firstLetter

+
_firstLetter?: SystemStyleObject
+

Styles for CSS selector &::first-letter

+

NOTE: This selector is only applied for block-level elements and not preceded by an image or table.

+ +

Example

<Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
+
+
+
+

Optional _focus

+
_focus?: SystemStyleObject
+

Styles for CSS selector &:focus

+
+
+

Optional _focusVisible

+
_focusVisible?: SystemStyleObject
+

Styles to apply when this element has received focus via tabbing

+
    +
  • CSS Selector &:focus-visible
    • +
+
+
+

Optional _focusWithin

+
_focusWithin?: SystemStyleObject
+

Styles to apply when a child of this element has received focus

+
    +
  • CSS Selector &:focus-within
    • +
+
+
+

Optional _fullScreen

+
_fullScreen?: SystemStyleObject
+

Styles for CSS Selector &:fullscreen.

+
+
+

Optional _grabbed

+
_grabbed?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-grabbed is true

+
    +
  • CSS selector &[aria-grabbed=true]
    • +
+
+
+

Optional _groupActive

+
_groupActive?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is active

+
+
+

Optional _groupChecked

+
_groupChecked?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is checked

+
+
+

Optional _groupDisabled

+
_groupDisabled?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is disabled

+
+
+

Optional _groupFocus

+
_groupFocus?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is focused

+
+
+

Optional _groupFocusVisible

+
_groupFocusVisible?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has visible focus

+
+
+

Optional _groupFocusWithin

+
_groupFocusWithin?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has focus within

+
+
+

Optional _groupHover

+
_groupHover?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is hovered

+
+
+

Optional _groupInvalid

+
_groupInvalid?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is invalid

+
+
+

Optional _hidden

+
_hidden?: SystemStyleObject
+

Styles for CSS Selector [hidden=true]

+
+
+

Optional _highlighted

+
_highlighted?: SystemStyleObject
+

Styles for the highlighted state.

+
+
+

Optional _hover

+
_hover?: SystemStyleObject
+

Styles for CSS selector &:hover

+
+
+

Optional _indeterminate

+
_indeterminate?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is mixed

+
    +
  • CSS selector &[aria-checked=mixed]
    • +
+
+
+

Optional _invalid

+
_invalid?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-invalid is true

+
    +
  • CSS selector &[aria-invalid=true]
    • +
+
+
+

Optional _last

+
_last?: SystemStyleObject
+

Styles for CSS Selector &:last-of-type

+
+
+

Optional _light

+
_light?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _loading

+
_loading?: SystemStyleObject
+

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. +Useful for styling loading states

+
+
+

Optional _ltr

+
_ltr?: SystemStyleObject
+

Styles for CSS Selector [dir=ltr] & +It is applied when a parent element or this element has dir="ltr"

+
+
+

Optional _mediaDark

+
_mediaDark?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-color-scheme: dark) +It is used when the user has requested the system use a light or dark color theme.

+
+
+

Optional _mediaReduceMotion

+
_mediaReduceMotion?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-reduced-motion: reduce) +It is used when the user has requested the system to reduce the amount of animations.

+
+
+

Optional _notFirst

+
_notFirst?: SystemStyleObject
+

Styles for CSS Selector &:not(:first-of-type)

+
+
+

Optional _notLast

+
_notLast?: SystemStyleObject
+

Styles for CSS Selector &:not(:last-of-type)

+
+
+

Optional _odd

+
_odd?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(odd)

+
+
+

Optional _peerActive

+
_peerActive?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is active

+
+
+

Optional _peerChecked

+
_peerChecked?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is checked

+
+
+

Optional _peerDisabled

+
_peerDisabled?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is disabled

+
+
+

Optional _peerFocus

+
_peerFocus?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is focused

+
+
+

Optional _peerFocusVisible

+
_peerFocusVisible?: SystemStyleObject
+

Styles to apply when a sibling element with .peeror data-peer has visible focus

+
+
+

Optional _peerFocusWithin

+
_peerFocusWithin?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has focus within

+
+
+

Optional _peerHover

+
_peerHover?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is hovered

+
+
+

Optional _peerInvalid

+
_peerInvalid?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is invalid

+
+
+

Optional _peerPlaceholderShown

+
_peerPlaceholderShown?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

+
+
+

Optional _placeholder

+
_placeholder?: SystemStyleObject
+

Styles for CSS Selector &::placeholder.

+
+
+

Optional _placeholderShown

+
_placeholderShown?: SystemStyleObject
+

Styles for CSS Selector &:placeholder-shown.

+
+
+

Optional _pressed

+
_pressed?: SystemStyleObject
+

Styles for CSS Selector &[aria-pressed=true] +Typically used to style the current "pressed" state of toggle buttons

+
+
+

Optional _readOnly

+
_readOnly?: SystemStyleObject
+

Styles for CSS Selector &:readonly

+
+
+

Optional _rtl

+
_rtl?: SystemStyleObject
+

Styles for CSS Selector [dir=rtl] & +It is applied when a parent element or this element has dir="rtl"

+
+
+

Optional _selected

+
_selected?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-selected is true

+
    +
  • CSS selector &[aria-selected=true]
    • +
+
+
+

Optional _selection

+
_selection?: SystemStyleObject
+

Styles for CSS Selector &::selection

+
+
+

Optional _valid

+
_valid?: SystemStyleObject
+

Styles for the valid state

+
    +
  • CSS selector &[data-valid], &[data-state=valid]
    • +
+
+
+

Optional _visited

+
_visited?: SystemStyleObject
+

Styles for CSS Selector &:visited

+
+
+

Optional alignContent

+
alignContent?: ResponsiveValue<AlignContent>
+

The CSS align-content property.

+

It defines the distribution of space between and around +content items along a flexbox cross-axis or a grid's block axis.

+ +

See

Mozilla Docs

+
+
+

Optional alignItems

+
alignItems?: ResponsiveValue<AlignItems>
+

The CSS align-items property.

+

It defines the align-self value on all direct children as a group.

+
    +
  • In Flexbox, it controls the alignment of items on the Cross Axis.
    • +
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
    • +
+ +

See

Mozilla Docs

+
+
+

Optional alignSelf

+
alignSelf?: ResponsiveValue<AlignSelf>
+

The CSS align-self property.

+

It works like align-items, but applies only to a +single flexbox item, instead of all of them.

+ +

See

Mozilla Docs

+
+
+

Optional animation

+
animation?: ResponsiveValue<Animation<string & {}>>
+

The CSS animation property

+
+
+

Optional appearance

+
appearance?: ResponsiveValue<Appearance>
+

The CSS appearance property

+
+
+

Optional apply

+
apply?: ResponsiveValue<string>
+

Apply theme-aware style objects in theme

+ +

Example

<Box apply="styles.h3">This is a div</Box>
+
+

This will apply styles defined in theme.styles.h3

+
+
+

Optional aria-activedescendant

+
aria-activedescendant?: string
+

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

+
+
+

Optional aria-atomic

+
aria-atomic?: Booleanish
+

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

+
+
+

Optional aria-autocomplete

+
aria-autocomplete?: "none" | "both" | "inline" | "list"
+

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be +presented if they are made.

+
+
+

Optional aria-busy

+
aria-busy?: Booleanish
+

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

+
+
+

Optional aria-checked

+
aria-checked?: boolean | "true" | "false" | "mixed"
+

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

+ +

See

    +
  • aria-pressed
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-colcount

+
aria-colcount?: number
+

Defines the total number of columns in a table, grid, or treegrid.

+ +

See

aria-colindex.

+
+
+

Optional aria-colindex

+
aria-colindex?: number
+

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

+ +

See

    +
  • aria-colcount
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-colspan

+
aria-colspan?: number
+

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-colindex
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-controls

+
aria-controls?: string
+

Identifies the element (or elements) whose contents or presence are controlled by the current element.

+ +

See

aria-owns.

+
+
+

Optional aria-current

+
aria-current?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"
+

Indicates the element that represents the current item within a container or set of related elements.

+
+
+

Optional aria-details

+
aria-details?: string
+

Identifies the element that provides a detailed, extended description for the object.

+ +

See

aria-describedby.

+
+
+

Optional aria-disabled

+
aria-disabled?: Booleanish
+

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

+ +

See

    +
  • aria-hidden
    • +
  • aria-readonly.
    • +
+
+
+

Optional aria-dropeffect

+
aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"
+

Indicates what functions can be performed when a dragged object is released on the drop target.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-errormessage

+
aria-errormessage?: string
+

Identifies the element that provides an error message for the object.

+ +

See

    +
  • aria-invalid
    • +
  • aria-describedby.
    • +
+
+
+

Optional aria-expanded

+
aria-expanded?: Booleanish
+

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

+
+
+

Optional aria-flowto

+
aria-flowto?: string
+

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, +allows assistive technology to override the general default of reading in document source order.

+
+
+

Optional aria-grabbed

+
aria-grabbed?: Booleanish
+

Indicates an element's "grabbed" state in a drag-and-drop operation.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-haspopup

+
aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "true" | "false" | "tree"
+

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

+
+
+

Optional aria-hidden

+
aria-hidden?: Booleanish
+

Indicates whether the element is exposed to an accessibility API.

+ +

See

aria-disabled.

+
+
+

Optional aria-keyshortcuts

+
aria-keyshortcuts?: string
+

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

+
+
+

Optional aria-label

+
aria-label?: string
+

Defines the string that labels the checkbox element.

+
+
+

Optional aria-labelledby

+
aria-labelledby?: string
+

Refers to the id of the element that labels the checkbox element.

+
+
+

Optional aria-level

+
aria-level?: number
+

Defines the hierarchical level of an element within a structure.

+
+
+

Optional aria-live

+
aria-live?: "off" | "assertive" | "polite"
+

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

+
+
+

Optional aria-modal

+
aria-modal?: Booleanish
+

Indicates whether an element is modal when displayed.

+
+
+

Optional aria-multiline

+
aria-multiline?: Booleanish
+

Indicates whether a text box accepts multiple lines of input or only a single line.

+
+
+

Optional aria-multiselectable

+
aria-multiselectable?: Booleanish
+

Indicates that the user may select more than one item from the current selectable descendants.

+
+
+

Optional aria-orientation

+
aria-orientation?: "horizontal" | "vertical"
+

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

+
+
+

Optional aria-owns

+
aria-owns?: string
+

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship +between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

+ +

See

aria-controls.

+
+
+

Optional aria-placeholder

+
aria-placeholder?: string
+

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. +A hint could be a sample value or a brief description of the expected format.

+
+
+

Optional aria-posinset

+
aria-posinset?: number
+

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-setsize.

+
+
+

Optional aria-pressed

+
aria-pressed?: boolean | "true" | "false" | "mixed"
+

Indicates the current "pressed" state of toggle buttons.

+ +

See

    +
  • aria-checked
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-readonly

+
aria-readonly?: Booleanish
+

Indicates that the element is not editable, but is otherwise operable.

+ +

See

aria-disabled.

+
+
+

Optional aria-relevant

+
aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
+

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

+ +

See

aria-atomic.

+
+
+

Optional aria-required

+
aria-required?: Booleanish
+

Indicates that user input is required on the element before a form may be submitted.

+
+
+

Optional aria-roledescription

+
aria-roledescription?: string
+

Defines a human-readable, author-localized description for the role of an element.

+
+
+

Optional aria-rowcount

+
aria-rowcount?: number
+

Defines the total number of rows in a table, grid, or treegrid.

+ +

See

aria-rowindex.

+
+
+

Optional aria-rowindex

+
aria-rowindex?: number
+

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowcount
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-rowspan

+
aria-rowspan?: number
+

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowindex
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-selected

+
aria-selected?: Booleanish
+

Indicates the current "selected" state of various widgets.

+ +

See

    +
  • aria-checked
    • +
  • aria-pressed.
    • +
+
+
+

Optional aria-setsize

+
aria-setsize?: number
+

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-posinset.

+
+
+

Optional aria-sort

+
aria-sort?: "none" | "ascending" | "descending" | "other"
+

Indicates if items in a table or grid are sorted in ascending or descending order.

+
+
+

Optional aria-valuemax

+
aria-valuemax?: number
+

Defines the maximum allowed value for a range widget.

+
+
+

Optional aria-valuemin

+
aria-valuemin?: number
+

Defines the minimum allowed value for a range widget.

+
+
+

Optional aria-valuenow

+
aria-valuenow?: number
+

Defines the current value for a range widget.

+ +

See

aria-valuetext.

+
+
+

Optional aria-valuetext

+
aria-valuetext?: string
+

Defines the human readable text alternative of aria-valuenow for a range widget.

+
+
+

Optional backdropBlur

+
backdropBlur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the backdrop-blur filter value of an element. +Value is assigned to --chakra-backdrop-blur css variable

+
+
+

Optional backdropBrightness

+
backdropBrightness?: ResponsiveValue<Length>
+

Sets the backdrop-brightness filter value of an element. +Value is assigned to --chakra-backdrop-brightness css variable

+
+
+

Optional backdropContrast

+
backdropContrast?: ResponsiveValue<Length>
+

Sets the backdrop-contrast filter value of an element. +Value is assigned to --chakra-backdrop-contrast css variable

+
+
+

Optional backdropFilter

+
backdropFilter?: ResponsiveValue<"auto" | BackdropFilter>
+

The CSS backdrop-filter property. When set to auto, you allow +Chakra UI to define the color based on the backdrop filter style props +(backdropBlur, backdropSaturate, etc.)

+
+
+

Optional backdropHueRotate

+
backdropHueRotate?: ResponsiveValue<Length>
+

Sets the backdrop-hue-rotate filter value of an element. +Value is assigned to --chakra-backdrop-hue-rotate css variable

+
+
+

Optional backdropInvert

+
backdropInvert?: ResponsiveValue<Length>
+

Sets the backdrop-invert filter value of an element. +Value is assigned to --chakra-backdrop-invert css variable

+
+
+

Optional backdropSaturate

+
backdropSaturate?: ResponsiveValue<Length>
+

Sets the backdrop-saturate filter value of an element. +Value is assigned to --chakra-backdrop-saturate css variable

+
+
+

Optional background

+
background?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional backgroundAttachment

+
backgroundAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional backgroundBlendMode

+
backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional backgroundClip

+
backgroundClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional backgroundColor

+
backgroundColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional backgroundImage

+
backgroundImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional backgroundPosition

+
backgroundPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional backgroundRepeat

+
backgroundRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional backgroundSize

+
backgroundSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional bg

+
bg?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional bgAttachment

+
bgAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional bgBlendMode

+
bgBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional bgClip

+
bgClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional bgColor

+
bgColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional bgGradient

+
bgGradient?: ResponsiveValue<string | string & {}>
+

The background-gradient shorthand

+
+
+

Optional bgImage

+
bgImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgImg

+
bgImg?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgPos

+
bgPos?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgPosition

+
bgPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgRepeat

+
bgRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional bgSize

+
bgSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional blendMode

+
blendMode?: ResponsiveValue<MixBlendMode>
+

The blend-mode property

+
+
+

Optional blur

+
blur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the blur filter value of an element. +Value is assigned to --chakra-filter css variable

+
+
+

Optional border

+
border?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border property

+
+
+

Optional borderBottom

+
borderBottom?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-bottom property

+
+
+

Optional borderBottomColor

+
borderBottomColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderBottomColor>
+

The CSS border-bottom-color property

+
+
+

Optional borderBottomLeftRadius

+
borderBottomLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional borderBottomRadius

+
borderBottomRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional borderBottomRightRadius

+
borderBottomRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional borderBottomStyle

+
borderBottomStyle?: ResponsiveValue<BorderBottomStyle>
+

The CSS border-bottom-style property

+
+
+

Optional borderBottomWidth

+
borderBottomWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-bottom-width property

+
+
+

Optional borderColor

+
borderColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-color property

+
+
+

Optional borderEndRadius

+
borderEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineEndRadius

+
borderInlineEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderInlineEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineStartRadius

+
borderInlineStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderInlineStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderLeft

+
borderLeft?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-left property

+
+
+

Optional borderLeftColor

+
borderLeftColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderLeftColor>
+

The CSS border-left-color property

+
+
+

Optional borderLeftRadius

+
borderLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional borderLeftStyle

+
borderLeftStyle?: ResponsiveValue<BorderLeftStyle>
+

The CSS border-left-style property

+
+
+

Optional borderLeftWidth

+
borderLeftWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-left-width property

+
+
+

Optional borderRadius

+
borderRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional borderRight

+
borderRight?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right property

+
+
+

Optional borderRightColor

+
borderRightColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderRightColor>
+

The CSS border-right-color property

+
+
+

Optional borderRightRadius

+
borderRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional borderRightStyle

+
borderRightStyle?: ResponsiveValue<BorderRightStyle>
+

The CSS border-right-styles property

+
+
+

Optional borderRightWidth

+
borderRightWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-right-width property

+
+
+

Optional borderStartRadius

+
borderStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderStyle

+
borderStyle?: ResponsiveValue<BorderStyle>
+

The CSS border-style property

+
+
+

Optional borderTop

+
borderTop?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top property

+
+
+

Optional borderTopColor

+
borderTopColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-top-color property

+
+
+

Optional borderTopLeftRadius

+
borderTopLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional borderTopRadius

+
borderTopRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional borderTopRightRadius

+
borderTopRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional borderTopStyle

+
borderTopStyle?: ResponsiveValue<BorderTopStyle>
+

The CSS border-top-style property

+
+
+

Optional borderTopWidth

+
borderTopWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-top-width property

+
+
+

Optional borderWidth

+
borderWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-width property

+
+
+

Optional borderX

+
borderX?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right and border-left property

+
+
+

Optional borderY

+
borderY?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top and border-bottom property

+
+
+

Optional bottom

+
bottom?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS bottom property

+
+
+

Optional boxDecorationBreak

+
boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>
+

The CSS box-decoration property

+
+
+

Optional boxShadow

+
boxShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional boxSize

+
boxSize?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width and height property

+
+
+

Optional boxSizing

+
boxSizing?: BoxSizing
+

The CSS box-sizing property

+
+
+

Optional brightness

+
brightness?: ResponsiveValue<Length>
+

Sets the brightness filter value of an element. +Value is assigned to --chakra-brightness css variable

+
+
+

Optional clipPath

+
clipPath?: ResponsiveValue<ClipPath>
+

The CSS clip-path property.

+

It creates a clipping region that sets what part of an element should be shown.

+
+
+

Optional color

+
color?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional columnGap

+
columnGap?: ResponsiveValue<ColumnGap<Length>>
+

The CSS column-gap property.

+

It sets the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional contrast

+
contrast?: ResponsiveValue<Length>
+

Sets the contrast filter value of an element. +Value is assigned to --chakra-contrast css variable

+
+
+

Optional control

+
control?: Control<any, any>
+

The control passed down from react-hook-form. +Only required if not using FormProvider

+
+
+

Optional css

+
css?: Interpolation<{}>
+

The emotion's css style object

+
+
+

Optional cursor

+
cursor?: ResponsiveValue<Cursor>
+

The CSS cursor property

+
+
+

Optional display

+
display?: ResponsiveValue<Display>
+

The CSS display property

+
+
+

Optional dropShadow

+
dropShadow?: ResponsiveValue<"base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

Sets the drop-shadow filter value of an element. +Value is assigned to --chakra-drop-shadow css variable

+
+
+

Optional fill

+
fill?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS fill property for icon svgs and paths

+
+
+

Optional filter

+
filter?: ResponsiveValue<Filter | "auto">
+

The CSS filter property. When set to auto, you allow +Chakra UI to define the color based on the filter style props +(blur, saturate, etc.)

+
+
+

Optional flex

+
flex?: ResponsiveValue<Flex<Length>>
+

The CSS flex property.

+

It defines how a flex item will grow or shrink +to fit the space available in its flex container.

+ +

See

Mozilla Docs

+
+
+

Optional flexBasis

+
flexBasis?: ResponsiveValue<FlexBasis<Length>>
+

The CSS flex-basis property.

+

It defines the initial main size of a flex item.

+ +

See

Mozilla Docs

+
+
+

Optional flexDir

+
flexDir?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexDirection

+
flexDirection?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexFlow

+
flexFlow?: ResponsiveValue<FlexFlow>
+

The CSS flex-flow property.

+

It is a shorthand property for flex-direction and flex-wrap. +It specifies the direction of a flex container, as well as its wrapping behavior.

+ +

See

Mozilla Docs

+
+
+

Optional flexGrow

+
flexGrow?: ResponsiveValue<FlexGrow>
+

The CSS flex-grow property.

+

It defines how much a flexbox item should grow +if there's space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexShrink

+
flexShrink?: ResponsiveValue<FlexShrink>
+

The CSS flex-shrink property.

+

It defines how much a flexbox item should shrink +if there's not enough space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexWrap

+
flexWrap?: ResponsiveValue<FlexWrap>
+

The CSS flex-wrap property.

+

It defines whether flex items are forced onto one line or +can wrap onto multiple lines. If wrapping is allowed, +it sets the direction that lines are stacked.

+ +

See

Mozilla Docs

+
+
+

Optional float

+
float?: ResponsiveValue<Float>
+

The CSS float property

+
+
+

Optional fontFamily

+
fontFamily?: ResponsiveValue<"body" | FontFamily | "heading" | "mono">
+

The CSS font-family property

+
+
+

Optional fontSize

+
fontSize?: ResponsiveValue<number | "small" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl">
+

The CSS font-size property

+
+
+

Optional fontStyle

+
fontStyle?: ResponsiveValue<FontStyle>
+

The CSS font-style property

+
+
+

Optional fontWeight

+
fontWeight?: ResponsiveValue<number | "bold" | string & {} | "black" | "normal" | "hairline" | "thin" | "light" | "medium" | "semibold" | "extrabold">
+

The CSS font-weight property

+
+
+

Optional gap

+
gap?: ResponsiveValue<Gap<Length>>
+

The CSS gap property.

+

It defines the gap between items in both flex and +grid contexts.

+ +

See

Mozilla Docs

+
+
+

Optional gridArea

+
gridArea?: ResponsiveValue<GridArea>
+

The CSS grid-areas property.

+

It specifies a grid item’s size and location within a grid by +contributing a line, a span, or nothing (automatic) +to its grid placement, thereby specifying the edges of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoColumns

+
gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>
+

The CSS grid-auto-columns property.

+

It specifies the size of an implicitly-created grid column track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoFlow

+
gridAutoFlow?: ResponsiveValue<GridAutoFlow>
+

The CSS grid-auto-flow property

+

It controls how the auto-placement algorithm works, +specifying exactly how auto-placed items get flowed into the grid.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoRows

+
gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>
+

The CSS grid-auto-rows property.

+

It specifies the size of an implicitly-created grid row track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumn

+
gridColumn?: ResponsiveValue<GridColumn>
+

The CSS grid-column property.

+

It specifies a grid item's size and location within a grid column +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnEnd

+
gridColumnEnd?: ResponsiveValue<GridColumnEnd>
+

The CSS grid-column property

+

It specifies a grid item’s end position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the block-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnGap

+
gridColumnGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-column-gap property.

+

It defines the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnStart

+
gridColumnStart?: ResponsiveValue<GridColumnStart>
+

The CSS grid-column property.

+

It specifies a grid item’s start position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement

+ +

See

Mozilla Docs

+
+
+

Optional gridGap

+
gridGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-gap property.

+

It defines the gaps (gutters) between rows and columns

+ +

See

Mozilla Docs

+
+
+

Optional gridRow

+
gridRow?: ResponsiveValue<GridRow>
+

The CSS grid-row property

+

It specifies a grid item’s size and location within the grid row +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowEnd

+
gridRowEnd?: ResponsiveValue<GridRowEnd>
+

The CSS grid-row-end property

+

It specifies a grid item’s end position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowGap

+
gridRowGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-row-gap property.

+

It defines the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowStart

+
gridRowStart?: ResponsiveValue<GridRowStart>
+

The CSS grid-row-start property

+

It specifies a grid item’s start position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplate

+
gridTemplate?: ResponsiveValue<GridTemplate>
+

The CSS grid-template property.

+

It is a shorthand property for defining grid columns, rows, and areas.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateAreas

+
gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>
+

The CSS grid-template-areas property.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateColumns

+
gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>
+

The CSS grid-template-columns property

+

It defines the line names and track sizing functions of the grid columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateRows

+
gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>
+

The CSS grid-template-rows property.

+

It defines the line names and track sizing functions of the grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional h

+
h?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional height

+
height?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional hideBelow

+
hideBelow?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element below the specified breakpoint

+
+
+

Optional hideFrom

+
hideFrom?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element from the specified breakpoint and up

+
+
+

Optional hueRotate

+
hueRotate?: ResponsiveValue<Length>
+

Sets the hue-rotate filter value of an element. +Value is assigned to --chakra-hue-rotate css variable

+
+
+

Optional icon

+
icon?: ReactElement<any, string | JSXElementConstructor<any>>
+

The checked icon to use

+ +

Default

CheckboxIcon

+
+
+

Optional iconColor

+
iconColor?: string
+

The color of the checkbox icon when checked or indeterminate

+
+
+

Optional iconSize

+
iconSize?: string | number
+

The size of the checkbox icon when checked or indeterminate

+
+
+

Optional id

+
id?: string
+

id assigned to input

+
+
+

Optional inputMode

+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
+

Hints at the type of data that might be entered by the user while editing the element or its contents

+ +

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

+
+
+

Optional inputProps

+
inputProps?: InputHTMLAttributes<HTMLInputElement>
+

Additional props to be forwarded to the input element

+
+
+

Optional inset

+
inset?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, right, top, bottom property

+
+
+

Optional insetEnd

+
insetEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetEnd is equivalent to right. +When the direction is rtl, insetEnd is equivalent to left.

+
+
+

Optional insetInlineEnd

+
insetInlineEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetInlineEnd is equivalent to right. +When the direction is rtl, insetInlineEnd is equivalent to left.

+
+
+

Optional insetStart

+
insetStart?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is start, end is equivalent to left. +When the direction is start, end is equivalent to right.

+
+
+

Optional insetX

+
insetX?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, and right property

+
+
+

Optional insetY

+
insetY?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top, and bottom property

+
+
+

Optional invert

+
invert?: ResponsiveValue<Length>
+

Sets the invert filter value of an element. +Value is assigned to --chakra-invert css variable

+
+
+

Optional is

+
is?: string
+

Specify that a standard HTML element should behave like a defined custom built-in element

+ +

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

+
+
+

Optional isChecked

+
isChecked?: boolean
+

If true, the checkbox will be checked. +You'll need to pass onChange to update its value (since it is now controlled)

+ +

Default

false

+
+
+

Optional isDisabled

+
isDisabled?: boolean
+

If true, the checkbox will be disabled

+ +

Default

false

+
+
+

Optional isFocusable

+
isFocusable?: boolean
+

If true and isDisabled is passed, the checkbox will +remain tabbable but not interactive

+ +

Default

false

+
+
+

Optional isIndeterminate

+
isIndeterminate?: boolean
+

If true, the checkbox will be indeterminate. +This only affects the icon shown inside checkbox +and does not modify the isChecked property.

+ +

Default

false

+
+
+

Optional isInvalid

+
isInvalid?: boolean
+

If true, the checkbox is marked as invalid. +Changes style of unchecked state.

+ +

Default

false

+
+
+

Optional isReadOnly

+
isReadOnly?: boolean
+

If true, the checkbox will be readonly

+ +

Default

false

+
+
+

Optional isRequired

+
isRequired?: boolean
+

If true, the checkbox input is marked as required, +and required attribute will be added

+ +

Default

false

+
+
+

Optional isTruncated

+
isTruncated?: boolean
+

If true, it clamps truncate a text after one line.

+
+
+

Optional isolation

+
isolation?: ResponsiveValue<Isolation>
+

The CSS isolation property

+
+
+

Optional justifyContent

+
justifyContent?: ResponsiveValue<JustifyContent>
+

The CSS justify-content property.

+

It defines how the browser distributes space between and around content items +along the main-axis of a flex container, and the inline axis of a grid container.

+ +

See

Mozilla Docs

+
+
+

Optional justifyItems

+
justifyItems?: ResponsiveValue<JustifyItems>
+

The CSS justify-items property.

+

It defines the default justify-self for all items of the box, +giving them all a default way of justifying each box +along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional justifySelf

+
justifySelf?: ResponsiveValue<JustifySelf>
+

The CSS justify-self property.

+

It defines the way a box is justified inside its +alignment container along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional label

+
label?: string
+

The label to be associated with the input

+
+
+

Optional layerStyle

+
layerStyle?: ResponsiveValue<string & {}>
+

The layer style object to apply. +Note: Styles must be located in theme.layerStyles

+
+
+

Optional left

+
left?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left property

+
+
+

Optional letterSpacing

+
letterSpacing?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "tighter" | "tight" | "wide" | "wider" | "widest">
+

The CSS letter-spacing property

+
+
+

Optional lineHeight

+
lineHeight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "none" | "normal" | number & {} | "shorter" | "short" | "tall" | "taller">
+

The CSS line-height property

+
+
+

Optional listStyleImage

+
listStyleImage?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStyleImg

+
listStyleImg?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStylePos

+
listStylePos?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional listStylePosition

+
listStylePosition?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional m

+
m?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional margin

+
margin?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional marginBottom

+
marginBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional marginEnd

+
marginEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginEnd is equivalent to marginRight. +When direction is rtl, marginEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineEnd

+
marginInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineEnd is equivalent to marginRight. +When direction is rtl, marginInlineEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineStart

+
marginInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineStart is equivalent to marginLeft. +When direction is rtl, marginInlineStart is equivalent to marginRight.

+
+
+

Optional marginLeft

+
marginLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional marginRight

+
marginRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional marginStart

+
marginStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginStart is equivalent to marginLeft. +When direction is rtl, marginStart is equivalent to marginRight.

+
+
+

Optional marginTop

+
marginTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional marginX

+
marginX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional marginY

+
marginY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

Optional maxH

+
maxH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxHeight

+
maxHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxW

+
maxW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional maxWidth

+
maxWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional mb

+
mb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional me

+
me?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, me is equivalent to marginRight. +When direction is rtl, me is equivalent to marginLeft.

+
+
+

Optional minH

+
minH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minHeight

+
minHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minW

+
minW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional minWidth

+
minWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional mixBlendMode

+
mixBlendMode?: ResponsiveValue<MixBlendMode>
+

The mix-blend-mode property

+
+
+

Optional ml

+
ml?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional mr

+
mr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional ms

+
ms?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, ms is equivalent to marginLeft. +When direction is rtl, ms is equivalent to marginRight.

+
+
+

Optional mt

+
mt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional mx

+
mx?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional my

+
my?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

name

+
name: string
+

The name of the input (required)

+
+
+

Optional noOfLines

+
noOfLines?: ResponsiveValue<number>
+

Used to truncate text at a specific number of lines

+
+
+

Optional objectFit

+
objectFit?: ResponsiveValue<ObjectFit>
+

The CSS object-fit property

+
+
+

Optional objectPosition

+
objectPosition?: ResponsiveValue<ObjectPosition<Length>>
+

The CSS object-position property

+
+
+

Optional onChange

+
onChange?: ((event: ChangeEvent<HTMLInputElement>) => void)
+
+

Type declaration

+
    +
  • +
      +
    • (event: ChangeEvent<HTMLInputElement>): void
      • +
    • +

      The callback invoked when the checked state of the Checkbox changes.

      +
      +
      +

      Parameters

      +
        +
      • +
        event: ChangeEvent<HTMLInputElement>
      +

      Returns void

+
+

Optional onFocus

+
onFocus?: ((event: FocusEvent<HTMLInputElement, Element>) => void)
+
+

Type declaration

+
    +
  • +
      +
    • (event: FocusEvent<HTMLInputElement, Element>): void
      • +
    • +

      The callback invoked when the checkbox is focused

      +
      +
      +

      Parameters

      +
        +
      • +
        event: FocusEvent<HTMLInputElement, Element>
      +

      Returns void

+
+

Optional onKeyPress

+
onKeyPress?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional onKeyPressCapture

+
onKeyPressCapture?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional opacity

+
opacity?: ResponsiveValue<Opacity>
+

The CSS opacity property

+
+
+

Optional order

+
order?: ResponsiveValue<Order>
+

The CSS order property.

+

It defines the order to lay out an item in a flex or grid container.

+ +

See

Mozilla Docs

+
+
+

Optional outline

+
outline?: ResponsiveValue<Outline<Length>>
+

The CSS outline property

+
+
+

Optional outlineColor

+
outlineColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS outline-color property

+
+
+

Optional outlineOffset

+
outlineOffset?: ResponsiveValue<OutlineOffset<Length>>
+

The CSS outline-offset property

+
+
+

Optional overflow

+
overflow?: ResponsiveValue<Overflow>
+

The CSS overflow property

+
+
+

Optional overflowWrap

+
overflowWrap?: ResponsiveValue<OverflowWrap>
+

The CSS overflow-wrap property

+
+
+

Optional overflowX

+
overflowX?: ResponsiveValue<OverflowX>
+

The CSS overflow-x property

+
+
+

Optional overflowY

+
overflowY?: ResponsiveValue<OverflowY>
+

The CSS overflow-y property

+
+
+

Optional overscroll

+
overscroll?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehavior

+
overscrollBehavior?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehaviorX

+
overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollBehaviorY

+
overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional overscrollX

+
overscrollX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollY

+
overscrollY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional p

+
p?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional padding

+
padding?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional paddingBottom

+
paddingBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional paddingEnd

+
paddingEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingEnd is equivalent to paddingRight. +When direction is rtl, paddingEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineEnd

+
paddingInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineEnd is equivalent to paddingRight. +When direction is rtl, paddingInlineEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineStart

+
paddingInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineStart is equivalent to paddingLeft. +When direction is rtl, paddingInlineStart is equivalent to paddingRight.

+
+
+

Optional paddingLeft

+
paddingLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional paddingRight

+
paddingRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional paddingStart

+
paddingStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingStart is equivalent to paddingLeft. +When direction is rtl, paddingStart is equivalent to paddingRight.

+
+
+

Optional paddingTop

+
paddingTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional paddingX

+
paddingX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional paddingY

+
paddingY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional pb

+
pb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional pe

+
pe?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, pe is equivalent to paddingRight. +When direction is rtl, pe is equivalent to paddingLeft.

+
+
+

Optional pl

+
pl?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional placeContent

+
placeContent?: ResponsiveValue<PlaceContent>
+

The CSS place-content property.

+

It allows you to align content along both the block and +inline directions at once (i.e. the align-content and justify-content properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional placeItems

+
placeItems?: ResponsiveValue<PlaceItems>
+

The CSS place-items property.

+

It allows you to align items along both the block and +inline directions at once (i.e. the align-items and justify-items properties) +in a relevant layout system such as Grid or Flex.

+ +

See

Mozilla Docs

+
+
+

Optional placeSelf

+
placeSelf?: ResponsiveValue<PlaceSelf>
+

The CSS place-self property.

+

It allows you to align an individual item in both the block and +inline directions at once (i.e. the align-self and justify-self properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional pointerEvents

+
pointerEvents?: ResponsiveValue<PointerEvents>
+

The CSS pointer-events property

+
+
+

Optional pos

+
pos?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional position

+
position?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional pr

+
pr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional ps

+
ps?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, ps is equivalent to paddingLeft. +When direction is rtl, ps is equivalent to paddingRight.

+
+
+

Optional pt

+
pt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional px

+
px?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional py

+
py?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional resize

+
resize?: ResponsiveValue<Resize>
+

The CSS resize property

+
+
+

Optional right

+
right?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS right property

+
+
+

Optional ring

+
ring?: ResponsiveValue<Length>
+

Creates outline rings with CSS box-shadow property

+
+
+

Optional ringColor

+
ringColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the outline ring

+
+
+

Optional ringInset

+
ringInset?: ResponsiveValue<"inset" | "none">
+

If the outline ring should an inset

+
+
+

Optional ringOffset

+
ringOffset?: ResponsiveValue<Length>
+

The thickness of the offset shadow when using outline rings

+
+
+

Optional ringOffsetColor

+
ringOffsetColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the offset shadow when adding outline rings

+
+
+

Optional rotate

+
rotate?: ResponsiveValue<Length>
+

Sets the rotation value of the element

+
+
+

Optional rounded

+
rounded?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional roundedBottom

+
roundedBottom?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional roundedBottomLeft

+
roundedBottomLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional roundedBottomRight

+
roundedBottomRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional roundedEnd

+
roundedEnd?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedLeft

+
roundedLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional roundedRight

+
roundedRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional roundedStart

+
roundedStart?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedTop

+
roundedTop?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional roundedTopLeft

+
roundedTopLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional roundedTopRight

+
roundedTopRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional rowGap

+
rowGap?: ResponsiveValue<RowGap<Length>>
+

The CSS row-gap property.

+

It sets the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional saturate

+
saturate?: ResponsiveValue<Length>
+

Sets the saturation filter value of an element. +Value is assigned to --chakra-saturate css variable

+
+
+

Optional scale

+
scale?: ResponsiveValue<Length>
+

Sets the scale value of the element

+
+
+

Optional scaleX

+
scaleX?: ResponsiveValue<Length>
+

Scale value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-x
    • +
+
+
+

Optional scaleY

+
scaleY?: ResponsiveValue<Length>
+

Scale value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-y
    • +
+
+
+

Optional shadow

+
shadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional skewX

+
skewX?: ResponsiveValue<Length>
+

Skew value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-x
    • +
+
+
+

Optional skewY

+
skewY?: ResponsiveValue<Length>
+

Skew value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-y
    • +
+
+
+

Optional spacing

+
spacing?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

The spacing between the checkbox and its label text

+ +

Default

0.5rem

+
+
+

Optional srOnly

+
srOnly?: true | "focusable"
+

If true, hide an element visually without hiding it from screen readers.

+

If focusable, the sr-only styles will be undone, making the element visible +to sighted users as well as screen readers.

+
+
+

Optional stroke

+
stroke?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS stroke property for icon svgs and paths

+
+
+

Optional sx

+
sx?: SystemStyleObject
+

Used to pass theme-aware style props. +NB: This is the public API for user-land

+
+
+

Optional tabIndex

+
tabIndex?: number
+

The tab-index property of the underlying input element.

+
+
+

Optional textAlign

+
textAlign?: ResponsiveValue<TextAlign>
+

The CSS text-align property

+
+
+

Optional textColor

+
textColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional textDecor

+
textDecor?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecoration

+
textDecoration?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecorationColor

+
textDecorationColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | TextDecorationColor>
+

The CSS text-decoration-color property

+
+
+

Optional textDecorationLine

+
textDecorationLine?: ResponsiveValue<TextDecorationLine>
+

The CSS text-decoration-line property

+
+
+

Optional textDecorationStyle

+
textDecorationStyle?: ResponsiveValue<TextDecorationStyle>
+

The CSS text-decoration-style property

+
+
+

Optional textDecorationThickness

+
textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>
+

The CSS text-decoration-thickness property

+
+
+

Optional textIndent

+
textIndent?: ResponsiveValue<TextIndent<0 | string & {}>>
+

The CSS text-indent property

+
+
+

Optional textOverflow

+
textOverflow?: ResponsiveValue<TextOverflow>
+

The CSS text-overflow property

+
+
+

Optional textShadow

+
textShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "inner" | "dark-lg" | TextShadow>
+

The text-shadow property

+
+
+

Optional textStyle

+
textStyle?: ResponsiveValue<string & {}>
+

The text style object to apply. +Note: Styles must be located in theme.textStyles

+
+
+

Optional textTransform

+
textTransform?: ResponsiveValue<TextTransform>
+

The CSS text-transform property

+
+
+

Optional textUnderlineOffset

+
textUnderlineOffset?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto">
+

The CSS text-underline-offset property

+
+
+

Optional top

+
top?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top property

+
+
+

Optional transform

+
transform?: ResponsiveValue<"auto" | Transform | "auto-gpu">
+

The CSS transform property

+
+
+

Optional transformOrigin

+
transformOrigin?: ResponsiveValue<number | "center" | "px" | "top" | "right" | "bottom" | "left" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS transform-origin property

+
+
+

Optional transition

+
transition?: ResponsiveValue<Transition<string & {}>>
+

The CSS transition property

+
+
+

Optional transitionDelay

+
transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>
+

The CSS transition-delay property

+
+
+

Optional transitionDuration

+
transitionDuration?: ResponsiveValue<string>
+

The CSS transition-duration property

+
+
+

Optional transitionProperty

+
transitionProperty?: ResponsiveValue<TransitionProperty>
+

The CSS transition-property property

+
+
+

Optional transitionTimingFunction

+
transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>
+

The CSS transition-timing-function property

+
+
+

Optional translateX

+
translateX?: ResponsiveValue<Length>
+

Translate value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-x
    • +
+
+
+

Optional translateY

+
translateY?: ResponsiveValue<Length>
+

Translate value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-y
    • +
+
+
+

Optional userSelect

+
userSelect?: ResponsiveValue<UserSelect>
+

The CSS user-select property

+
+
+

Optional value

+
value?: string | number
+

The value to be used in the checkbox input. +This is the value that will be returned on form submission.

+
+
+

Optional verticalAlign

+
verticalAlign?: ResponsiveValue<VerticalAlign<Length>>
+

The CSS vertical-align property

+
+
+

Optional visibility

+
visibility?: ResponsiveValue<Visibility>
+

The CSS visibility property

+
+
+

Optional w

+
w?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional whiteSpace

+
whiteSpace?: ResponsiveValue<WhiteSpace>
+

The CSS white-space property

+
+
+

Optional width

+
width?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional willChange

+
willChange?: ResponsiveValue<WillChange>
+

The CSS will-change property

+
+
+

Optional wordBreak

+
wordBreak?: ResponsiveValue<WordBreak>
+

The CSS word-break property

+
+
+

Optional zIndex

+
zIndex?: ResponsiveValue<"base" | "overlay" | ZIndex | "hide" | "docked" | "dropdown" | "sticky" | "banner" | "modal" | "popover" | "skipLink" | "toast" | "tooltip">
+

The CSS z-index property

+
+
+
+
+

Settings

 +
+
+

Member Visibility

+
    +
    • +
    • +
    • +
    • +
    • +
+
+

Theme

+ +
+
+

Generated using TypeDoc

+
\ No newline at end of file diff --git a/docs/interfaces/CheckboxSingleProps.html b/docs/interfaces/CheckboxSingleProps.html new file mode 100644 index 0000000..8f736c2 --- /dev/null +++ b/docs/interfaces/CheckboxSingleProps.html @@ -0,0 +1,4485 @@ +CheckboxSingleProps | react-hook-form-chakra
+
+ +
+
+
+
+ +

Interface CheckboxSingleProps

+
+

The union of ChakraFormControlProps and BaseReactHookFormProps which defines the base properties +for most of react-hook-form-chakra components

+
+
+

Hierarchy

+
+
+
+
+ +
+
+

Properties

+
__css? +_active? +_activeLink? +_activeStep? +_after? +_autofill? +_before? +_checked? +_dark? +_disabled? +_empty? +_even? +_expanded? +_first? +_firstLetter? +_focus? +_focusVisible? +_focusWithin? +_fullScreen? +_grabbed? +_groupActive? +_groupChecked? +_groupDisabled? +_groupFocus? +_groupFocusVisible? +_groupFocusWithin? +_groupHover? +_groupInvalid? +_hidden? +_highlighted? +_hover? +_indeterminate? +_invalid? +_last? +_light? +_loading? +_ltr? +_mediaDark? +_mediaReduceMotion? +_notFirst? +_notLast? +_odd? +_peerActive? +_peerChecked? +_peerDisabled? +_peerFocus? +_peerFocusVisible? +_peerFocusWithin? +_peerHover? +_peerInvalid? +_peerPlaceholderShown? +_placeholder? +_placeholderShown? +_pressed? +_readOnly? +_rtl? +_selected? +_selection? +_valid? +_visited? +alignContent? +alignItems? +alignSelf? +animation? +appearance? +apply? +aria-activedescendant? +aria-atomic? +aria-autocomplete? +aria-busy? +aria-checked? +aria-colcount? +aria-colindex? +aria-colspan? +aria-controls? +aria-current? +aria-describedby? +aria-details? +aria-disabled? +aria-dropeffect? +aria-errormessage? +aria-expanded? +aria-flowto? +aria-grabbed? +aria-haspopup? +aria-hidden? +aria-invalid? +aria-keyshortcuts? +aria-label? +aria-labelledby? +aria-level? +aria-live? +aria-modal? +aria-multiline? +aria-multiselectable? +aria-orientation? +aria-owns? +aria-placeholder? +aria-posinset? +aria-pressed? +aria-readonly? +aria-relevant? +aria-required? +aria-roledescription? +aria-rowcount? +aria-rowindex? +aria-rowspan? +aria-selected? +aria-setsize? +aria-sort? +aria-valuemax? +aria-valuemin? +aria-valuenow? +aria-valuetext? +backdropBlur? +backdropBrightness? +backdropContrast? +backdropFilter? +backdropHueRotate? +backdropInvert? +backdropSaturate? +background? +backgroundAttachment? +backgroundBlendMode? +backgroundClip? +backgroundColor? +backgroundImage? +backgroundPosition? +backgroundRepeat? +backgroundSize? +bg? +bgAttachment? +bgBlendMode? +bgClip? +bgColor? +bgGradient? +bgImage? +bgImg? +bgPos? +bgPosition? +bgRepeat? +bgSize? +blendMode? +blur? +border? +borderBottom? +borderBottomColor? +borderBottomLeftRadius? +borderBottomRadius? +borderBottomRightRadius? +borderBottomStyle? +borderBottomWidth? +borderColor? +borderEndRadius? +borderInlineEndRadius? +borderInlineStartRadius? +borderLeft? +borderLeftColor? +borderLeftRadius? +borderLeftStyle? +borderLeftWidth? +borderRadius? +borderRight? +borderRightColor? +borderRightRadius? +borderRightStyle? +borderRightWidth? +borderStartRadius? +borderStyle? +borderTop? +borderTopColor? +borderTopLeftRadius? +borderTopRadius? +borderTopRightRadius? +borderTopStyle? +borderTopWidth? +borderWidth? +borderX? +borderY? +bottom? +boxDecorationBreak? +boxShadow? +boxSize? +boxSizing? +brightness? +checkBoxProps? +clipPath? +color? +columnGap? +contrast? +control? +css? +cursor? +display? +dropShadow? +errorMessageProps? +fill? +filter? +flex? +flexBasis? +flexDir? +flexDirection? +flexFlow? +flexGrow? +flexShrink? +flexWrap? +float? +fontFamily? +fontSize? +fontStyle? +fontWeight? +gap? +gridArea? +gridAutoColumns? +gridAutoFlow? +gridAutoRows? +gridColumn? +gridColumnEnd? +gridColumnGap? +gridColumnStart? +gridGap? +gridRow? +gridRowEnd? +gridRowGap? +gridRowStart? +gridTemplate? +gridTemplateAreas? +gridTemplateColumns? +gridTemplateRows? +h? +height? +helperText? +helperTextProps? +hideBelow? +hideFrom? +hueRotate? +inputMode? +inset? +insetEnd? +insetInlineEnd? +insetStart? +insetX? +insetY? +invert? +is? +isDisabled? +isInvalid? +isReadOnly? +isRequired? +isTruncated? +isolation? +justifyContent? +justifyItems? +justifySelf? +label? +labelProps? +layerStyle? +left? +letterSpacing? +lineHeight? +listStyleImage? +listStyleImg? +listStylePos? +listStylePosition? +m? +margin? +marginBottom? +marginEnd? +marginInlineEnd? +marginInlineStart? +marginLeft? +marginRight? +marginStart? +marginTop? +marginX? +marginY? +maxH? +maxHeight? +maxW? +maxWidth? +mb? +me? +minH? +minHeight? +minW? +minWidth? +mixBlendMode? +ml? +mr? +ms? +mt? +mx? +my? +name +noOfLines? +objectFit? +objectPosition? +onKeyPress? +onKeyPressCapture? +opacity? +order? +outline? +outlineColor? +outlineOffset? +overflow? +overflowWrap? +overflowX? +overflowY? +overscroll? +overscrollBehavior? +overscrollBehaviorX? +overscrollBehaviorY? +overscrollX? +overscrollY? +p? +padding? +paddingBottom? +paddingEnd? +paddingInlineEnd? +paddingInlineStart? +paddingLeft? +paddingRight? +paddingStart? +paddingTop? +paddingX? +paddingY? +pb? +pe? +pl? +placeContent? +placeItems? +placeSelf? +pointerEvents? +pos? +position? +pr? +ps? +pt? +px? +py? +resize? +right? +ring? +ringColor? +ringInset? +ringOffset? +ringOffsetColor? +rotate? +rounded? +roundedBottom? +roundedBottomLeft? +roundedBottomRight? +roundedEnd? +roundedLeft? +roundedRight? +roundedStart? +roundedTop? +roundedTopLeft? +roundedTopRight? +rowGap? +saturate? +scale? +scaleX? +scaleY? +shadow? +skewX? +skewY? +srOnly? +stroke? +sx? +textAlign? +textColor? +textDecor? +textDecoration? +textDecorationColor? +textDecorationLine? +textDecorationStyle? +textDecorationThickness? +textIndent? +textOverflow? +textShadow? +textStyle? +textTransform? +textUnderlineOffset? +top? +transform? +transformOrigin? +transition? +transitionDelay? +transitionDuration? +transitionProperty? +transitionTimingFunction? +translateX? +translateY? +userSelect? +verticalAlign? +visibility? +w? +whiteSpace? +width? +willChange? +wordBreak? +zIndex? +
+
+

Properties

+
+

Optional Private __css

+
__css?: SystemStyleObject
+

Used for internal css management

+
+
+

Optional _active

+
_active?: SystemStyleObject
+

Styles for CSS Selector &:active

+
+
+

Optional _activeLink

+
_activeLink?: SystemStyleObject
+

Used to style the active link in a navigation +Styles for CSS Selector &[aria-current=page]

+
+
+

Optional _activeStep

+
_activeStep?: SystemStyleObject
+

Used to style the current step within a process +Styles for CSS Selector &[aria-current=step]

+
+
+

Optional _after

+
_after?: SystemStyleObject
+

Styles for CSS selector &::after

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _after={{content:`""` }}/>
+
+
+
+

Optional _autofill

+
_autofill?: SystemStyleObject
+

Styles for CSS Selector &:-webkit-autofill

+
+
+

Optional _before

+
_before?: SystemStyleObject
+

Styles for CSS selector &::before

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _before={{content:`""` }}/>
+
+
+
+

Optional _checked

+
_checked?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is true

+
    +
  • CSS selector &[aria-checked=true]
    • +
+
+
+

Optional _dark

+
_dark?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _disabled

+
_disabled?: SystemStyleObject
+

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

+
    +
  • &[aria-disabled=true]
    • +
  • &:disabled
    • +
  • &[data-disabled]
    • +
  • &[disabled]
    • +
+
+
+

Optional _empty

+
_empty?: SystemStyleObject
+

Styles for CSS selector &:empty

+
+
+

Optional _even

+
_even?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(even)

+
+
+

Optional _expanded

+
_expanded?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-expanded is true

+
    +
  • CSS selector &[aria-expanded=true]
    • +
+
+
+

Optional _first

+
_first?: SystemStyleObject
+

Styles for CSS Selector &:first-of-type

+
+
+

Optional _firstLetter

+
_firstLetter?: SystemStyleObject
+

Styles for CSS selector &::first-letter

+

NOTE: This selector is only applied for block-level elements and not preceded by an image or table.

+ +

Example

<Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
+
+
+
+

Optional _focus

+
_focus?: SystemStyleObject
+

Styles for CSS selector &:focus

+
+
+

Optional _focusVisible

+
_focusVisible?: SystemStyleObject
+

Styles to apply when this element has received focus via tabbing

+
    +
  • CSS Selector &:focus-visible
    • +
+
+
+

Optional _focusWithin

+
_focusWithin?: SystemStyleObject
+

Styles to apply when a child of this element has received focus

+
    +
  • CSS Selector &:focus-within
    • +
+
+
+

Optional _fullScreen

+
_fullScreen?: SystemStyleObject
+

Styles for CSS Selector &:fullscreen.

+
+
+

Optional _grabbed

+
_grabbed?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-grabbed is true

+
    +
  • CSS selector &[aria-grabbed=true]
    • +
+
+
+

Optional _groupActive

+
_groupActive?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is active

+
+
+

Optional _groupChecked

+
_groupChecked?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is checked

+
+
+

Optional _groupDisabled

+
_groupDisabled?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is disabled

+
+
+

Optional _groupFocus

+
_groupFocus?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is focused

+
+
+

Optional _groupFocusVisible

+
_groupFocusVisible?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has visible focus

+
+
+

Optional _groupFocusWithin

+
_groupFocusWithin?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has focus within

+
+
+

Optional _groupHover

+
_groupHover?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is hovered

+
+
+

Optional _groupInvalid

+
_groupInvalid?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is invalid

+
+
+

Optional _hidden

+
_hidden?: SystemStyleObject
+

Styles for CSS Selector [hidden=true]

+
+
+

Optional _highlighted

+
_highlighted?: SystemStyleObject
+

Styles for the highlighted state.

+
+
+

Optional _hover

+
_hover?: SystemStyleObject
+

Styles for CSS selector &:hover

+
+
+

Optional _indeterminate

+
_indeterminate?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is mixed

+
    +
  • CSS selector &[aria-checked=mixed]
    • +
+
+
+

Optional _invalid

+
_invalid?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-invalid is true

+
    +
  • CSS selector &[aria-invalid=true]
    • +
+
+
+

Optional _last

+
_last?: SystemStyleObject
+

Styles for CSS Selector &:last-of-type

+
+
+

Optional _light

+
_light?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _loading

+
_loading?: SystemStyleObject
+

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. +Useful for styling loading states

+
+
+

Optional _ltr

+
_ltr?: SystemStyleObject
+

Styles for CSS Selector [dir=ltr] & +It is applied when a parent element or this element has dir="ltr"

+
+
+

Optional _mediaDark

+
_mediaDark?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-color-scheme: dark) +It is used when the user has requested the system use a light or dark color theme.

+
+
+

Optional _mediaReduceMotion

+
_mediaReduceMotion?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-reduced-motion: reduce) +It is used when the user has requested the system to reduce the amount of animations.

+
+
+

Optional _notFirst

+
_notFirst?: SystemStyleObject
+

Styles for CSS Selector &:not(:first-of-type)

+
+
+

Optional _notLast

+
_notLast?: SystemStyleObject
+

Styles for CSS Selector &:not(:last-of-type)

+
+
+

Optional _odd

+
_odd?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(odd)

+
+
+

Optional _peerActive

+
_peerActive?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is active

+
+
+

Optional _peerChecked

+
_peerChecked?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is checked

+
+
+

Optional _peerDisabled

+
_peerDisabled?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is disabled

+
+
+

Optional _peerFocus

+
_peerFocus?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is focused

+
+
+

Optional _peerFocusVisible

+
_peerFocusVisible?: SystemStyleObject
+

Styles to apply when a sibling element with .peeror data-peer has visible focus

+
+
+

Optional _peerFocusWithin

+
_peerFocusWithin?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has focus within

+
+
+

Optional _peerHover

+
_peerHover?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is hovered

+
+
+

Optional _peerInvalid

+
_peerInvalid?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is invalid

+
+
+

Optional _peerPlaceholderShown

+
_peerPlaceholderShown?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

+
+
+

Optional _placeholder

+
_placeholder?: SystemStyleObject
+

Styles for CSS Selector &::placeholder.

+
+
+

Optional _placeholderShown

+
_placeholderShown?: SystemStyleObject
+

Styles for CSS Selector &:placeholder-shown.

+
+
+

Optional _pressed

+
_pressed?: SystemStyleObject
+

Styles for CSS Selector &[aria-pressed=true] +Typically used to style the current "pressed" state of toggle buttons

+
+
+

Optional _readOnly

+
_readOnly?: SystemStyleObject
+

Styles for CSS Selector &:readonly

+
+
+

Optional _rtl

+
_rtl?: SystemStyleObject
+

Styles for CSS Selector [dir=rtl] & +It is applied when a parent element or this element has dir="rtl"

+
+
+

Optional _selected

+
_selected?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-selected is true

+
    +
  • CSS selector &[aria-selected=true]
    • +
+
+
+

Optional _selection

+
_selection?: SystemStyleObject
+

Styles for CSS Selector &::selection

+
+
+

Optional _valid

+
_valid?: SystemStyleObject
+

Styles for the valid state

+
    +
  • CSS selector &[data-valid], &[data-state=valid]
    • +
+
+
+

Optional _visited

+
_visited?: SystemStyleObject
+

Styles for CSS Selector &:visited

+
+
+

Optional alignContent

+
alignContent?: ResponsiveValue<AlignContent>
+

The CSS align-content property.

+

It defines the distribution of space between and around +content items along a flexbox cross-axis or a grid's block axis.

+ +

See

Mozilla Docs

+
+
+

Optional alignItems

+
alignItems?: ResponsiveValue<AlignItems>
+

The CSS align-items property.

+

It defines the align-self value on all direct children as a group.

+
    +
  • In Flexbox, it controls the alignment of items on the Cross Axis.
    • +
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
    • +
+ +

See

Mozilla Docs

+
+
+

Optional alignSelf

+
alignSelf?: ResponsiveValue<AlignSelf>
+

The CSS align-self property.

+

It works like align-items, but applies only to a +single flexbox item, instead of all of them.

+ +

See

Mozilla Docs

+
+
+

Optional animation

+
animation?: ResponsiveValue<Animation<string & {}>>
+

The CSS animation property

+
+
+

Optional appearance

+
appearance?: ResponsiveValue<Appearance>
+

The CSS appearance property

+
+
+

Optional apply

+
apply?: ResponsiveValue<string>
+

Apply theme-aware style objects in theme

+ +

Example

<Box apply="styles.h3">This is a div</Box>
+
+

This will apply styles defined in theme.styles.h3

+
+
+

Optional aria-activedescendant

+
aria-activedescendant?: string
+

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

+
+
+

Optional aria-atomic

+
aria-atomic?: Booleanish
+

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

+
+
+

Optional aria-autocomplete

+
aria-autocomplete?: "none" | "both" | "inline" | "list"
+

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be +presented if they are made.

+
+
+

Optional aria-busy

+
aria-busy?: Booleanish
+

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

+
+
+

Optional aria-checked

+
aria-checked?: boolean | "true" | "false" | "mixed"
+

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

+ +

See

    +
  • aria-pressed
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-colcount

+
aria-colcount?: number
+

Defines the total number of columns in a table, grid, or treegrid.

+ +

See

aria-colindex.

+
+
+

Optional aria-colindex

+
aria-colindex?: number
+

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

+ +

See

    +
  • aria-colcount
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-colspan

+
aria-colspan?: number
+

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-colindex
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-controls

+
aria-controls?: string
+

Identifies the element (or elements) whose contents or presence are controlled by the current element.

+ +

See

aria-owns.

+
+
+

Optional aria-current

+
aria-current?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"
+

Indicates the element that represents the current item within a container or set of related elements.

+
+
+

Optional aria-describedby

+
aria-describedby?: string
+

Identifies the element (or elements) that describes the object.

+ +

See

aria-labelledby

+
+
+

Optional aria-details

+
aria-details?: string
+

Identifies the element that provides a detailed, extended description for the object.

+ +

See

aria-describedby.

+
+
+

Optional aria-disabled

+
aria-disabled?: Booleanish
+

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

+ +

See

    +
  • aria-hidden
    • +
  • aria-readonly.
    • +
+
+
+

Optional aria-dropeffect

+
aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"
+

Indicates what functions can be performed when a dragged object is released on the drop target.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-errormessage

+
aria-errormessage?: string
+

Identifies the element that provides an error message for the object.

+ +

See

    +
  • aria-invalid
    • +
  • aria-describedby.
    • +
+
+
+

Optional aria-expanded

+
aria-expanded?: Booleanish
+

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

+
+
+

Optional aria-flowto

+
aria-flowto?: string
+

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, +allows assistive technology to override the general default of reading in document source order.

+
+
+

Optional aria-grabbed

+
aria-grabbed?: Booleanish
+

Indicates an element's "grabbed" state in a drag-and-drop operation.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-haspopup

+
aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "true" | "false" | "tree"
+

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

+
+
+

Optional aria-hidden

+
aria-hidden?: Booleanish
+

Indicates whether the element is exposed to an accessibility API.

+ +

See

aria-disabled.

+
+
+

Optional aria-invalid

+
aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"
+

Indicates the entered value does not conform to the format expected by the application.

+ +

See

aria-errormessage.

+
+
+

Optional aria-keyshortcuts

+
aria-keyshortcuts?: string
+

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

+
+
+

Optional aria-label

+
aria-label?: string
+

Defines a string value that labels the current element.

+ +

See

aria-labelledby.

+
+
+

Optional aria-labelledby

+
aria-labelledby?: string
+

Identifies the element (or elements) that labels the current element.

+ +

See

aria-describedby.

+
+
+

Optional aria-level

+
aria-level?: number
+

Defines the hierarchical level of an element within a structure.

+
+
+

Optional aria-live

+
aria-live?: "off" | "assertive" | "polite"
+

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

+
+
+

Optional aria-modal

+
aria-modal?: Booleanish
+

Indicates whether an element is modal when displayed.

+
+
+

Optional aria-multiline

+
aria-multiline?: Booleanish
+

Indicates whether a text box accepts multiple lines of input or only a single line.

+
+
+

Optional aria-multiselectable

+
aria-multiselectable?: Booleanish
+

Indicates that the user may select more than one item from the current selectable descendants.

+
+
+

Optional aria-orientation

+
aria-orientation?: "horizontal" | "vertical"
+

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

+
+
+

Optional aria-owns

+
aria-owns?: string
+

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship +between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

+ +

See

aria-controls.

+
+
+

Optional aria-placeholder

+
aria-placeholder?: string
+

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. +A hint could be a sample value or a brief description of the expected format.

+
+
+

Optional aria-posinset

+
aria-posinset?: number
+

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-setsize.

+
+
+

Optional aria-pressed

+
aria-pressed?: boolean | "true" | "false" | "mixed"
+

Indicates the current "pressed" state of toggle buttons.

+ +

See

    +
  • aria-checked
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-readonly

+
aria-readonly?: Booleanish
+

Indicates that the element is not editable, but is otherwise operable.

+ +

See

aria-disabled.

+
+
+

Optional aria-relevant

+
aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
+

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

+ +

See

aria-atomic.

+
+
+

Optional aria-required

+
aria-required?: Booleanish
+

Indicates that user input is required on the element before a form may be submitted.

+
+
+

Optional aria-roledescription

+
aria-roledescription?: string
+

Defines a human-readable, author-localized description for the role of an element.

+
+
+

Optional aria-rowcount

+
aria-rowcount?: number
+

Defines the total number of rows in a table, grid, or treegrid.

+ +

See

aria-rowindex.

+
+
+

Optional aria-rowindex

+
aria-rowindex?: number
+

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowcount
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-rowspan

+
aria-rowspan?: number
+

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowindex
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-selected

+
aria-selected?: Booleanish
+

Indicates the current "selected" state of various widgets.

+ +

See

    +
  • aria-checked
    • +
  • aria-pressed.
    • +
+
+
+

Optional aria-setsize

+
aria-setsize?: number
+

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-posinset.

+
+
+

Optional aria-sort

+
aria-sort?: "none" | "ascending" | "descending" | "other"
+

Indicates if items in a table or grid are sorted in ascending or descending order.

+
+
+

Optional aria-valuemax

+
aria-valuemax?: number
+

Defines the maximum allowed value for a range widget.

+
+
+

Optional aria-valuemin

+
aria-valuemin?: number
+

Defines the minimum allowed value for a range widget.

+
+
+

Optional aria-valuenow

+
aria-valuenow?: number
+

Defines the current value for a range widget.

+ +

See

aria-valuetext.

+
+
+

Optional aria-valuetext

+
aria-valuetext?: string
+

Defines the human readable text alternative of aria-valuenow for a range widget.

+
+
+

Optional backdropBlur

+
backdropBlur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the backdrop-blur filter value of an element. +Value is assigned to --chakra-backdrop-blur css variable

+
+
+

Optional backdropBrightness

+
backdropBrightness?: ResponsiveValue<Length>
+

Sets the backdrop-brightness filter value of an element. +Value is assigned to --chakra-backdrop-brightness css variable

+
+
+

Optional backdropContrast

+
backdropContrast?: ResponsiveValue<Length>
+

Sets the backdrop-contrast filter value of an element. +Value is assigned to --chakra-backdrop-contrast css variable

+
+
+

Optional backdropFilter

+
backdropFilter?: ResponsiveValue<"auto" | BackdropFilter>
+

The CSS backdrop-filter property. When set to auto, you allow +Chakra UI to define the color based on the backdrop filter style props +(backdropBlur, backdropSaturate, etc.)

+
+
+

Optional backdropHueRotate

+
backdropHueRotate?: ResponsiveValue<Length>
+

Sets the backdrop-hue-rotate filter value of an element. +Value is assigned to --chakra-backdrop-hue-rotate css variable

+
+
+

Optional backdropInvert

+
backdropInvert?: ResponsiveValue<Length>
+

Sets the backdrop-invert filter value of an element. +Value is assigned to --chakra-backdrop-invert css variable

+
+
+

Optional backdropSaturate

+
backdropSaturate?: ResponsiveValue<Length>
+

Sets the backdrop-saturate filter value of an element. +Value is assigned to --chakra-backdrop-saturate css variable

+
+
+

Optional background

+
background?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional backgroundAttachment

+
backgroundAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional backgroundBlendMode

+
backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional backgroundClip

+
backgroundClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional backgroundColor

+
backgroundColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional backgroundImage

+
backgroundImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional backgroundPosition

+
backgroundPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional backgroundRepeat

+
backgroundRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional backgroundSize

+
backgroundSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional bg

+
bg?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional bgAttachment

+
bgAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional bgBlendMode

+
bgBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional bgClip

+
bgClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional bgColor

+
bgColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional bgGradient

+
bgGradient?: ResponsiveValue<string | string & {}>
+

The background-gradient shorthand

+
+
+

Optional bgImage

+
bgImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgImg

+
bgImg?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgPos

+
bgPos?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgPosition

+
bgPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgRepeat

+
bgRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional bgSize

+
bgSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional blendMode

+
blendMode?: ResponsiveValue<MixBlendMode>
+

The blend-mode property

+
+
+

Optional blur

+
blur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the blur filter value of an element. +Value is assigned to --chakra-filter css variable

+
+
+

Optional border

+
border?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border property

+
+
+

Optional borderBottom

+
borderBottom?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-bottom property

+
+
+

Optional borderBottomColor

+
borderBottomColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderBottomColor>
+

The CSS border-bottom-color property

+
+
+

Optional borderBottomLeftRadius

+
borderBottomLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional borderBottomRadius

+
borderBottomRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional borderBottomRightRadius

+
borderBottomRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional borderBottomStyle

+
borderBottomStyle?: ResponsiveValue<BorderBottomStyle>
+

The CSS border-bottom-style property

+
+
+

Optional borderBottomWidth

+
borderBottomWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-bottom-width property

+
+
+

Optional borderColor

+
borderColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-color property

+
+
+

Optional borderEndRadius

+
borderEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineEndRadius

+
borderInlineEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderInlineEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineStartRadius

+
borderInlineStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderInlineStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderLeft

+
borderLeft?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-left property

+
+
+

Optional borderLeftColor

+
borderLeftColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderLeftColor>
+

The CSS border-left-color property

+
+
+

Optional borderLeftRadius

+
borderLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional borderLeftStyle

+
borderLeftStyle?: ResponsiveValue<BorderLeftStyle>
+

The CSS border-left-style property

+
+
+

Optional borderLeftWidth

+
borderLeftWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-left-width property

+
+
+

Optional borderRadius

+
borderRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional borderRight

+
borderRight?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right property

+
+
+

Optional borderRightColor

+
borderRightColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderRightColor>
+

The CSS border-right-color property

+
+
+

Optional borderRightRadius

+
borderRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional borderRightStyle

+
borderRightStyle?: ResponsiveValue<BorderRightStyle>
+

The CSS border-right-styles property

+
+
+

Optional borderRightWidth

+
borderRightWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-right-width property

+
+
+

Optional borderStartRadius

+
borderStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderStyle

+
borderStyle?: ResponsiveValue<BorderStyle>
+

The CSS border-style property

+
+
+

Optional borderTop

+
borderTop?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top property

+
+
+

Optional borderTopColor

+
borderTopColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-top-color property

+
+
+

Optional borderTopLeftRadius

+
borderTopLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional borderTopRadius

+
borderTopRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional borderTopRightRadius

+
borderTopRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional borderTopStyle

+
borderTopStyle?: ResponsiveValue<BorderTopStyle>
+

The CSS border-top-style property

+
+
+

Optional borderTopWidth

+
borderTopWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-top-width property

+
+
+

Optional borderWidth

+
borderWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-width property

+
+
+

Optional borderX

+
borderX?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right and border-left property

+
+
+

Optional borderY

+
borderY?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top and border-bottom property

+
+
+

Optional bottom

+
bottom?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS bottom property

+
+
+

Optional boxDecorationBreak

+
boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>
+

The CSS box-decoration property

+
+
+

Optional boxShadow

+
boxShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional boxSize

+
boxSize?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width and height property

+
+
+

Optional boxSizing

+
boxSizing?: BoxSizing
+

The CSS box-sizing property

+
+
+

Optional brightness

+
brightness?: ResponsiveValue<Length>
+

Sets the brightness filter value of an element. +Value is assigned to --chakra-brightness css variable

+
+
+

Optional checkBoxProps

+
checkBoxProps?: CheckboxProps
+

Chakra CheckboxProps

+
+
+

Optional clipPath

+
clipPath?: ResponsiveValue<ClipPath>
+

The CSS clip-path property.

+

It creates a clipping region that sets what part of an element should be shown.

+
+
+

Optional color

+
color?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional columnGap

+
columnGap?: ResponsiveValue<ColumnGap<Length>>
+

The CSS column-gap property.

+

It sets the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional contrast

+
contrast?: ResponsiveValue<Length>
+

Sets the contrast filter value of an element. +Value is assigned to --chakra-contrast css variable

+
+
+

Optional control

+
control?: Control<any, any>
+

The control passed down from react-hook-form. +Only required if not using FormProvider

+
+
+

Optional css

+
css?: Interpolation<{}>
+

The emotion's css style object

+
+
+

Optional cursor

+
cursor?: ResponsiveValue<Cursor>
+

The CSS cursor property

+
+
+

Optional display

+
display?: ResponsiveValue<Display>
+

The CSS display property

+
+
+

Optional dropShadow

+
dropShadow?: ResponsiveValue<"base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

Sets the drop-shadow filter value of an element. +Value is assigned to --chakra-drop-shadow css variable

+
+
+

Optional errorMessageProps

+
errorMessageProps?: FormErrorMessageProps
+

Chakra FormErrorMessageProps for error message

+
+
+

Optional fill

+
fill?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS fill property for icon svgs and paths

+
+
+

Optional filter

+
filter?: ResponsiveValue<Filter | "auto">
+

The CSS filter property. When set to auto, you allow +Chakra UI to define the color based on the filter style props +(blur, saturate, etc.)

+
+
+

Optional flex

+
flex?: ResponsiveValue<Flex<Length>>
+

The CSS flex property.

+

It defines how a flex item will grow or shrink +to fit the space available in its flex container.

+ +

See

Mozilla Docs

+
+
+

Optional flexBasis

+
flexBasis?: ResponsiveValue<FlexBasis<Length>>
+

The CSS flex-basis property.

+

It defines the initial main size of a flex item.

+ +

See

Mozilla Docs

+
+
+

Optional flexDir

+
flexDir?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexDirection

+
flexDirection?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexFlow

+
flexFlow?: ResponsiveValue<FlexFlow>
+

The CSS flex-flow property.

+

It is a shorthand property for flex-direction and flex-wrap. +It specifies the direction of a flex container, as well as its wrapping behavior.

+ +

See

Mozilla Docs

+
+
+

Optional flexGrow

+
flexGrow?: ResponsiveValue<FlexGrow>
+

The CSS flex-grow property.

+

It defines how much a flexbox item should grow +if there's space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexShrink

+
flexShrink?: ResponsiveValue<FlexShrink>
+

The CSS flex-shrink property.

+

It defines how much a flexbox item should shrink +if there's not enough space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexWrap

+
flexWrap?: ResponsiveValue<FlexWrap>
+

The CSS flex-wrap property.

+

It defines whether flex items are forced onto one line or +can wrap onto multiple lines. If wrapping is allowed, +it sets the direction that lines are stacked.

+ +

See

Mozilla Docs

+
+
+

Optional float

+
float?: ResponsiveValue<Float>
+

The CSS float property

+
+
+

Optional fontFamily

+
fontFamily?: ResponsiveValue<"body" | FontFamily | "heading" | "mono">
+

The CSS font-family property

+
+
+

Optional fontSize

+
fontSize?: ResponsiveValue<number | "small" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl">
+

The CSS font-size property

+
+
+

Optional fontStyle

+
fontStyle?: ResponsiveValue<FontStyle>
+

The CSS font-style property

+
+
+

Optional fontWeight

+
fontWeight?: ResponsiveValue<number | "bold" | string & {} | "black" | "normal" | "hairline" | "thin" | "light" | "medium" | "semibold" | "extrabold">
+

The CSS font-weight property

+
+
+

Optional gap

+
gap?: ResponsiveValue<Gap<Length>>
+

The CSS gap property.

+

It defines the gap between items in both flex and +grid contexts.

+ +

See

Mozilla Docs

+
+
+

Optional gridArea

+
gridArea?: ResponsiveValue<GridArea>
+

The CSS grid-areas property.

+

It specifies a grid item’s size and location within a grid by +contributing a line, a span, or nothing (automatic) +to its grid placement, thereby specifying the edges of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoColumns

+
gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>
+

The CSS grid-auto-columns property.

+

It specifies the size of an implicitly-created grid column track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoFlow

+
gridAutoFlow?: ResponsiveValue<GridAutoFlow>
+

The CSS grid-auto-flow property

+

It controls how the auto-placement algorithm works, +specifying exactly how auto-placed items get flowed into the grid.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoRows

+
gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>
+

The CSS grid-auto-rows property.

+

It specifies the size of an implicitly-created grid row track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumn

+
gridColumn?: ResponsiveValue<GridColumn>
+

The CSS grid-column property.

+

It specifies a grid item's size and location within a grid column +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnEnd

+
gridColumnEnd?: ResponsiveValue<GridColumnEnd>
+

The CSS grid-column property

+

It specifies a grid item’s end position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the block-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnGap

+
gridColumnGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-column-gap property.

+

It defines the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnStart

+
gridColumnStart?: ResponsiveValue<GridColumnStart>
+

The CSS grid-column property.

+

It specifies a grid item’s start position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement

+ +

See

Mozilla Docs

+
+
+

Optional gridGap

+
gridGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-gap property.

+

It defines the gaps (gutters) between rows and columns

+ +

See

Mozilla Docs

+
+
+

Optional gridRow

+
gridRow?: ResponsiveValue<GridRow>
+

The CSS grid-row property

+

It specifies a grid item’s size and location within the grid row +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowEnd

+
gridRowEnd?: ResponsiveValue<GridRowEnd>
+

The CSS grid-row-end property

+

It specifies a grid item’s end position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowGap

+
gridRowGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-row-gap property.

+

It defines the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowStart

+
gridRowStart?: ResponsiveValue<GridRowStart>
+

The CSS grid-row-start property

+

It specifies a grid item’s start position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplate

+
gridTemplate?: ResponsiveValue<GridTemplate>
+

The CSS grid-template property.

+

It is a shorthand property for defining grid columns, rows, and areas.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateAreas

+
gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>
+

The CSS grid-template-areas property.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateColumns

+
gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>
+

The CSS grid-template-columns property

+

It defines the line names and track sizing functions of the grid columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateRows

+
gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>
+

The CSS grid-template-rows property.

+

It defines the line names and track sizing functions of the grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional h

+
h?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional height

+
height?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional helperText

+
helperText?: ReactNode
+

Helper text to show alongside input

+
+
+

Optional helperTextProps

+
helperTextProps?: TextProps
+

Chakra TextProps associated with the helper text

+
+
+

Optional hideBelow

+
hideBelow?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element below the specified breakpoint

+
+
+

Optional hideFrom

+
hideFrom?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element from the specified breakpoint and up

+
+
+

Optional hueRotate

+
hueRotate?: ResponsiveValue<Length>
+

Sets the hue-rotate filter value of an element. +Value is assigned to --chakra-hue-rotate css variable

+
+
+

Optional inputMode

+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
+

Hints at the type of data that might be entered by the user while editing the element or its contents

+ +

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

+
+
+

Optional inset

+
inset?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, right, top, bottom property

+
+
+

Optional insetEnd

+
insetEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetEnd is equivalent to right. +When the direction is rtl, insetEnd is equivalent to left.

+
+
+

Optional insetInlineEnd

+
insetInlineEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetInlineEnd is equivalent to right. +When the direction is rtl, insetInlineEnd is equivalent to left.

+
+
+

Optional insetStart

+
insetStart?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is start, end is equivalent to left. +When the direction is start, end is equivalent to right.

+
+
+

Optional insetX

+
insetX?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, and right property

+
+
+

Optional insetY

+
insetY?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top, and bottom property

+
+
+

Optional invert

+
invert?: ResponsiveValue<Length>
+

Sets the invert filter value of an element. +Value is assigned to --chakra-invert css variable

+
+
+

Optional is

+
is?: string
+

Specify that a standard HTML element should behave like a defined custom built-in element

+ +

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

+
+
+

Optional isDisabled

+
isDisabled?: boolean
+

If true, the form control will be disabled. This has 2 side effects:

+
    +
  • The FormLabel will have data-disabled attribute
    • +
  • The form element (e.g, Input) will be disabled
    • +
+ +

Default

false

+
+
+

Optional isInvalid

+
isInvalid?: boolean
+

If true, the form control will be invalid. This has 2 side effects:

+
    +
  • The FormLabel and FormErrorIcon will have data-invalid set to true
    • +
  • The form element (e.g, Input) will have aria-invalid set to true
    • +
+ +

Default

false

+
+
+

Optional isReadOnly

+
isReadOnly?: boolean
+

If true, the form control will be readonly

+ +

Default

false

+
+
+

Optional isRequired

+
isRequired?: boolean
+

If true, the form control will be required. This has 2 side effects:

+
    +
  • The FormLabel will show a required indicator
    • +
  • The form element (e.g, Input) will have aria-required set to true
    • +
+ +

Default

false

+
+
+

Optional isTruncated

+
isTruncated?: boolean
+

If true, it clamps truncate a text after one line.

+
+
+

Optional isolation

+
isolation?: ResponsiveValue<Isolation>
+

The CSS isolation property

+
+
+

Optional justifyContent

+
justifyContent?: ResponsiveValue<JustifyContent>
+

The CSS justify-content property.

+

It defines how the browser distributes space between and around content items +along the main-axis of a flex container, and the inline axis of a grid container.

+ +

See

Mozilla Docs

+
+
+

Optional justifyItems

+
justifyItems?: ResponsiveValue<JustifyItems>
+

The CSS justify-items property.

+

It defines the default justify-self for all items of the box, +giving them all a default way of justifying each box +along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional justifySelf

+
justifySelf?: ResponsiveValue<JustifySelf>
+

The CSS justify-self property.

+

It defines the way a box is justified inside its +alignment container along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional label

+
label?: ReactNode
+

The label to be associated with the input

+
+
+

Optional labelProps

+
labelProps?: FormLabelProps
+

Chakra FormLabelProps

+
+
+

Optional layerStyle

+
layerStyle?: ResponsiveValue<string & {}>
+

The layer style object to apply. +Note: Styles must be located in theme.layerStyles

+
+
+

Optional left

+
left?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left property

+
+
+

Optional letterSpacing

+
letterSpacing?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "tighter" | "tight" | "wide" | "wider" | "widest">
+

The CSS letter-spacing property

+
+
+

Optional lineHeight

+
lineHeight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "none" | "normal" | number & {} | "shorter" | "short" | "tall" | "taller">
+

The CSS line-height property

+
+
+

Optional listStyleImage

+
listStyleImage?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStyleImg

+
listStyleImg?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStylePos

+
listStylePos?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional listStylePosition

+
listStylePosition?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional m

+
m?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional margin

+
margin?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional marginBottom

+
marginBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional marginEnd

+
marginEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginEnd is equivalent to marginRight. +When direction is rtl, marginEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineEnd

+
marginInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineEnd is equivalent to marginRight. +When direction is rtl, marginInlineEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineStart

+
marginInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineStart is equivalent to marginLeft. +When direction is rtl, marginInlineStart is equivalent to marginRight.

+
+
+

Optional marginLeft

+
marginLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional marginRight

+
marginRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional marginStart

+
marginStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginStart is equivalent to marginLeft. +When direction is rtl, marginStart is equivalent to marginRight.

+
+
+

Optional marginTop

+
marginTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional marginX

+
marginX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional marginY

+
marginY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

Optional maxH

+
maxH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxHeight

+
maxHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxW

+
maxW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional maxWidth

+
maxWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional mb

+
mb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional me

+
me?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, me is equivalent to marginRight. +When direction is rtl, me is equivalent to marginLeft.

+
+
+

Optional minH

+
minH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minHeight

+
minHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minW

+
minW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional minWidth

+
minWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional mixBlendMode

+
mixBlendMode?: ResponsiveValue<MixBlendMode>
+

The mix-blend-mode property

+
+
+

Optional ml

+
ml?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional mr

+
mr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional ms

+
ms?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, ms is equivalent to marginLeft. +When direction is rtl, ms is equivalent to marginRight.

+
+
+

Optional mt

+
mt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional mx

+
mx?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional my

+
my?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

name

+
name: string
+

The name of the input (required)

+
+
+

Optional noOfLines

+
noOfLines?: ResponsiveValue<number>
+

Used to truncate text at a specific number of lines

+
+
+

Optional objectFit

+
objectFit?: ResponsiveValue<ObjectFit>
+

The CSS object-fit property

+
+
+

Optional objectPosition

+
objectPosition?: ResponsiveValue<ObjectPosition<Length>>
+

The CSS object-position property

+
+
+

Optional onKeyPress

+
onKeyPress?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional onKeyPressCapture

+
onKeyPressCapture?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional opacity

+
opacity?: ResponsiveValue<Opacity>
+

The CSS opacity property

+
+
+

Optional order

+
order?: ResponsiveValue<Order>
+

The CSS order property.

+

It defines the order to lay out an item in a flex or grid container.

+ +

See

Mozilla Docs

+
+
+

Optional outline

+
outline?: ResponsiveValue<Outline<Length>>
+

The CSS outline property

+
+
+

Optional outlineColor

+
outlineColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS outline-color property

+
+
+

Optional outlineOffset

+
outlineOffset?: ResponsiveValue<OutlineOffset<Length>>
+

The CSS outline-offset property

+
+
+

Optional overflow

+
overflow?: ResponsiveValue<Overflow>
+

The CSS overflow property

+
+
+

Optional overflowWrap

+
overflowWrap?: ResponsiveValue<OverflowWrap>
+

The CSS overflow-wrap property

+
+
+

Optional overflowX

+
overflowX?: ResponsiveValue<OverflowX>
+

The CSS overflow-x property

+
+
+

Optional overflowY

+
overflowY?: ResponsiveValue<OverflowY>
+

The CSS overflow-y property

+
+
+

Optional overscroll

+
overscroll?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehavior

+
overscrollBehavior?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehaviorX

+
overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollBehaviorY

+
overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional overscrollX

+
overscrollX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollY

+
overscrollY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional p

+
p?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional padding

+
padding?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional paddingBottom

+
paddingBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional paddingEnd

+
paddingEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingEnd is equivalent to paddingRight. +When direction is rtl, paddingEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineEnd

+
paddingInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineEnd is equivalent to paddingRight. +When direction is rtl, paddingInlineEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineStart

+
paddingInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineStart is equivalent to paddingLeft. +When direction is rtl, paddingInlineStart is equivalent to paddingRight.

+
+
+

Optional paddingLeft

+
paddingLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional paddingRight

+
paddingRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional paddingStart

+
paddingStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingStart is equivalent to paddingLeft. +When direction is rtl, paddingStart is equivalent to paddingRight.

+
+
+

Optional paddingTop

+
paddingTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional paddingX

+
paddingX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional paddingY

+
paddingY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional pb

+
pb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional pe

+
pe?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, pe is equivalent to paddingRight. +When direction is rtl, pe is equivalent to paddingLeft.

+
+
+

Optional pl

+
pl?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional placeContent

+
placeContent?: ResponsiveValue<PlaceContent>
+

The CSS place-content property.

+

It allows you to align content along both the block and +inline directions at once (i.e. the align-content and justify-content properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional placeItems

+
placeItems?: ResponsiveValue<PlaceItems>
+

The CSS place-items property.

+

It allows you to align items along both the block and +inline directions at once (i.e. the align-items and justify-items properties) +in a relevant layout system such as Grid or Flex.

+ +

See

Mozilla Docs

+
+
+

Optional placeSelf

+
placeSelf?: ResponsiveValue<PlaceSelf>
+

The CSS place-self property.

+

It allows you to align an individual item in both the block and +inline directions at once (i.e. the align-self and justify-self properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional pointerEvents

+
pointerEvents?: ResponsiveValue<PointerEvents>
+

The CSS pointer-events property

+
+
+

Optional pos

+
pos?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional position

+
position?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional pr

+
pr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional ps

+
ps?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, ps is equivalent to paddingLeft. +When direction is rtl, ps is equivalent to paddingRight.

+
+
+

Optional pt

+
pt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional px

+
px?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional py

+
py?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional resize

+
resize?: ResponsiveValue<Resize>
+

The CSS resize property

+
+
+

Optional right

+
right?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS right property

+
+
+

Optional ring

+
ring?: ResponsiveValue<Length>
+

Creates outline rings with CSS box-shadow property

+
+
+

Optional ringColor

+
ringColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the outline ring

+
+
+

Optional ringInset

+
ringInset?: ResponsiveValue<"inset" | "none">
+

If the outline ring should an inset

+
+
+

Optional ringOffset

+
ringOffset?: ResponsiveValue<Length>
+

The thickness of the offset shadow when using outline rings

+
+
+

Optional ringOffsetColor

+
ringOffsetColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the offset shadow when adding outline rings

+
+
+

Optional rotate

+
rotate?: ResponsiveValue<Length>
+

Sets the rotation value of the element

+
+
+

Optional rounded

+
rounded?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional roundedBottom

+
roundedBottom?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional roundedBottomLeft

+
roundedBottomLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional roundedBottomRight

+
roundedBottomRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional roundedEnd

+
roundedEnd?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedLeft

+
roundedLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional roundedRight

+
roundedRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional roundedStart

+
roundedStart?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedTop

+
roundedTop?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional roundedTopLeft

+
roundedTopLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional roundedTopRight

+
roundedTopRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional rowGap

+
rowGap?: ResponsiveValue<RowGap<Length>>
+

The CSS row-gap property.

+

It sets the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional saturate

+
saturate?: ResponsiveValue<Length>
+

Sets the saturation filter value of an element. +Value is assigned to --chakra-saturate css variable

+
+
+

Optional scale

+
scale?: ResponsiveValue<Length>
+

Sets the scale value of the element

+
+
+

Optional scaleX

+
scaleX?: ResponsiveValue<Length>
+

Scale value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-x
    • +
+
+
+

Optional scaleY

+
scaleY?: ResponsiveValue<Length>
+

Scale value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-y
    • +
+
+
+

Optional shadow

+
shadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional skewX

+
skewX?: ResponsiveValue<Length>
+

Skew value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-x
    • +
+
+
+

Optional skewY

+
skewY?: ResponsiveValue<Length>
+

Skew value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-y
    • +
+
+
+

Optional srOnly

+
srOnly?: true | "focusable"
+

If true, hide an element visually without hiding it from screen readers.

+

If focusable, the sr-only styles will be undone, making the element visible +to sighted users as well as screen readers.

+
+
+

Optional stroke

+
stroke?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS stroke property for icon svgs and paths

+
+
+

Optional sx

+
sx?: SystemStyleObject
+

Used to pass theme-aware style props. +NB: This is the public API for user-land

+
+
+

Optional textAlign

+
textAlign?: ResponsiveValue<TextAlign>
+

The CSS text-align property

+
+
+

Optional textColor

+
textColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional textDecor

+
textDecor?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecoration

+
textDecoration?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecorationColor

+
textDecorationColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | TextDecorationColor>
+

The CSS text-decoration-color property

+
+
+

Optional textDecorationLine

+
textDecorationLine?: ResponsiveValue<TextDecorationLine>
+

The CSS text-decoration-line property

+
+
+

Optional textDecorationStyle

+
textDecorationStyle?: ResponsiveValue<TextDecorationStyle>
+

The CSS text-decoration-style property

+
+
+

Optional textDecorationThickness

+
textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>
+

The CSS text-decoration-thickness property

+
+
+

Optional textIndent

+
textIndent?: ResponsiveValue<TextIndent<0 | string & {}>>
+

The CSS text-indent property

+
+
+

Optional textOverflow

+
textOverflow?: ResponsiveValue<TextOverflow>
+

The CSS text-overflow property

+
+
+

Optional textShadow

+
textShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "inner" | "dark-lg" | TextShadow>
+

The text-shadow property

+
+
+

Optional textStyle

+
textStyle?: ResponsiveValue<string & {}>
+

The text style object to apply. +Note: Styles must be located in theme.textStyles

+
+
+

Optional textTransform

+
textTransform?: ResponsiveValue<TextTransform>
+

The CSS text-transform property

+
+
+

Optional textUnderlineOffset

+
textUnderlineOffset?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto">
+

The CSS text-underline-offset property

+
+
+

Optional top

+
top?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top property

+
+
+

Optional transform

+
transform?: ResponsiveValue<"auto" | Transform | "auto-gpu">
+

The CSS transform property

+
+
+

Optional transformOrigin

+
transformOrigin?: ResponsiveValue<number | "center" | "px" | "top" | "right" | "bottom" | "left" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS transform-origin property

+
+
+

Optional transition

+
transition?: ResponsiveValue<Transition<string & {}>>
+

The CSS transition property

+
+
+

Optional transitionDelay

+
transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>
+

The CSS transition-delay property

+
+
+

Optional transitionDuration

+
transitionDuration?: ResponsiveValue<string>
+

The CSS transition-duration property

+
+
+

Optional transitionProperty

+
transitionProperty?: ResponsiveValue<TransitionProperty>
+

The CSS transition-property property

+
+
+

Optional transitionTimingFunction

+
transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>
+

The CSS transition-timing-function property

+
+
+

Optional translateX

+
translateX?: ResponsiveValue<Length>
+

Translate value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-x
    • +
+
+
+

Optional translateY

+
translateY?: ResponsiveValue<Length>
+

Translate value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-y
    • +
+
+
+

Optional userSelect

+
userSelect?: ResponsiveValue<UserSelect>
+

The CSS user-select property

+
+
+

Optional verticalAlign

+
verticalAlign?: ResponsiveValue<VerticalAlign<Length>>
+

The CSS vertical-align property

+
+
+

Optional visibility

+
visibility?: ResponsiveValue<Visibility>
+

The CSS visibility property

+
+
+

Optional w

+
w?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional whiteSpace

+
whiteSpace?: ResponsiveValue<WhiteSpace>
+

The CSS white-space property

+
+
+

Optional width

+
width?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional willChange

+
willChange?: ResponsiveValue<WillChange>
+

The CSS will-change property

+
+
+

Optional wordBreak

+
wordBreak?: ResponsiveValue<WordBreak>
+

The CSS word-break property

+
+
+

Optional zIndex

+
zIndex?: ResponsiveValue<"base" | "overlay" | ZIndex | "hide" | "docked" | "dropdown" | "sticky" | "banner" | "modal" | "popover" | "skipLink" | "toast" | "tooltip">
+

The CSS z-index property

+
+
+
+
+

Settings

 +
+
+

Member Visibility

+
    +
    • +
    • +
    • +
    • +
    • +
+
+

Theme

+ +
+
+

Generated using TypeDoc

+
\ No newline at end of file diff --git a/docs/interfaces/InputControlProps.html b/docs/interfaces/InputControlProps.html new file mode 100644 index 0000000..2967f2e --- /dev/null +++ b/docs/interfaces/InputControlProps.html @@ -0,0 +1,4476 @@ +InputControlProps | react-hook-form-chakra
+
+ +
+
+
+
+ +

Interface InputControlProps

+
+

The union of ChakraFormControlProps and BaseReactHookFormProps which defines the base properties +for most of react-hook-form-chakra components

+
+
+

Hierarchy

+
+
+
+
+ +
+
+

Properties

+
__css? +_active? +_activeLink? +_activeStep? +_after? +_autofill? +_before? +_checked? +_dark? +_disabled? +_empty? +_even? +_expanded? +_first? +_firstLetter? +_focus? +_focusVisible? +_focusWithin? +_fullScreen? +_grabbed? +_groupActive? +_groupChecked? +_groupDisabled? +_groupFocus? +_groupFocusVisible? +_groupFocusWithin? +_groupHover? +_groupInvalid? +_hidden? +_highlighted? +_hover? +_indeterminate? +_invalid? +_last? +_light? +_loading? +_ltr? +_mediaDark? +_mediaReduceMotion? +_notFirst? +_notLast? +_odd? +_peerActive? +_peerChecked? +_peerDisabled? +_peerFocus? +_peerFocusVisible? +_peerFocusWithin? +_peerHover? +_peerInvalid? +_peerPlaceholderShown? +_placeholder? +_placeholderShown? +_pressed? +_readOnly? +_rtl? +_selected? +_selection? +_valid? +_visited? +alignContent? +alignItems? +alignSelf? +animation? +appearance? +apply? +aria-activedescendant? +aria-atomic? +aria-autocomplete? +aria-busy? +aria-checked? +aria-colcount? +aria-colindex? +aria-colspan? +aria-controls? +aria-current? +aria-describedby? +aria-details? +aria-disabled? +aria-dropeffect? +aria-errormessage? +aria-expanded? +aria-flowto? +aria-grabbed? +aria-haspopup? +aria-hidden? +aria-invalid? +aria-keyshortcuts? +aria-label? +aria-labelledby? +aria-level? +aria-live? +aria-modal? +aria-multiline? +aria-multiselectable? +aria-orientation? +aria-owns? +aria-placeholder? +aria-posinset? +aria-pressed? +aria-readonly? +aria-relevant? +aria-required? +aria-roledescription? +aria-rowcount? +aria-rowindex? +aria-rowspan? +aria-selected? +aria-setsize? +aria-sort? +aria-valuemax? +aria-valuemin? +aria-valuenow? +aria-valuetext? +backdropBlur? +backdropBrightness? +backdropContrast? +backdropFilter? +backdropHueRotate? +backdropInvert? +backdropSaturate? +background? +backgroundAttachment? +backgroundBlendMode? +backgroundClip? +backgroundColor? +backgroundImage? +backgroundPosition? +backgroundRepeat? +backgroundSize? +bg? +bgAttachment? +bgBlendMode? +bgClip? +bgColor? +bgGradient? +bgImage? +bgImg? +bgPos? +bgPosition? +bgRepeat? +bgSize? +blendMode? +blur? +border? +borderBottom? +borderBottomColor? +borderBottomLeftRadius? +borderBottomRadius? +borderBottomRightRadius? +borderBottomStyle? +borderBottomWidth? +borderColor? +borderEndRadius? +borderInlineEndRadius? +borderInlineStartRadius? +borderLeft? +borderLeftColor? +borderLeftRadius? +borderLeftStyle? +borderLeftWidth? +borderRadius? +borderRight? +borderRightColor? +borderRightRadius? +borderRightStyle? +borderRightWidth? +borderStartRadius? +borderStyle? +borderTop? +borderTopColor? +borderTopLeftRadius? +borderTopRadius? +borderTopRightRadius? +borderTopStyle? +borderTopWidth? +borderWidth? +borderX? +borderY? +bottom? +boxDecorationBreak? +boxShadow? +boxSize? +boxSizing? +brightness? +clipPath? +color? +columnGap? +contrast? +control? +css? +cursor? +display? +dropShadow? +errorMessageProps? +fill? +filter? +flex? +flexBasis? +flexDir? +flexDirection? +flexFlow? +flexGrow? +flexShrink? +flexWrap? +float? +fontFamily? +fontSize? +fontStyle? +fontWeight? +gap? +gridArea? +gridAutoColumns? +gridAutoFlow? +gridAutoRows? +gridColumn? +gridColumnEnd? +gridColumnGap? +gridColumnStart? +gridGap? +gridRow? +gridRowEnd? +gridRowGap? +gridRowStart? +gridTemplate? +gridTemplateAreas? +gridTemplateColumns? +gridTemplateRows? +h? +height? +helperText? +helperTextProps? +hideBelow? +hideFrom? +hueRotate? +inputMode? +inset? +insetEnd? +insetInlineEnd? +insetStart? +insetX? +insetY? +invert? +is? +isDisabled? +isInvalid? +isReadOnly? +isRequired? +isTruncated? +isolation? +justifyContent? +justifyItems? +justifySelf? +label? +labelProps? +layerStyle? +left? +letterSpacing? +lineHeight? +listStyleImage? +listStyleImg? +listStylePos? +listStylePosition? +m? +margin? +marginBottom? +marginEnd? +marginInlineEnd? +marginInlineStart? +marginLeft? +marginRight? +marginStart? +marginTop? +marginX? +marginY? +maxH? +maxHeight? +maxW? +maxWidth? +mb? +me? +minH? +minHeight? +minW? +minWidth? +mixBlendMode? +ml? +mr? +ms? +mt? +mx? +my? +name +noOfLines? +objectFit? +objectPosition? +onKeyPress? +onKeyPressCapture? +opacity? +order? +outline? +outlineColor? +outlineOffset? +overflow? +overflowWrap? +overflowX? +overflowY? +overscroll? +overscrollBehavior? +overscrollBehaviorX? +overscrollBehaviorY? +overscrollX? +overscrollY? +p? +padding? +paddingBottom? +paddingEnd? +paddingInlineEnd? +paddingInlineStart? +paddingLeft? +paddingRight? +paddingStart? +paddingTop? +paddingX? +paddingY? +pb? +pe? +pl? +placeContent? +placeItems? +placeSelf? +pointerEvents? +pos? +position? +pr? +ps? +pt? +px? +py? +resize? +right? +ring? +ringColor? +ringInset? +ringOffset? +ringOffsetColor? +rotate? +rounded? +roundedBottom? +roundedBottomLeft? +roundedBottomRight? +roundedEnd? +roundedLeft? +roundedRight? +roundedStart? +roundedTop? +roundedTopLeft? +roundedTopRight? +rowGap? +saturate? +scale? +scaleX? +scaleY? +shadow? +skewX? +skewY? +srOnly? +stroke? +sx? +textAlign? +textColor? +textDecor? +textDecoration? +textDecorationColor? +textDecorationLine? +textDecorationStyle? +textDecorationThickness? +textIndent? +textOverflow? +textShadow? +textStyle? +textTransform? +textUnderlineOffset? +top? +transform? +transformOrigin? +transition? +transitionDelay? +transitionDuration? +transitionProperty? +transitionTimingFunction? +translateX? +translateY? +userSelect? +verticalAlign? +visibility? +w? +whiteSpace? +width? +willChange? +wordBreak? +zIndex? +
+
+

Properties

+
+

Optional Private __css

+
__css?: SystemStyleObject
+

Used for internal css management

+
+
+

Optional _active

+
_active?: SystemStyleObject
+

Styles for CSS Selector &:active

+
+
+

Optional _activeLink

+
_activeLink?: SystemStyleObject
+

Used to style the active link in a navigation +Styles for CSS Selector &[aria-current=page]

+
+
+

Optional _activeStep

+
_activeStep?: SystemStyleObject
+

Used to style the current step within a process +Styles for CSS Selector &[aria-current=step]

+
+
+

Optional _after

+
_after?: SystemStyleObject
+

Styles for CSS selector &::after

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _after={{content:`""` }}/>
+
+
+
+

Optional _autofill

+
_autofill?: SystemStyleObject
+

Styles for CSS Selector &:-webkit-autofill

+
+
+

Optional _before

+
_before?: SystemStyleObject
+

Styles for CSS selector &::before

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _before={{content:`""` }}/>
+
+
+
+

Optional _checked

+
_checked?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is true

+
    +
  • CSS selector &[aria-checked=true]
    • +
+
+
+

Optional _dark

+
_dark?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _disabled

+
_disabled?: SystemStyleObject
+

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

+
    +
  • &[aria-disabled=true]
    • +
  • &:disabled
    • +
  • &[data-disabled]
    • +
  • &[disabled]
    • +
+
+
+

Optional _empty

+
_empty?: SystemStyleObject
+

Styles for CSS selector &:empty

+
+
+

Optional _even

+
_even?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(even)

+
+
+

Optional _expanded

+
_expanded?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-expanded is true

+
    +
  • CSS selector &[aria-expanded=true]
    • +
+
+
+

Optional _first

+
_first?: SystemStyleObject
+

Styles for CSS Selector &:first-of-type

+
+
+

Optional _firstLetter

+
_firstLetter?: SystemStyleObject
+

Styles for CSS selector &::first-letter

+

NOTE: This selector is only applied for block-level elements and not preceded by an image or table.

+ +

Example

<Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
+
+
+
+

Optional _focus

+
_focus?: SystemStyleObject
+

Styles for CSS selector &:focus

+
+
+

Optional _focusVisible

+
_focusVisible?: SystemStyleObject
+

Styles to apply when this element has received focus via tabbing

+
    +
  • CSS Selector &:focus-visible
    • +
+
+
+

Optional _focusWithin

+
_focusWithin?: SystemStyleObject
+

Styles to apply when a child of this element has received focus

+
    +
  • CSS Selector &:focus-within
    • +
+
+
+

Optional _fullScreen

+
_fullScreen?: SystemStyleObject
+

Styles for CSS Selector &:fullscreen.

+
+
+

Optional _grabbed

+
_grabbed?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-grabbed is true

+
    +
  • CSS selector &[aria-grabbed=true]
    • +
+
+
+

Optional _groupActive

+
_groupActive?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is active

+
+
+

Optional _groupChecked

+
_groupChecked?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is checked

+
+
+

Optional _groupDisabled

+
_groupDisabled?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is disabled

+
+
+

Optional _groupFocus

+
_groupFocus?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is focused

+
+
+

Optional _groupFocusVisible

+
_groupFocusVisible?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has visible focus

+
+
+

Optional _groupFocusWithin

+
_groupFocusWithin?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has focus within

+
+
+

Optional _groupHover

+
_groupHover?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is hovered

+
+
+

Optional _groupInvalid

+
_groupInvalid?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is invalid

+
+
+

Optional _hidden

+
_hidden?: SystemStyleObject
+

Styles for CSS Selector [hidden=true]

+
+
+

Optional _highlighted

+
_highlighted?: SystemStyleObject
+

Styles for the highlighted state.

+
+
+

Optional _hover

+
_hover?: SystemStyleObject
+

Styles for CSS selector &:hover

+
+
+

Optional _indeterminate

+
_indeterminate?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is mixed

+
    +
  • CSS selector &[aria-checked=mixed]
    • +
+
+
+

Optional _invalid

+
_invalid?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-invalid is true

+
    +
  • CSS selector &[aria-invalid=true]
    • +
+
+
+

Optional _last

+
_last?: SystemStyleObject
+

Styles for CSS Selector &:last-of-type

+
+
+

Optional _light

+
_light?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _loading

+
_loading?: SystemStyleObject
+

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. +Useful for styling loading states

+
+
+

Optional _ltr

+
_ltr?: SystemStyleObject
+

Styles for CSS Selector [dir=ltr] & +It is applied when a parent element or this element has dir="ltr"

+
+
+

Optional _mediaDark

+
_mediaDark?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-color-scheme: dark) +It is used when the user has requested the system use a light or dark color theme.

+
+
+

Optional _mediaReduceMotion

+
_mediaReduceMotion?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-reduced-motion: reduce) +It is used when the user has requested the system to reduce the amount of animations.

+
+
+

Optional _notFirst

+
_notFirst?: SystemStyleObject
+

Styles for CSS Selector &:not(:first-of-type)

+
+
+

Optional _notLast

+
_notLast?: SystemStyleObject
+

Styles for CSS Selector &:not(:last-of-type)

+
+
+

Optional _odd

+
_odd?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(odd)

+
+
+

Optional _peerActive

+
_peerActive?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is active

+
+
+

Optional _peerChecked

+
_peerChecked?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is checked

+
+
+

Optional _peerDisabled

+
_peerDisabled?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is disabled

+
+
+

Optional _peerFocus

+
_peerFocus?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is focused

+
+
+

Optional _peerFocusVisible

+
_peerFocusVisible?: SystemStyleObject
+

Styles to apply when a sibling element with .peeror data-peer has visible focus

+
+
+

Optional _peerFocusWithin

+
_peerFocusWithin?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has focus within

+
+
+

Optional _peerHover

+
_peerHover?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is hovered

+
+
+

Optional _peerInvalid

+
_peerInvalid?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is invalid

+
+
+

Optional _peerPlaceholderShown

+
_peerPlaceholderShown?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

+
+
+

Optional _placeholder

+
_placeholder?: SystemStyleObject
+

Styles for CSS Selector &::placeholder.

+
+
+

Optional _placeholderShown

+
_placeholderShown?: SystemStyleObject
+

Styles for CSS Selector &:placeholder-shown.

+
+
+

Optional _pressed

+
_pressed?: SystemStyleObject
+

Styles for CSS Selector &[aria-pressed=true] +Typically used to style the current "pressed" state of toggle buttons

+
+
+

Optional _readOnly

+
_readOnly?: SystemStyleObject
+

Styles for CSS Selector &:readonly

+
+
+

Optional _rtl

+
_rtl?: SystemStyleObject
+

Styles for CSS Selector [dir=rtl] & +It is applied when a parent element or this element has dir="rtl"

+
+
+

Optional _selected

+
_selected?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-selected is true

+
    +
  • CSS selector &[aria-selected=true]
    • +
+
+
+

Optional _selection

+
_selection?: SystemStyleObject
+

Styles for CSS Selector &::selection

+
+
+

Optional _valid

+
_valid?: SystemStyleObject
+

Styles for the valid state

+
    +
  • CSS selector &[data-valid], &[data-state=valid]
    • +
+
+
+

Optional _visited

+
_visited?: SystemStyleObject
+

Styles for CSS Selector &:visited

+
+
+

Optional alignContent

+
alignContent?: ResponsiveValue<AlignContent>
+

The CSS align-content property.

+

It defines the distribution of space between and around +content items along a flexbox cross-axis or a grid's block axis.

+ +

See

Mozilla Docs

+
+
+

Optional alignItems

+
alignItems?: ResponsiveValue<AlignItems>
+

The CSS align-items property.

+

It defines the align-self value on all direct children as a group.

+
    +
  • In Flexbox, it controls the alignment of items on the Cross Axis.
    • +
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
    • +
+ +

See

Mozilla Docs

+
+
+

Optional alignSelf

+
alignSelf?: ResponsiveValue<AlignSelf>
+

The CSS align-self property.

+

It works like align-items, but applies only to a +single flexbox item, instead of all of them.

+ +

See

Mozilla Docs

+
+
+

Optional animation

+
animation?: ResponsiveValue<Animation<string & {}>>
+

The CSS animation property

+
+
+

Optional appearance

+
appearance?: ResponsiveValue<Appearance>
+

The CSS appearance property

+
+
+

Optional apply

+
apply?: ResponsiveValue<string>
+

Apply theme-aware style objects in theme

+ +

Example

<Box apply="styles.h3">This is a div</Box>
+
+

This will apply styles defined in theme.styles.h3

+
+
+

Optional aria-activedescendant

+
aria-activedescendant?: string
+

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

+
+
+

Optional aria-atomic

+
aria-atomic?: Booleanish
+

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

+
+
+

Optional aria-autocomplete

+
aria-autocomplete?: "none" | "both" | "inline" | "list"
+

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be +presented if they are made.

+
+
+

Optional aria-busy

+
aria-busy?: Booleanish
+

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

+
+
+

Optional aria-checked

+
aria-checked?: boolean | "true" | "false" | "mixed"
+

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

+ +

See

    +
  • aria-pressed
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-colcount

+
aria-colcount?: number
+

Defines the total number of columns in a table, grid, or treegrid.

+ +

See

aria-colindex.

+
+
+

Optional aria-colindex

+
aria-colindex?: number
+

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

+ +

See

    +
  • aria-colcount
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-colspan

+
aria-colspan?: number
+

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-colindex
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-controls

+
aria-controls?: string
+

Identifies the element (or elements) whose contents or presence are controlled by the current element.

+ +

See

aria-owns.

+
+
+

Optional aria-current

+
aria-current?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"
+

Indicates the element that represents the current item within a container or set of related elements.

+
+
+

Optional aria-describedby

+
aria-describedby?: string
+

Identifies the element (or elements) that describes the object.

+ +

See

aria-labelledby

+
+
+

Optional aria-details

+
aria-details?: string
+

Identifies the element that provides a detailed, extended description for the object.

+ +

See

aria-describedby.

+
+
+

Optional aria-disabled

+
aria-disabled?: Booleanish
+

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

+ +

See

    +
  • aria-hidden
    • +
  • aria-readonly.
    • +
+
+
+

Optional aria-dropeffect

+
aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"
+

Indicates what functions can be performed when a dragged object is released on the drop target.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-errormessage

+
aria-errormessage?: string
+

Identifies the element that provides an error message for the object.

+ +

See

    +
  • aria-invalid
    • +
  • aria-describedby.
    • +
+
+
+

Optional aria-expanded

+
aria-expanded?: Booleanish
+

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

+
+
+

Optional aria-flowto

+
aria-flowto?: string
+

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, +allows assistive technology to override the general default of reading in document source order.

+
+
+

Optional aria-grabbed

+
aria-grabbed?: Booleanish
+

Indicates an element's "grabbed" state in a drag-and-drop operation.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-haspopup

+
aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "true" | "false" | "tree"
+

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

+
+
+

Optional aria-hidden

+
aria-hidden?: Booleanish
+

Indicates whether the element is exposed to an accessibility API.

+ +

See

aria-disabled.

+
+
+

Optional aria-invalid

+
aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"
+

Indicates the entered value does not conform to the format expected by the application.

+ +

See

aria-errormessage.

+
+
+

Optional aria-keyshortcuts

+
aria-keyshortcuts?: string
+

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

+
+
+

Optional aria-label

+
aria-label?: string
+

Defines a string value that labels the current element.

+ +

See

aria-labelledby.

+
+
+

Optional aria-labelledby

+
aria-labelledby?: string
+

Identifies the element (or elements) that labels the current element.

+ +

See

aria-describedby.

+
+
+

Optional aria-level

+
aria-level?: number
+

Defines the hierarchical level of an element within a structure.

+
+
+

Optional aria-live

+
aria-live?: "off" | "assertive" | "polite"
+

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

+
+
+

Optional aria-modal

+
aria-modal?: Booleanish
+

Indicates whether an element is modal when displayed.

+
+
+

Optional aria-multiline

+
aria-multiline?: Booleanish
+

Indicates whether a text box accepts multiple lines of input or only a single line.

+
+
+

Optional aria-multiselectable

+
aria-multiselectable?: Booleanish
+

Indicates that the user may select more than one item from the current selectable descendants.

+
+
+

Optional aria-orientation

+
aria-orientation?: "horizontal" | "vertical"
+

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

+
+
+

Optional aria-owns

+
aria-owns?: string
+

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship +between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

+ +

See

aria-controls.

+
+
+

Optional aria-placeholder

+
aria-placeholder?: string
+

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. +A hint could be a sample value or a brief description of the expected format.

+
+
+

Optional aria-posinset

+
aria-posinset?: number
+

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-setsize.

+
+
+

Optional aria-pressed

+
aria-pressed?: boolean | "true" | "false" | "mixed"
+

Indicates the current "pressed" state of toggle buttons.

+ +

See

    +
  • aria-checked
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-readonly

+
aria-readonly?: Booleanish
+

Indicates that the element is not editable, but is otherwise operable.

+ +

See

aria-disabled.

+
+
+

Optional aria-relevant

+
aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
+

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

+ +

See

aria-atomic.

+
+
+

Optional aria-required

+
aria-required?: Booleanish
+

Indicates that user input is required on the element before a form may be submitted.

+
+
+

Optional aria-roledescription

+
aria-roledescription?: string
+

Defines a human-readable, author-localized description for the role of an element.

+
+
+

Optional aria-rowcount

+
aria-rowcount?: number
+

Defines the total number of rows in a table, grid, or treegrid.

+ +

See

aria-rowindex.

+
+
+

Optional aria-rowindex

+
aria-rowindex?: number
+

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowcount
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-rowspan

+
aria-rowspan?: number
+

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowindex
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-selected

+
aria-selected?: Booleanish
+

Indicates the current "selected" state of various widgets.

+ +

See

    +
  • aria-checked
    • +
  • aria-pressed.
    • +
+
+
+

Optional aria-setsize

+
aria-setsize?: number
+

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-posinset.

+
+
+

Optional aria-sort

+
aria-sort?: "none" | "ascending" | "descending" | "other"
+

Indicates if items in a table or grid are sorted in ascending or descending order.

+
+
+

Optional aria-valuemax

+
aria-valuemax?: number
+

Defines the maximum allowed value for a range widget.

+
+
+

Optional aria-valuemin

+
aria-valuemin?: number
+

Defines the minimum allowed value for a range widget.

+
+
+

Optional aria-valuenow

+
aria-valuenow?: number
+

Defines the current value for a range widget.

+ +

See

aria-valuetext.

+
+
+

Optional aria-valuetext

+
aria-valuetext?: string
+

Defines the human readable text alternative of aria-valuenow for a range widget.

+
+
+

Optional backdropBlur

+
backdropBlur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the backdrop-blur filter value of an element. +Value is assigned to --chakra-backdrop-blur css variable

+
+
+

Optional backdropBrightness

+
backdropBrightness?: ResponsiveValue<Length>
+

Sets the backdrop-brightness filter value of an element. +Value is assigned to --chakra-backdrop-brightness css variable

+
+
+

Optional backdropContrast

+
backdropContrast?: ResponsiveValue<Length>
+

Sets the backdrop-contrast filter value of an element. +Value is assigned to --chakra-backdrop-contrast css variable

+
+
+

Optional backdropFilter

+
backdropFilter?: ResponsiveValue<"auto" | BackdropFilter>
+

The CSS backdrop-filter property. When set to auto, you allow +Chakra UI to define the color based on the backdrop filter style props +(backdropBlur, backdropSaturate, etc.)

+
+
+

Optional backdropHueRotate

+
backdropHueRotate?: ResponsiveValue<Length>
+

Sets the backdrop-hue-rotate filter value of an element. +Value is assigned to --chakra-backdrop-hue-rotate css variable

+
+
+

Optional backdropInvert

+
backdropInvert?: ResponsiveValue<Length>
+

Sets the backdrop-invert filter value of an element. +Value is assigned to --chakra-backdrop-invert css variable

+
+
+

Optional backdropSaturate

+
backdropSaturate?: ResponsiveValue<Length>
+

Sets the backdrop-saturate filter value of an element. +Value is assigned to --chakra-backdrop-saturate css variable

+
+
+

Optional background

+
background?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional backgroundAttachment

+
backgroundAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional backgroundBlendMode

+
backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional backgroundClip

+
backgroundClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional backgroundColor

+
backgroundColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional backgroundImage

+
backgroundImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional backgroundPosition

+
backgroundPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional backgroundRepeat

+
backgroundRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional backgroundSize

+
backgroundSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional bg

+
bg?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional bgAttachment

+
bgAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional bgBlendMode

+
bgBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional bgClip

+
bgClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional bgColor

+
bgColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional bgGradient

+
bgGradient?: ResponsiveValue<string | string & {}>
+

The background-gradient shorthand

+
+
+

Optional bgImage

+
bgImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgImg

+
bgImg?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgPos

+
bgPos?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgPosition

+
bgPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgRepeat

+
bgRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional bgSize

+
bgSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional blendMode

+
blendMode?: ResponsiveValue<MixBlendMode>
+

The blend-mode property

+
+
+

Optional blur

+
blur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the blur filter value of an element. +Value is assigned to --chakra-filter css variable

+
+
+

Optional border

+
border?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border property

+
+
+

Optional borderBottom

+
borderBottom?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-bottom property

+
+
+

Optional borderBottomColor

+
borderBottomColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderBottomColor>
+

The CSS border-bottom-color property

+
+
+

Optional borderBottomLeftRadius

+
borderBottomLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional borderBottomRadius

+
borderBottomRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional borderBottomRightRadius

+
borderBottomRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional borderBottomStyle

+
borderBottomStyle?: ResponsiveValue<BorderBottomStyle>
+

The CSS border-bottom-style property

+
+
+

Optional borderBottomWidth

+
borderBottomWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-bottom-width property

+
+
+

Optional borderColor

+
borderColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-color property

+
+
+

Optional borderEndRadius

+
borderEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineEndRadius

+
borderInlineEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderInlineEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineStartRadius

+
borderInlineStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderInlineStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderLeft

+
borderLeft?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-left property

+
+
+

Optional borderLeftColor

+
borderLeftColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderLeftColor>
+

The CSS border-left-color property

+
+
+

Optional borderLeftRadius

+
borderLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional borderLeftStyle

+
borderLeftStyle?: ResponsiveValue<BorderLeftStyle>
+

The CSS border-left-style property

+
+
+

Optional borderLeftWidth

+
borderLeftWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-left-width property

+
+
+

Optional borderRadius

+
borderRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional borderRight

+
borderRight?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right property

+
+
+

Optional borderRightColor

+
borderRightColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderRightColor>
+

The CSS border-right-color property

+
+
+

Optional borderRightRadius

+
borderRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional borderRightStyle

+
borderRightStyle?: ResponsiveValue<BorderRightStyle>
+

The CSS border-right-styles property

+
+
+

Optional borderRightWidth

+
borderRightWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-right-width property

+
+
+

Optional borderStartRadius

+
borderStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderStyle

+
borderStyle?: ResponsiveValue<BorderStyle>
+

The CSS border-style property

+
+
+

Optional borderTop

+
borderTop?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top property

+
+
+

Optional borderTopColor

+
borderTopColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-top-color property

+
+
+

Optional borderTopLeftRadius

+
borderTopLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional borderTopRadius

+
borderTopRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional borderTopRightRadius

+
borderTopRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional borderTopStyle

+
borderTopStyle?: ResponsiveValue<BorderTopStyle>
+

The CSS border-top-style property

+
+
+

Optional borderTopWidth

+
borderTopWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-top-width property

+
+
+

Optional borderWidth

+
borderWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-width property

+
+
+

Optional borderX

+
borderX?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right and border-left property

+
+
+

Optional borderY

+
borderY?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top and border-bottom property

+
+
+

Optional bottom

+
bottom?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS bottom property

+
+
+

Optional boxDecorationBreak

+
boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>
+

The CSS box-decoration property

+
+
+

Optional boxShadow

+
boxShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional boxSize

+
boxSize?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width and height property

+
+
+

Optional boxSizing

+
boxSizing?: BoxSizing
+

The CSS box-sizing property

+
+
+

Optional brightness

+
brightness?: ResponsiveValue<Length>
+

Sets the brightness filter value of an element. +Value is assigned to --chakra-brightness css variable

+
+
+

Optional clipPath

+
clipPath?: ResponsiveValue<ClipPath>
+

The CSS clip-path property.

+

It creates a clipping region that sets what part of an element should be shown.

+
+
+

Optional color

+
color?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional columnGap

+
columnGap?: ResponsiveValue<ColumnGap<Length>>
+

The CSS column-gap property.

+

It sets the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional contrast

+
contrast?: ResponsiveValue<Length>
+

Sets the contrast filter value of an element. +Value is assigned to --chakra-contrast css variable

+
+
+

Optional control

+
control?: Control<any, any>
+

The control passed down from react-hook-form. +Only required if not using FormProvider

+
+
+

Optional css

+
css?: Interpolation<{}>
+

The emotion's css style object

+
+
+

Optional cursor

+
cursor?: ResponsiveValue<Cursor>
+

The CSS cursor property

+
+
+

Optional display

+
display?: ResponsiveValue<Display>
+

The CSS display property

+
+
+

Optional dropShadow

+
dropShadow?: ResponsiveValue<"base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

Sets the drop-shadow filter value of an element. +Value is assigned to --chakra-drop-shadow css variable

+
+
+

Optional errorMessageProps

+
errorMessageProps?: FormErrorMessageProps
+

Chakra FormErrorMessageProps for error message

+
+
+

Optional fill

+
fill?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS fill property for icon svgs and paths

+
+
+

Optional filter

+
filter?: ResponsiveValue<Filter | "auto">
+

The CSS filter property. When set to auto, you allow +Chakra UI to define the color based on the filter style props +(blur, saturate, etc.)

+
+
+

Optional flex

+
flex?: ResponsiveValue<Flex<Length>>
+

The CSS flex property.

+

It defines how a flex item will grow or shrink +to fit the space available in its flex container.

+ +

See

Mozilla Docs

+
+
+

Optional flexBasis

+
flexBasis?: ResponsiveValue<FlexBasis<Length>>
+

The CSS flex-basis property.

+

It defines the initial main size of a flex item.

+ +

See

Mozilla Docs

+
+
+

Optional flexDir

+
flexDir?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexDirection

+
flexDirection?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexFlow

+
flexFlow?: ResponsiveValue<FlexFlow>
+

The CSS flex-flow property.

+

It is a shorthand property for flex-direction and flex-wrap. +It specifies the direction of a flex container, as well as its wrapping behavior.

+ +

See

Mozilla Docs

+
+
+

Optional flexGrow

+
flexGrow?: ResponsiveValue<FlexGrow>
+

The CSS flex-grow property.

+

It defines how much a flexbox item should grow +if there's space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexShrink

+
flexShrink?: ResponsiveValue<FlexShrink>
+

The CSS flex-shrink property.

+

It defines how much a flexbox item should shrink +if there's not enough space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexWrap

+
flexWrap?: ResponsiveValue<FlexWrap>
+

The CSS flex-wrap property.

+

It defines whether flex items are forced onto one line or +can wrap onto multiple lines. If wrapping is allowed, +it sets the direction that lines are stacked.

+ +

See

Mozilla Docs

+
+
+

Optional float

+
float?: ResponsiveValue<Float>
+

The CSS float property

+
+
+

Optional fontFamily

+
fontFamily?: ResponsiveValue<"body" | FontFamily | "heading" | "mono">
+

The CSS font-family property

+
+
+

Optional fontSize

+
fontSize?: ResponsiveValue<number | "small" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl">
+

The CSS font-size property

+
+
+

Optional fontStyle

+
fontStyle?: ResponsiveValue<FontStyle>
+

The CSS font-style property

+
+
+

Optional fontWeight

+
fontWeight?: ResponsiveValue<number | "bold" | string & {} | "black" | "normal" | "hairline" | "thin" | "light" | "medium" | "semibold" | "extrabold">
+

The CSS font-weight property

+
+
+

Optional gap

+
gap?: ResponsiveValue<Gap<Length>>
+

The CSS gap property.

+

It defines the gap between items in both flex and +grid contexts.

+ +

See

Mozilla Docs

+
+
+

Optional gridArea

+
gridArea?: ResponsiveValue<GridArea>
+

The CSS grid-areas property.

+

It specifies a grid item’s size and location within a grid by +contributing a line, a span, or nothing (automatic) +to its grid placement, thereby specifying the edges of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoColumns

+
gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>
+

The CSS grid-auto-columns property.

+

It specifies the size of an implicitly-created grid column track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoFlow

+
gridAutoFlow?: ResponsiveValue<GridAutoFlow>
+

The CSS grid-auto-flow property

+

It controls how the auto-placement algorithm works, +specifying exactly how auto-placed items get flowed into the grid.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoRows

+
gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>
+

The CSS grid-auto-rows property.

+

It specifies the size of an implicitly-created grid row track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumn

+
gridColumn?: ResponsiveValue<GridColumn>
+

The CSS grid-column property.

+

It specifies a grid item's size and location within a grid column +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnEnd

+
gridColumnEnd?: ResponsiveValue<GridColumnEnd>
+

The CSS grid-column property

+

It specifies a grid item’s end position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the block-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnGap

+
gridColumnGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-column-gap property.

+

It defines the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnStart

+
gridColumnStart?: ResponsiveValue<GridColumnStart>
+

The CSS grid-column property.

+

It specifies a grid item’s start position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement

+ +

See

Mozilla Docs

+
+
+

Optional gridGap

+
gridGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-gap property.

+

It defines the gaps (gutters) between rows and columns

+ +

See

Mozilla Docs

+
+
+

Optional gridRow

+
gridRow?: ResponsiveValue<GridRow>
+

The CSS grid-row property

+

It specifies a grid item’s size and location within the grid row +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowEnd

+
gridRowEnd?: ResponsiveValue<GridRowEnd>
+

The CSS grid-row-end property

+

It specifies a grid item’s end position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowGap

+
gridRowGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-row-gap property.

+

It defines the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowStart

+
gridRowStart?: ResponsiveValue<GridRowStart>
+

The CSS grid-row-start property

+

It specifies a grid item’s start position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplate

+
gridTemplate?: ResponsiveValue<GridTemplate>
+

The CSS grid-template property.

+

It is a shorthand property for defining grid columns, rows, and areas.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateAreas

+
gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>
+

The CSS grid-template-areas property.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateColumns

+
gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>
+

The CSS grid-template-columns property

+

It defines the line names and track sizing functions of the grid columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateRows

+
gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>
+

The CSS grid-template-rows property.

+

It defines the line names and track sizing functions of the grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional h

+
h?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional height

+
height?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional helperText

+
helperText?: ReactNode
+

Helper text to show alongside input

+
+
+

Optional helperTextProps

+
helperTextProps?: TextProps
+

Chakra TextProps associated with the helper text

+
+
+

Optional hideBelow

+
hideBelow?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element below the specified breakpoint

+
+
+

Optional hideFrom

+
hideFrom?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element from the specified breakpoint and up

+
+
+

Optional hueRotate

+
hueRotate?: ResponsiveValue<Length>
+

Sets the hue-rotate filter value of an element. +Value is assigned to --chakra-hue-rotate css variable

+
+
+

Optional inputMode

+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
+

Hints at the type of data that might be entered by the user while editing the element or its contents

+ +

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

+
+
+

Optional inset

+
inset?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, right, top, bottom property

+
+
+

Optional insetEnd

+
insetEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetEnd is equivalent to right. +When the direction is rtl, insetEnd is equivalent to left.

+
+
+

Optional insetInlineEnd

+
insetInlineEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetInlineEnd is equivalent to right. +When the direction is rtl, insetInlineEnd is equivalent to left.

+
+
+

Optional insetStart

+
insetStart?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is start, end is equivalent to left. +When the direction is start, end is equivalent to right.

+
+
+

Optional insetX

+
insetX?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, and right property

+
+
+

Optional insetY

+
insetY?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top, and bottom property

+
+
+

Optional invert

+
invert?: ResponsiveValue<Length>
+

Sets the invert filter value of an element. +Value is assigned to --chakra-invert css variable

+
+
+

Optional is

+
is?: string
+

Specify that a standard HTML element should behave like a defined custom built-in element

+ +

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

+
+
+

Optional isDisabled

+
isDisabled?: boolean
+

If true, the form control will be disabled. This has 2 side effects:

+
    +
  • The FormLabel will have data-disabled attribute
    • +
  • The form element (e.g, Input) will be disabled
    • +
+ +

Default

false

+
+
+

Optional isInvalid

+
isInvalid?: boolean
+

If true, the form control will be invalid. This has 2 side effects:

+
    +
  • The FormLabel and FormErrorIcon will have data-invalid set to true
    • +
  • The form element (e.g, Input) will have aria-invalid set to true
    • +
+ +

Default

false

+
+
+

Optional isReadOnly

+
isReadOnly?: boolean
+

If true, the form control will be readonly

+ +

Default

false

+
+
+

Optional isRequired

+
isRequired?: boolean
+

If true, the form control will be required. This has 2 side effects:

+
    +
  • The FormLabel will show a required indicator
    • +
  • The form element (e.g, Input) will have aria-required set to true
    • +
+ +

Default

false

+
+
+

Optional isTruncated

+
isTruncated?: boolean
+

If true, it clamps truncate a text after one line.

+
+
+

Optional isolation

+
isolation?: ResponsiveValue<Isolation>
+

The CSS isolation property

+
+
+

Optional justifyContent

+
justifyContent?: ResponsiveValue<JustifyContent>
+

The CSS justify-content property.

+

It defines how the browser distributes space between and around content items +along the main-axis of a flex container, and the inline axis of a grid container.

+ +

See

Mozilla Docs

+
+
+

Optional justifyItems

+
justifyItems?: ResponsiveValue<JustifyItems>
+

The CSS justify-items property.

+

It defines the default justify-self for all items of the box, +giving them all a default way of justifying each box +along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional justifySelf

+
justifySelf?: ResponsiveValue<JustifySelf>
+

The CSS justify-self property.

+

It defines the way a box is justified inside its +alignment container along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional label

+
label?: ReactNode
+

The label to be associated with the input

+
+
+

Optional labelProps

+
labelProps?: FormLabelProps
+

Chakra FormLabelProps

+
+
+

Optional layerStyle

+
layerStyle?: ResponsiveValue<string & {}>
+

The layer style object to apply. +Note: Styles must be located in theme.layerStyles

+
+
+

Optional left

+
left?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left property

+
+
+

Optional letterSpacing

+
letterSpacing?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "tighter" | "tight" | "wide" | "wider" | "widest">
+

The CSS letter-spacing property

+
+
+

Optional lineHeight

+
lineHeight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "none" | "normal" | number & {} | "shorter" | "short" | "tall" | "taller">
+

The CSS line-height property

+
+
+

Optional listStyleImage

+
listStyleImage?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStyleImg

+
listStyleImg?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStylePos

+
listStylePos?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional listStylePosition

+
listStylePosition?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional m

+
m?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional margin

+
margin?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional marginBottom

+
marginBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional marginEnd

+
marginEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginEnd is equivalent to marginRight. +When direction is rtl, marginEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineEnd

+
marginInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineEnd is equivalent to marginRight. +When direction is rtl, marginInlineEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineStart

+
marginInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineStart is equivalent to marginLeft. +When direction is rtl, marginInlineStart is equivalent to marginRight.

+
+
+

Optional marginLeft

+
marginLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional marginRight

+
marginRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional marginStart

+
marginStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginStart is equivalent to marginLeft. +When direction is rtl, marginStart is equivalent to marginRight.

+
+
+

Optional marginTop

+
marginTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional marginX

+
marginX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional marginY

+
marginY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

Optional maxH

+
maxH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxHeight

+
maxHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxW

+
maxW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional maxWidth

+
maxWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional mb

+
mb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional me

+
me?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, me is equivalent to marginRight. +When direction is rtl, me is equivalent to marginLeft.

+
+
+

Optional minH

+
minH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minHeight

+
minHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minW

+
minW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional minWidth

+
minWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional mixBlendMode

+
mixBlendMode?: ResponsiveValue<MixBlendMode>
+

The mix-blend-mode property

+
+
+

Optional ml

+
ml?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional mr

+
mr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional ms

+
ms?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, ms is equivalent to marginLeft. +When direction is rtl, ms is equivalent to marginRight.

+
+
+

Optional mt

+
mt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional mx

+
mx?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional my

+
my?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

name

+
name: string
+

The name of the input (required)

+
+
+

Optional noOfLines

+
noOfLines?: ResponsiveValue<number>
+

Used to truncate text at a specific number of lines

+
+
+

Optional objectFit

+
objectFit?: ResponsiveValue<ObjectFit>
+

The CSS object-fit property

+
+
+

Optional objectPosition

+
objectPosition?: ResponsiveValue<ObjectPosition<Length>>
+

The CSS object-position property

+
+
+

Optional onKeyPress

+
onKeyPress?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional onKeyPressCapture

+
onKeyPressCapture?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional opacity

+
opacity?: ResponsiveValue<Opacity>
+

The CSS opacity property

+
+
+

Optional order

+
order?: ResponsiveValue<Order>
+

The CSS order property.

+

It defines the order to lay out an item in a flex or grid container.

+ +

See

Mozilla Docs

+
+
+

Optional outline

+
outline?: ResponsiveValue<Outline<Length>>
+

The CSS outline property

+
+
+

Optional outlineColor

+
outlineColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS outline-color property

+
+
+

Optional outlineOffset

+
outlineOffset?: ResponsiveValue<OutlineOffset<Length>>
+

The CSS outline-offset property

+
+
+

Optional overflow

+
overflow?: ResponsiveValue<Overflow>
+

The CSS overflow property

+
+
+

Optional overflowWrap

+
overflowWrap?: ResponsiveValue<OverflowWrap>
+

The CSS overflow-wrap property

+
+
+

Optional overflowX

+
overflowX?: ResponsiveValue<OverflowX>
+

The CSS overflow-x property

+
+
+

Optional overflowY

+
overflowY?: ResponsiveValue<OverflowY>
+

The CSS overflow-y property

+
+
+

Optional overscroll

+
overscroll?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehavior

+
overscrollBehavior?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehaviorX

+
overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollBehaviorY

+
overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional overscrollX

+
overscrollX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollY

+
overscrollY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional p

+
p?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional padding

+
padding?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional paddingBottom

+
paddingBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional paddingEnd

+
paddingEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingEnd is equivalent to paddingRight. +When direction is rtl, paddingEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineEnd

+
paddingInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineEnd is equivalent to paddingRight. +When direction is rtl, paddingInlineEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineStart

+
paddingInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineStart is equivalent to paddingLeft. +When direction is rtl, paddingInlineStart is equivalent to paddingRight.

+
+
+

Optional paddingLeft

+
paddingLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional paddingRight

+
paddingRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional paddingStart

+
paddingStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingStart is equivalent to paddingLeft. +When direction is rtl, paddingStart is equivalent to paddingRight.

+
+
+

Optional paddingTop

+
paddingTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional paddingX

+
paddingX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional paddingY

+
paddingY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional pb

+
pb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional pe

+
pe?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, pe is equivalent to paddingRight. +When direction is rtl, pe is equivalent to paddingLeft.

+
+
+

Optional pl

+
pl?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional placeContent

+
placeContent?: ResponsiveValue<PlaceContent>
+

The CSS place-content property.

+

It allows you to align content along both the block and +inline directions at once (i.e. the align-content and justify-content properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional placeItems

+
placeItems?: ResponsiveValue<PlaceItems>
+

The CSS place-items property.

+

It allows you to align items along both the block and +inline directions at once (i.e. the align-items and justify-items properties) +in a relevant layout system such as Grid or Flex.

+ +

See

Mozilla Docs

+
+
+

Optional placeSelf

+
placeSelf?: ResponsiveValue<PlaceSelf>
+

The CSS place-self property.

+

It allows you to align an individual item in both the block and +inline directions at once (i.e. the align-self and justify-self properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional pointerEvents

+
pointerEvents?: ResponsiveValue<PointerEvents>
+

The CSS pointer-events property

+
+
+

Optional pos

+
pos?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional position

+
position?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional pr

+
pr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional ps

+
ps?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, ps is equivalent to paddingLeft. +When direction is rtl, ps is equivalent to paddingRight.

+
+
+

Optional pt

+
pt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional px

+
px?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional py

+
py?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional resize

+
resize?: ResponsiveValue<Resize>
+

The CSS resize property

+
+
+

Optional right

+
right?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS right property

+
+
+

Optional ring

+
ring?: ResponsiveValue<Length>
+

Creates outline rings with CSS box-shadow property

+
+
+

Optional ringColor

+
ringColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the outline ring

+
+
+

Optional ringInset

+
ringInset?: ResponsiveValue<"inset" | "none">
+

If the outline ring should an inset

+
+
+

Optional ringOffset

+
ringOffset?: ResponsiveValue<Length>
+

The thickness of the offset shadow when using outline rings

+
+
+

Optional ringOffsetColor

+
ringOffsetColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the offset shadow when adding outline rings

+
+
+

Optional rotate

+
rotate?: ResponsiveValue<Length>
+

Sets the rotation value of the element

+
+
+

Optional rounded

+
rounded?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional roundedBottom

+
roundedBottom?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional roundedBottomLeft

+
roundedBottomLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional roundedBottomRight

+
roundedBottomRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional roundedEnd

+
roundedEnd?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedLeft

+
roundedLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional roundedRight

+
roundedRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional roundedStart

+
roundedStart?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedTop

+
roundedTop?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional roundedTopLeft

+
roundedTopLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional roundedTopRight

+
roundedTopRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional rowGap

+
rowGap?: ResponsiveValue<RowGap<Length>>
+

The CSS row-gap property.

+

It sets the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional saturate

+
saturate?: ResponsiveValue<Length>
+

Sets the saturation filter value of an element. +Value is assigned to --chakra-saturate css variable

+
+
+

Optional scale

+
scale?: ResponsiveValue<Length>
+

Sets the scale value of the element

+
+
+

Optional scaleX

+
scaleX?: ResponsiveValue<Length>
+

Scale value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-x
    • +
+
+
+

Optional scaleY

+
scaleY?: ResponsiveValue<Length>
+

Scale value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-y
    • +
+
+
+

Optional shadow

+
shadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional skewX

+
skewX?: ResponsiveValue<Length>
+

Skew value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-x
    • +
+
+
+

Optional skewY

+
skewY?: ResponsiveValue<Length>
+

Skew value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-y
    • +
+
+
+

Optional srOnly

+
srOnly?: true | "focusable"
+

If true, hide an element visually without hiding it from screen readers.

+

If focusable, the sr-only styles will be undone, making the element visible +to sighted users as well as screen readers.

+
+
+

Optional stroke

+
stroke?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS stroke property for icon svgs and paths

+
+
+

Optional sx

+
sx?: SystemStyleObject
+

Used to pass theme-aware style props. +NB: This is the public API for user-land

+
+
+

Optional textAlign

+
textAlign?: ResponsiveValue<TextAlign>
+

The CSS text-align property

+
+
+

Optional textColor

+
textColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional textDecor

+
textDecor?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecoration

+
textDecoration?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecorationColor

+
textDecorationColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | TextDecorationColor>
+

The CSS text-decoration-color property

+
+
+

Optional textDecorationLine

+
textDecorationLine?: ResponsiveValue<TextDecorationLine>
+

The CSS text-decoration-line property

+
+
+

Optional textDecorationStyle

+
textDecorationStyle?: ResponsiveValue<TextDecorationStyle>
+

The CSS text-decoration-style property

+
+
+

Optional textDecorationThickness

+
textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>
+

The CSS text-decoration-thickness property

+
+
+

Optional textIndent

+
textIndent?: ResponsiveValue<TextIndent<0 | string & {}>>
+

The CSS text-indent property

+
+
+

Optional textOverflow

+
textOverflow?: ResponsiveValue<TextOverflow>
+

The CSS text-overflow property

+
+
+

Optional textShadow

+
textShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "inner" | "dark-lg" | TextShadow>
+

The text-shadow property

+
+
+

Optional textStyle

+
textStyle?: ResponsiveValue<string & {}>
+

The text style object to apply. +Note: Styles must be located in theme.textStyles

+
+
+

Optional textTransform

+
textTransform?: ResponsiveValue<TextTransform>
+

The CSS text-transform property

+
+
+

Optional textUnderlineOffset

+
textUnderlineOffset?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto">
+

The CSS text-underline-offset property

+
+
+

Optional top

+
top?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top property

+
+
+

Optional transform

+
transform?: ResponsiveValue<"auto" | Transform | "auto-gpu">
+

The CSS transform property

+
+
+

Optional transformOrigin

+
transformOrigin?: ResponsiveValue<number | "center" | "px" | "top" | "right" | "bottom" | "left" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS transform-origin property

+
+
+

Optional transition

+
transition?: ResponsiveValue<Transition<string & {}>>
+

The CSS transition property

+
+
+

Optional transitionDelay

+
transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>
+

The CSS transition-delay property

+
+
+

Optional transitionDuration

+
transitionDuration?: ResponsiveValue<string>
+

The CSS transition-duration property

+
+
+

Optional transitionProperty

+
transitionProperty?: ResponsiveValue<TransitionProperty>
+

The CSS transition-property property

+
+
+

Optional transitionTimingFunction

+
transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>
+

The CSS transition-timing-function property

+
+
+

Optional translateX

+
translateX?: ResponsiveValue<Length>
+

Translate value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-x
    • +
+
+
+

Optional translateY

+
translateY?: ResponsiveValue<Length>
+

Translate value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-y
    • +
+
+
+

Optional userSelect

+
userSelect?: ResponsiveValue<UserSelect>
+

The CSS user-select property

+
+
+

Optional verticalAlign

+
verticalAlign?: ResponsiveValue<VerticalAlign<Length>>
+

The CSS vertical-align property

+
+
+

Optional visibility

+
visibility?: ResponsiveValue<Visibility>
+

The CSS visibility property

+
+
+

Optional w

+
w?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional whiteSpace

+
whiteSpace?: ResponsiveValue<WhiteSpace>
+

The CSS white-space property

+
+
+

Optional width

+
width?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional willChange

+
willChange?: ResponsiveValue<WillChange>
+

The CSS will-change property

+
+
+

Optional wordBreak

+
wordBreak?: ResponsiveValue<WordBreak>
+

The CSS word-break property

+
+
+

Optional zIndex

+
zIndex?: ResponsiveValue<"base" | "overlay" | ZIndex | "hide" | "docked" | "dropdown" | "sticky" | "banner" | "modal" | "popover" | "skipLink" | "toast" | "tooltip">
+

The CSS z-index property

+
+
+
+
+

Settings

 +
+
+

Member Visibility

+
    +
    • +
    • +
    • +
    • +
    • +
+
+

Theme

+ +
+
+

Generated using TypeDoc

+
\ No newline at end of file diff --git a/docs/interfaces/NumberInputControlProps.html b/docs/interfaces/NumberInputControlProps.html new file mode 100644 index 0000000..8bab88f --- /dev/null +++ b/docs/interfaces/NumberInputControlProps.html @@ -0,0 +1,4524 @@ +NumberInputControlProps | react-hook-form-chakra
+
+ +
+
+
+
+ +

Interface NumberInputControlProps

+
+

The union of ChakraFormControlProps and BaseReactHookFormProps which defines the base properties +for most of react-hook-form-chakra components

+
+
+

Hierarchy

+
+
+
+
+ +
+
+

Properties

+
__css? +_active? +_activeLink? +_activeStep? +_after? +_autofill? +_before? +_checked? +_dark? +_disabled? +_empty? +_even? +_expanded? +_first? +_firstLetter? +_focus? +_focusVisible? +_focusWithin? +_fullScreen? +_grabbed? +_groupActive? +_groupChecked? +_groupDisabled? +_groupFocus? +_groupFocusVisible? +_groupFocusWithin? +_groupHover? +_groupInvalid? +_hidden? +_highlighted? +_hover? +_indeterminate? +_invalid? +_last? +_light? +_loading? +_ltr? +_mediaDark? +_mediaReduceMotion? +_notFirst? +_notLast? +_odd? +_peerActive? +_peerChecked? +_peerDisabled? +_peerFocus? +_peerFocusVisible? +_peerFocusWithin? +_peerHover? +_peerInvalid? +_peerPlaceholderShown? +_placeholder? +_placeholderShown? +_pressed? +_readOnly? +_rtl? +_selected? +_selection? +_valid? +_visited? +alignContent? +alignItems? +alignSelf? +animation? +appearance? +apply? +aria-activedescendant? +aria-atomic? +aria-autocomplete? +aria-busy? +aria-checked? +aria-colcount? +aria-colindex? +aria-colspan? +aria-controls? +aria-current? +aria-describedby? +aria-details? +aria-disabled? +aria-dropeffect? +aria-errormessage? +aria-expanded? +aria-flowto? +aria-grabbed? +aria-haspopup? +aria-hidden? +aria-invalid? +aria-keyshortcuts? +aria-label? +aria-labelledby? +aria-level? +aria-live? +aria-modal? +aria-multiline? +aria-multiselectable? +aria-orientation? +aria-owns? +aria-placeholder? +aria-posinset? +aria-pressed? +aria-readonly? +aria-relevant? +aria-required? +aria-roledescription? +aria-rowcount? +aria-rowindex? +aria-rowspan? +aria-selected? +aria-setsize? +aria-sort? +aria-valuemax? +aria-valuemin? +aria-valuenow? +aria-valuetext? +backdropBlur? +backdropBrightness? +backdropContrast? +backdropFilter? +backdropHueRotate? +backdropInvert? +backdropSaturate? +background? +backgroundAttachment? +backgroundBlendMode? +backgroundClip? +backgroundColor? +backgroundImage? +backgroundPosition? +backgroundRepeat? +backgroundSize? +bg? +bgAttachment? +bgBlendMode? +bgClip? +bgColor? +bgGradient? +bgImage? +bgImg? +bgPos? +bgPosition? +bgRepeat? +bgSize? +blendMode? +blur? +border? +borderBottom? +borderBottomColor? +borderBottomLeftRadius? +borderBottomRadius? +borderBottomRightRadius? +borderBottomStyle? +borderBottomWidth? +borderColor? +borderEndRadius? +borderInlineEndRadius? +borderInlineStartRadius? +borderLeft? +borderLeftColor? +borderLeftRadius? +borderLeftStyle? +borderLeftWidth? +borderRadius? +borderRight? +borderRightColor? +borderRightRadius? +borderRightStyle? +borderRightWidth? +borderStartRadius? +borderStyle? +borderTop? +borderTopColor? +borderTopLeftRadius? +borderTopRadius? +borderTopRightRadius? +borderTopStyle? +borderTopWidth? +borderWidth? +borderX? +borderY? +bottom? +boxDecorationBreak? +boxShadow? +boxSize? +boxSizing? +brightness? +children? +clipPath? +color? +columnGap? +contrast? +control? +css? +cursor? +display? +dropShadow? +errorMessageProps? +fill? +filter? +flex? +flexBasis? +flexDir? +flexDirection? +flexFlow? +flexGrow? +flexShrink? +flexWrap? +float? +fontFamily? +fontSize? +fontStyle? +fontWeight? +gap? +gridArea? +gridAutoColumns? +gridAutoFlow? +gridAutoRows? +gridColumn? +gridColumnEnd? +gridColumnGap? +gridColumnStart? +gridGap? +gridRow? +gridRowEnd? +gridRowGap? +gridRowStart? +gridTemplate? +gridTemplateAreas? +gridTemplateColumns? +gridTemplateRows? +h? +height? +helperText? +helperTextProps? +hideBelow? +hideFrom? +hueRotate? +inputMode? +inset? +insetEnd? +insetInlineEnd? +insetStart? +insetX? +insetY? +invert? +is? +isDisabled? +isInvalid? +isReadOnly? +isRequired? +isTruncated? +isolation? +justifyContent? +justifyItems? +justifySelf? +label? +labelProps? +layerStyle? +left? +leftAddon? +letterSpacing? +lineHeight? +listStyleImage? +listStyleImg? +listStylePos? +listStylePosition? +m? +margin? +marginBottom? +marginEnd? +marginInlineEnd? +marginInlineStart? +marginLeft? +marginRight? +marginStart? +marginTop? +marginX? +marginY? +maxH? +maxHeight? +maxW? +maxWidth? +mb? +me? +minH? +minHeight? +minW? +minWidth? +mixBlendMode? +ml? +mr? +ms? +mt? +mx? +my? +name +noOfLines? +numberInputProps? +objectFit? +objectPosition? +onKeyPress? +onKeyPressCapture? +opacity? +order? +outline? +outlineColor? +outlineOffset? +overflow? +overflowWrap? +overflowX? +overflowY? +overscroll? +overscrollBehavior? +overscrollBehaviorX? +overscrollBehaviorY? +overscrollX? +overscrollY? +p? +padding? +paddingBottom? +paddingEnd? +paddingInlineEnd? +paddingInlineStart? +paddingLeft? +paddingRight? +paddingStart? +paddingTop? +paddingX? +paddingY? +pb? +pe? +pl? +placeContent? +placeItems? +placeSelf? +pointerEvents? +pos? +position? +pr? +ps? +pt? +px? +py? +resize? +right? +rightAddon? +ring? +ringColor? +ringInset? +ringOffset? +ringOffsetColor? +rotate? +rounded? +roundedBottom? +roundedBottomLeft? +roundedBottomRight? +roundedEnd? +roundedLeft? +roundedRight? +roundedStart? +roundedTop? +roundedTopLeft? +roundedTopRight? +rowGap? +saturate? +scale? +scaleX? +scaleY? +shadow? +showStepper? +skewX? +skewY? +srOnly? +stroke? +sx? +textAlign? +textColor? +textDecor? +textDecoration? +textDecorationColor? +textDecorationLine? +textDecorationStyle? +textDecorationThickness? +textIndent? +textOverflow? +textShadow? +textStyle? +textTransform? +textUnderlineOffset? +top? +transform? +transformOrigin? +transition? +transitionDelay? +transitionDuration? +transitionProperty? +transitionTimingFunction? +translateX? +translateY? +userSelect? +verticalAlign? +visibility? +w? +whiteSpace? +width? +willChange? +wordBreak? +zIndex? +
+
+

Properties

+
+

Optional Private __css

+
__css?: SystemStyleObject
+

Used for internal css management

+
+
+

Optional _active

+
_active?: SystemStyleObject
+

Styles for CSS Selector &:active

+
+
+

Optional _activeLink

+
_activeLink?: SystemStyleObject
+

Used to style the active link in a navigation +Styles for CSS Selector &[aria-current=page]

+
+
+

Optional _activeStep

+
_activeStep?: SystemStyleObject
+

Used to style the current step within a process +Styles for CSS Selector &[aria-current=step]

+
+
+

Optional _after

+
_after?: SystemStyleObject
+

Styles for CSS selector &::after

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _after={{content:`""` }}/>
+
+
+
+

Optional _autofill

+
_autofill?: SystemStyleObject
+

Styles for CSS Selector &:-webkit-autofill

+
+
+

Optional _before

+
_before?: SystemStyleObject
+

Styles for CSS selector &::before

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _before={{content:`""` }}/>
+
+
+
+

Optional _checked

+
_checked?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is true

+
    +
  • CSS selector &[aria-checked=true]
    • +
+
+
+

Optional _dark

+
_dark?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _disabled

+
_disabled?: SystemStyleObject
+

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

+
    +
  • &[aria-disabled=true]
    • +
  • &:disabled
    • +
  • &[data-disabled]
    • +
  • &[disabled]
    • +
+
+
+

Optional _empty

+
_empty?: SystemStyleObject
+

Styles for CSS selector &:empty

+
+
+

Optional _even

+
_even?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(even)

+
+
+

Optional _expanded

+
_expanded?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-expanded is true

+
    +
  • CSS selector &[aria-expanded=true]
    • +
+
+
+

Optional _first

+
_first?: SystemStyleObject
+

Styles for CSS Selector &:first-of-type

+
+
+

Optional _firstLetter

+
_firstLetter?: SystemStyleObject
+

Styles for CSS selector &::first-letter

+

NOTE: This selector is only applied for block-level elements and not preceded by an image or table.

+ +

Example

<Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
+
+
+
+

Optional _focus

+
_focus?: SystemStyleObject
+

Styles for CSS selector &:focus

+
+
+

Optional _focusVisible

+
_focusVisible?: SystemStyleObject
+

Styles to apply when this element has received focus via tabbing

+
    +
  • CSS Selector &:focus-visible
    • +
+
+
+

Optional _focusWithin

+
_focusWithin?: SystemStyleObject
+

Styles to apply when a child of this element has received focus

+
    +
  • CSS Selector &:focus-within
    • +
+
+
+

Optional _fullScreen

+
_fullScreen?: SystemStyleObject
+

Styles for CSS Selector &:fullscreen.

+
+
+

Optional _grabbed

+
_grabbed?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-grabbed is true

+
    +
  • CSS selector &[aria-grabbed=true]
    • +
+
+
+

Optional _groupActive

+
_groupActive?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is active

+
+
+

Optional _groupChecked

+
_groupChecked?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is checked

+
+
+

Optional _groupDisabled

+
_groupDisabled?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is disabled

+
+
+

Optional _groupFocus

+
_groupFocus?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is focused

+
+
+

Optional _groupFocusVisible

+
_groupFocusVisible?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has visible focus

+
+
+

Optional _groupFocusWithin

+
_groupFocusWithin?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has focus within

+
+
+

Optional _groupHover

+
_groupHover?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is hovered

+
+
+

Optional _groupInvalid

+
_groupInvalid?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is invalid

+
+
+

Optional _hidden

+
_hidden?: SystemStyleObject
+

Styles for CSS Selector [hidden=true]

+
+
+

Optional _highlighted

+
_highlighted?: SystemStyleObject
+

Styles for the highlighted state.

+
+
+

Optional _hover

+
_hover?: SystemStyleObject
+

Styles for CSS selector &:hover

+
+
+

Optional _indeterminate

+
_indeterminate?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is mixed

+
    +
  • CSS selector &[aria-checked=mixed]
    • +
+
+
+

Optional _invalid

+
_invalid?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-invalid is true

+
    +
  • CSS selector &[aria-invalid=true]
    • +
+
+
+

Optional _last

+
_last?: SystemStyleObject
+

Styles for CSS Selector &:last-of-type

+
+
+

Optional _light

+
_light?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _loading

+
_loading?: SystemStyleObject
+

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. +Useful for styling loading states

+
+
+

Optional _ltr

+
_ltr?: SystemStyleObject
+

Styles for CSS Selector [dir=ltr] & +It is applied when a parent element or this element has dir="ltr"

+
+
+

Optional _mediaDark

+
_mediaDark?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-color-scheme: dark) +It is used when the user has requested the system use a light or dark color theme.

+
+
+

Optional _mediaReduceMotion

+
_mediaReduceMotion?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-reduced-motion: reduce) +It is used when the user has requested the system to reduce the amount of animations.

+
+
+

Optional _notFirst

+
_notFirst?: SystemStyleObject
+

Styles for CSS Selector &:not(:first-of-type)

+
+
+

Optional _notLast

+
_notLast?: SystemStyleObject
+

Styles for CSS Selector &:not(:last-of-type)

+
+
+

Optional _odd

+
_odd?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(odd)

+
+
+

Optional _peerActive

+
_peerActive?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is active

+
+
+

Optional _peerChecked

+
_peerChecked?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is checked

+
+
+

Optional _peerDisabled

+
_peerDisabled?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is disabled

+
+
+

Optional _peerFocus

+
_peerFocus?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is focused

+
+
+

Optional _peerFocusVisible

+
_peerFocusVisible?: SystemStyleObject
+

Styles to apply when a sibling element with .peeror data-peer has visible focus

+
+
+

Optional _peerFocusWithin

+
_peerFocusWithin?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has focus within

+
+
+

Optional _peerHover

+
_peerHover?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is hovered

+
+
+

Optional _peerInvalid

+
_peerInvalid?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is invalid

+
+
+

Optional _peerPlaceholderShown

+
_peerPlaceholderShown?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

+
+
+

Optional _placeholder

+
_placeholder?: SystemStyleObject
+

Styles for CSS Selector &::placeholder.

+
+
+

Optional _placeholderShown

+
_placeholderShown?: SystemStyleObject
+

Styles for CSS Selector &:placeholder-shown.

+
+
+

Optional _pressed

+
_pressed?: SystemStyleObject
+

Styles for CSS Selector &[aria-pressed=true] +Typically used to style the current "pressed" state of toggle buttons

+
+
+

Optional _readOnly

+
_readOnly?: SystemStyleObject
+

Styles for CSS Selector &:readonly

+
+
+

Optional _rtl

+
_rtl?: SystemStyleObject
+

Styles for CSS Selector [dir=rtl] & +It is applied when a parent element or this element has dir="rtl"

+
+
+

Optional _selected

+
_selected?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-selected is true

+
    +
  • CSS selector &[aria-selected=true]
    • +
+
+
+

Optional _selection

+
_selection?: SystemStyleObject
+

Styles for CSS Selector &::selection

+
+
+

Optional _valid

+
_valid?: SystemStyleObject
+

Styles for the valid state

+
    +
  • CSS selector &[data-valid], &[data-state=valid]
    • +
+
+
+

Optional _visited

+
_visited?: SystemStyleObject
+

Styles for CSS Selector &:visited

+
+
+

Optional alignContent

+
alignContent?: ResponsiveValue<AlignContent>
+

The CSS align-content property.

+

It defines the distribution of space between and around +content items along a flexbox cross-axis or a grid's block axis.

+ +

See

Mozilla Docs

+
+
+

Optional alignItems

+
alignItems?: ResponsiveValue<AlignItems>
+

The CSS align-items property.

+

It defines the align-self value on all direct children as a group.

+
    +
  • In Flexbox, it controls the alignment of items on the Cross Axis.
    • +
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
    • +
+ +

See

Mozilla Docs

+
+
+

Optional alignSelf

+
alignSelf?: ResponsiveValue<AlignSelf>
+

The CSS align-self property.

+

It works like align-items, but applies only to a +single flexbox item, instead of all of them.

+ +

See

Mozilla Docs

+
+
+

Optional animation

+
animation?: ResponsiveValue<Animation<string & {}>>
+

The CSS animation property

+
+
+

Optional appearance

+
appearance?: ResponsiveValue<Appearance>
+

The CSS appearance property

+
+
+

Optional apply

+
apply?: ResponsiveValue<string>
+

Apply theme-aware style objects in theme

+ +

Example

<Box apply="styles.h3">This is a div</Box>
+
+

This will apply styles defined in theme.styles.h3

+
+
+

Optional aria-activedescendant

+
aria-activedescendant?: string
+

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

+
+
+

Optional aria-atomic

+
aria-atomic?: Booleanish
+

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

+
+
+

Optional aria-autocomplete

+
aria-autocomplete?: "none" | "both" | "inline" | "list"
+

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be +presented if they are made.

+
+
+

Optional aria-busy

+
aria-busy?: Booleanish
+

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

+
+
+

Optional aria-checked

+
aria-checked?: boolean | "true" | "false" | "mixed"
+

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

+ +

See

    +
  • aria-pressed
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-colcount

+
aria-colcount?: number
+

Defines the total number of columns in a table, grid, or treegrid.

+ +

See

aria-colindex.

+
+
+

Optional aria-colindex

+
aria-colindex?: number
+

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

+ +

See

    +
  • aria-colcount
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-colspan

+
aria-colspan?: number
+

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-colindex
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-controls

+
aria-controls?: string
+

Identifies the element (or elements) whose contents or presence are controlled by the current element.

+ +

See

aria-owns.

+
+
+

Optional aria-current

+
aria-current?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"
+

Indicates the element that represents the current item within a container or set of related elements.

+
+
+

Optional aria-describedby

+
aria-describedby?: string
+

Identifies the element (or elements) that describes the object.

+ +

See

aria-labelledby

+
+
+

Optional aria-details

+
aria-details?: string
+

Identifies the element that provides a detailed, extended description for the object.

+ +

See

aria-describedby.

+
+
+

Optional aria-disabled

+
aria-disabled?: Booleanish
+

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

+ +

See

    +
  • aria-hidden
    • +
  • aria-readonly.
    • +
+
+
+

Optional aria-dropeffect

+
aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"
+

Indicates what functions can be performed when a dragged object is released on the drop target.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-errormessage

+
aria-errormessage?: string
+

Identifies the element that provides an error message for the object.

+ +

See

    +
  • aria-invalid
    • +
  • aria-describedby.
    • +
+
+
+

Optional aria-expanded

+
aria-expanded?: Booleanish
+

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

+
+
+

Optional aria-flowto

+
aria-flowto?: string
+

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, +allows assistive technology to override the general default of reading in document source order.

+
+
+

Optional aria-grabbed

+
aria-grabbed?: Booleanish
+

Indicates an element's "grabbed" state in a drag-and-drop operation.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-haspopup

+
aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "true" | "false" | "tree"
+

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

+
+
+

Optional aria-hidden

+
aria-hidden?: Booleanish
+

Indicates whether the element is exposed to an accessibility API.

+ +

See

aria-disabled.

+
+
+

Optional aria-invalid

+
aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"
+

Indicates the entered value does not conform to the format expected by the application.

+ +

See

aria-errormessage.

+
+
+

Optional aria-keyshortcuts

+
aria-keyshortcuts?: string
+

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

+
+
+

Optional aria-label

+
aria-label?: string
+

Defines a string value that labels the current element.

+ +

See

aria-labelledby.

+
+
+

Optional aria-labelledby

+
aria-labelledby?: string
+

Identifies the element (or elements) that labels the current element.

+ +

See

aria-describedby.

+
+
+

Optional aria-level

+
aria-level?: number
+

Defines the hierarchical level of an element within a structure.

+
+
+

Optional aria-live

+
aria-live?: "off" | "assertive" | "polite"
+

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

+
+
+

Optional aria-modal

+
aria-modal?: Booleanish
+

Indicates whether an element is modal when displayed.

+
+
+

Optional aria-multiline

+
aria-multiline?: Booleanish
+

Indicates whether a text box accepts multiple lines of input or only a single line.

+
+
+

Optional aria-multiselectable

+
aria-multiselectable?: Booleanish
+

Indicates that the user may select more than one item from the current selectable descendants.

+
+
+

Optional aria-orientation

+
aria-orientation?: "horizontal" | "vertical"
+

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

+
+
+

Optional aria-owns

+
aria-owns?: string
+

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship +between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

+ +

See

aria-controls.

+
+
+

Optional aria-placeholder

+
aria-placeholder?: string
+

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. +A hint could be a sample value or a brief description of the expected format.

+
+
+

Optional aria-posinset

+
aria-posinset?: number
+

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-setsize.

+
+
+

Optional aria-pressed

+
aria-pressed?: boolean | "true" | "false" | "mixed"
+

Indicates the current "pressed" state of toggle buttons.

+ +

See

    +
  • aria-checked
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-readonly

+
aria-readonly?: Booleanish
+

Indicates that the element is not editable, but is otherwise operable.

+ +

See

aria-disabled.

+
+
+

Optional aria-relevant

+
aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
+

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

+ +

See

aria-atomic.

+
+
+

Optional aria-required

+
aria-required?: Booleanish
+

Indicates that user input is required on the element before a form may be submitted.

+
+
+

Optional aria-roledescription

+
aria-roledescription?: string
+

Defines a human-readable, author-localized description for the role of an element.

+
+
+

Optional aria-rowcount

+
aria-rowcount?: number
+

Defines the total number of rows in a table, grid, or treegrid.

+ +

See

aria-rowindex.

+
+
+

Optional aria-rowindex

+
aria-rowindex?: number
+

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowcount
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-rowspan

+
aria-rowspan?: number
+

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowindex
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-selected

+
aria-selected?: Booleanish
+

Indicates the current "selected" state of various widgets.

+ +

See

    +
  • aria-checked
    • +
  • aria-pressed.
    • +
+
+
+

Optional aria-setsize

+
aria-setsize?: number
+

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-posinset.

+
+
+

Optional aria-sort

+
aria-sort?: "none" | "ascending" | "descending" | "other"
+

Indicates if items in a table or grid are sorted in ascending or descending order.

+
+
+

Optional aria-valuemax

+
aria-valuemax?: number
+

Defines the maximum allowed value for a range widget.

+
+
+

Optional aria-valuemin

+
aria-valuemin?: number
+

Defines the minimum allowed value for a range widget.

+
+
+

Optional aria-valuenow

+
aria-valuenow?: number
+

Defines the current value for a range widget.

+ +

See

aria-valuetext.

+
+
+

Optional aria-valuetext

+
aria-valuetext?: string
+

Defines the human readable text alternative of aria-valuenow for a range widget.

+
+
+

Optional backdropBlur

+
backdropBlur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the backdrop-blur filter value of an element. +Value is assigned to --chakra-backdrop-blur css variable

+
+
+

Optional backdropBrightness

+
backdropBrightness?: ResponsiveValue<Length>
+

Sets the backdrop-brightness filter value of an element. +Value is assigned to --chakra-backdrop-brightness css variable

+
+
+

Optional backdropContrast

+
backdropContrast?: ResponsiveValue<Length>
+

Sets the backdrop-contrast filter value of an element. +Value is assigned to --chakra-backdrop-contrast css variable

+
+
+

Optional backdropFilter

+
backdropFilter?: ResponsiveValue<"auto" | BackdropFilter>
+

The CSS backdrop-filter property. When set to auto, you allow +Chakra UI to define the color based on the backdrop filter style props +(backdropBlur, backdropSaturate, etc.)

+
+
+

Optional backdropHueRotate

+
backdropHueRotate?: ResponsiveValue<Length>
+

Sets the backdrop-hue-rotate filter value of an element. +Value is assigned to --chakra-backdrop-hue-rotate css variable

+
+
+

Optional backdropInvert

+
backdropInvert?: ResponsiveValue<Length>
+

Sets the backdrop-invert filter value of an element. +Value is assigned to --chakra-backdrop-invert css variable

+
+
+

Optional backdropSaturate

+
backdropSaturate?: ResponsiveValue<Length>
+

Sets the backdrop-saturate filter value of an element. +Value is assigned to --chakra-backdrop-saturate css variable

+
+
+

Optional background

+
background?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional backgroundAttachment

+
backgroundAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional backgroundBlendMode

+
backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional backgroundClip

+
backgroundClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional backgroundColor

+
backgroundColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional backgroundImage

+
backgroundImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional backgroundPosition

+
backgroundPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional backgroundRepeat

+
backgroundRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional backgroundSize

+
backgroundSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional bg

+
bg?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional bgAttachment

+
bgAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional bgBlendMode

+
bgBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional bgClip

+
bgClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional bgColor

+
bgColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional bgGradient

+
bgGradient?: ResponsiveValue<string | string & {}>
+

The background-gradient shorthand

+
+
+

Optional bgImage

+
bgImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgImg

+
bgImg?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgPos

+
bgPos?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgPosition

+
bgPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgRepeat

+
bgRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional bgSize

+
bgSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional blendMode

+
blendMode?: ResponsiveValue<MixBlendMode>
+

The blend-mode property

+
+
+

Optional blur

+
blur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the blur filter value of an element. +Value is assigned to --chakra-filter css variable

+
+
+

Optional border

+
border?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border property

+
+
+

Optional borderBottom

+
borderBottom?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-bottom property

+
+
+

Optional borderBottomColor

+
borderBottomColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderBottomColor>
+

The CSS border-bottom-color property

+
+
+

Optional borderBottomLeftRadius

+
borderBottomLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional borderBottomRadius

+
borderBottomRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional borderBottomRightRadius

+
borderBottomRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional borderBottomStyle

+
borderBottomStyle?: ResponsiveValue<BorderBottomStyle>
+

The CSS border-bottom-style property

+
+
+

Optional borderBottomWidth

+
borderBottomWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-bottom-width property

+
+
+

Optional borderColor

+
borderColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-color property

+
+
+

Optional borderEndRadius

+
borderEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineEndRadius

+
borderInlineEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderInlineEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineStartRadius

+
borderInlineStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderInlineStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderLeft

+
borderLeft?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-left property

+
+
+

Optional borderLeftColor

+
borderLeftColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderLeftColor>
+

The CSS border-left-color property

+
+
+

Optional borderLeftRadius

+
borderLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional borderLeftStyle

+
borderLeftStyle?: ResponsiveValue<BorderLeftStyle>
+

The CSS border-left-style property

+
+
+

Optional borderLeftWidth

+
borderLeftWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-left-width property

+
+
+

Optional borderRadius

+
borderRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional borderRight

+
borderRight?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right property

+
+
+

Optional borderRightColor

+
borderRightColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderRightColor>
+

The CSS border-right-color property

+
+
+

Optional borderRightRadius

+
borderRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional borderRightStyle

+
borderRightStyle?: ResponsiveValue<BorderRightStyle>
+

The CSS border-right-styles property

+
+
+

Optional borderRightWidth

+
borderRightWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-right-width property

+
+
+

Optional borderStartRadius

+
borderStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderStyle

+
borderStyle?: ResponsiveValue<BorderStyle>
+

The CSS border-style property

+
+
+

Optional borderTop

+
borderTop?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top property

+
+
+

Optional borderTopColor

+
borderTopColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-top-color property

+
+
+

Optional borderTopLeftRadius

+
borderTopLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional borderTopRadius

+
borderTopRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional borderTopRightRadius

+
borderTopRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional borderTopStyle

+
borderTopStyle?: ResponsiveValue<BorderTopStyle>
+

The CSS border-top-style property

+
+
+

Optional borderTopWidth

+
borderTopWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-top-width property

+
+
+

Optional borderWidth

+
borderWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-width property

+
+
+

Optional borderX

+
borderX?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right and border-left property

+
+
+

Optional borderY

+
borderY?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top and border-bottom property

+
+
+

Optional bottom

+
bottom?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS bottom property

+
+
+

Optional boxDecorationBreak

+
boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>
+

The CSS box-decoration property

+
+
+

Optional boxShadow

+
boxShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional boxSize

+
boxSize?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width and height property

+
+
+

Optional boxSizing

+
boxSizing?: BoxSizing
+

The CSS box-sizing property

+
+
+

Optional brightness

+
brightness?: ResponsiveValue<Length>
+

Sets the brightness filter value of an element. +Value is assigned to --chakra-brightness css variable

+
+
+

Optional children

+
children?: ReactNode
+

Optional children

+
+
+

Optional clipPath

+
clipPath?: ResponsiveValue<ClipPath>
+

The CSS clip-path property.

+

It creates a clipping region that sets what part of an element should be shown.

+
+
+

Optional color

+
color?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional columnGap

+
columnGap?: ResponsiveValue<ColumnGap<Length>>
+

The CSS column-gap property.

+

It sets the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional contrast

+
contrast?: ResponsiveValue<Length>
+

Sets the contrast filter value of an element. +Value is assigned to --chakra-contrast css variable

+
+
+

Optional control

+
control?: Control<any, any>
+

The control passed down from react-hook-form. +Only required if not using FormProvider

+
+
+

Optional css

+
css?: Interpolation<{}>
+

The emotion's css style object

+
+
+

Optional cursor

+
cursor?: ResponsiveValue<Cursor>
+

The CSS cursor property

+
+
+

Optional display

+
display?: ResponsiveValue<Display>
+

The CSS display property

+
+
+

Optional dropShadow

+
dropShadow?: ResponsiveValue<"base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

Sets the drop-shadow filter value of an element. +Value is assigned to --chakra-drop-shadow css variable

+
+
+

Optional errorMessageProps

+
errorMessageProps?: FormErrorMessageProps
+

Chakra FormErrorMessageProps for error message

+
+
+

Optional fill

+
fill?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS fill property for icon svgs and paths

+
+
+

Optional filter

+
filter?: ResponsiveValue<Filter | "auto">
+

The CSS filter property. When set to auto, you allow +Chakra UI to define the color based on the filter style props +(blur, saturate, etc.)

+
+
+

Optional flex

+
flex?: ResponsiveValue<Flex<Length>>
+

The CSS flex property.

+

It defines how a flex item will grow or shrink +to fit the space available in its flex container.

+ +

See

Mozilla Docs

+
+
+

Optional flexBasis

+
flexBasis?: ResponsiveValue<FlexBasis<Length>>
+

The CSS flex-basis property.

+

It defines the initial main size of a flex item.

+ +

See

Mozilla Docs

+
+
+

Optional flexDir

+
flexDir?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexDirection

+
flexDirection?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexFlow

+
flexFlow?: ResponsiveValue<FlexFlow>
+

The CSS flex-flow property.

+

It is a shorthand property for flex-direction and flex-wrap. +It specifies the direction of a flex container, as well as its wrapping behavior.

+ +

See

Mozilla Docs

+
+
+

Optional flexGrow

+
flexGrow?: ResponsiveValue<FlexGrow>
+

The CSS flex-grow property.

+

It defines how much a flexbox item should grow +if there's space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexShrink

+
flexShrink?: ResponsiveValue<FlexShrink>
+

The CSS flex-shrink property.

+

It defines how much a flexbox item should shrink +if there's not enough space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexWrap

+
flexWrap?: ResponsiveValue<FlexWrap>
+

The CSS flex-wrap property.

+

It defines whether flex items are forced onto one line or +can wrap onto multiple lines. If wrapping is allowed, +it sets the direction that lines are stacked.

+ +

See

Mozilla Docs

+
+
+

Optional float

+
float?: ResponsiveValue<Float>
+

The CSS float property

+
+
+

Optional fontFamily

+
fontFamily?: ResponsiveValue<"body" | FontFamily | "heading" | "mono">
+

The CSS font-family property

+
+
+

Optional fontSize

+
fontSize?: ResponsiveValue<number | "small" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl">
+

The CSS font-size property

+
+
+

Optional fontStyle

+
fontStyle?: ResponsiveValue<FontStyle>
+

The CSS font-style property

+
+
+

Optional fontWeight

+
fontWeight?: ResponsiveValue<number | "bold" | string & {} | "black" | "normal" | "hairline" | "thin" | "light" | "medium" | "semibold" | "extrabold">
+

The CSS font-weight property

+
+
+

Optional gap

+
gap?: ResponsiveValue<Gap<Length>>
+

The CSS gap property.

+

It defines the gap between items in both flex and +grid contexts.

+ +

See

Mozilla Docs

+
+
+

Optional gridArea

+
gridArea?: ResponsiveValue<GridArea>
+

The CSS grid-areas property.

+

It specifies a grid item’s size and location within a grid by +contributing a line, a span, or nothing (automatic) +to its grid placement, thereby specifying the edges of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoColumns

+
gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>
+

The CSS grid-auto-columns property.

+

It specifies the size of an implicitly-created grid column track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoFlow

+
gridAutoFlow?: ResponsiveValue<GridAutoFlow>
+

The CSS grid-auto-flow property

+

It controls how the auto-placement algorithm works, +specifying exactly how auto-placed items get flowed into the grid.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoRows

+
gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>
+

The CSS grid-auto-rows property.

+

It specifies the size of an implicitly-created grid row track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumn

+
gridColumn?: ResponsiveValue<GridColumn>
+

The CSS grid-column property.

+

It specifies a grid item's size and location within a grid column +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnEnd

+
gridColumnEnd?: ResponsiveValue<GridColumnEnd>
+

The CSS grid-column property

+

It specifies a grid item’s end position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the block-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnGap

+
gridColumnGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-column-gap property.

+

It defines the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnStart

+
gridColumnStart?: ResponsiveValue<GridColumnStart>
+

The CSS grid-column property.

+

It specifies a grid item’s start position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement

+ +

See

Mozilla Docs

+
+
+

Optional gridGap

+
gridGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-gap property.

+

It defines the gaps (gutters) between rows and columns

+ +

See

Mozilla Docs

+
+
+

Optional gridRow

+
gridRow?: ResponsiveValue<GridRow>
+

The CSS grid-row property

+

It specifies a grid item’s size and location within the grid row +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowEnd

+
gridRowEnd?: ResponsiveValue<GridRowEnd>
+

The CSS grid-row-end property

+

It specifies a grid item’s end position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowGap

+
gridRowGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-row-gap property.

+

It defines the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowStart

+
gridRowStart?: ResponsiveValue<GridRowStart>
+

The CSS grid-row-start property

+

It specifies a grid item’s start position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplate

+
gridTemplate?: ResponsiveValue<GridTemplate>
+

The CSS grid-template property.

+

It is a shorthand property for defining grid columns, rows, and areas.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateAreas

+
gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>
+

The CSS grid-template-areas property.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateColumns

+
gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>
+

The CSS grid-template-columns property

+

It defines the line names and track sizing functions of the grid columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateRows

+
gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>
+

The CSS grid-template-rows property.

+

It defines the line names and track sizing functions of the grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional h

+
h?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional height

+
height?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional helperText

+
helperText?: ReactNode
+

Helper text to show alongside input

+
+
+

Optional helperTextProps

+
helperTextProps?: TextProps
+

Chakra TextProps associated with the helper text

+
+
+

Optional hideBelow

+
hideBelow?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element below the specified breakpoint

+
+
+

Optional hideFrom

+
hideFrom?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element from the specified breakpoint and up

+
+
+

Optional hueRotate

+
hueRotate?: ResponsiveValue<Length>
+

Sets the hue-rotate filter value of an element. +Value is assigned to --chakra-hue-rotate css variable

+
+
+

Optional inputMode

+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
+

Hints at the type of data that might be entered by the user while editing the element or its contents

+ +

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

+
+
+

Optional inset

+
inset?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, right, top, bottom property

+
+
+

Optional insetEnd

+
insetEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetEnd is equivalent to right. +When the direction is rtl, insetEnd is equivalent to left.

+
+
+

Optional insetInlineEnd

+
insetInlineEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetInlineEnd is equivalent to right. +When the direction is rtl, insetInlineEnd is equivalent to left.

+
+
+

Optional insetStart

+
insetStart?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is start, end is equivalent to left. +When the direction is start, end is equivalent to right.

+
+
+

Optional insetX

+
insetX?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, and right property

+
+
+

Optional insetY

+
insetY?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top, and bottom property

+
+
+

Optional invert

+
invert?: ResponsiveValue<Length>
+

Sets the invert filter value of an element. +Value is assigned to --chakra-invert css variable

+
+
+

Optional is

+
is?: string
+

Specify that a standard HTML element should behave like a defined custom built-in element

+ +

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

+
+
+

Optional isDisabled

+
isDisabled?: boolean
+

If true, the form control will be disabled. This has 2 side effects:

+
    +
  • The FormLabel will have data-disabled attribute
    • +
  • The form element (e.g, Input) will be disabled
    • +
+ +

Default

false

+
+
+

Optional isInvalid

+
isInvalid?: boolean
+

If true, the form control will be invalid. This has 2 side effects:

+
    +
  • The FormLabel and FormErrorIcon will have data-invalid set to true
    • +
  • The form element (e.g, Input) will have aria-invalid set to true
    • +
+ +

Default

false

+
+
+

Optional isReadOnly

+
isReadOnly?: boolean
+

If true, the form control will be readonly

+ +

Default

false

+
+
+

Optional isRequired

+
isRequired?: boolean
+

If true, the form control will be required. This has 2 side effects:

+
    +
  • The FormLabel will show a required indicator
    • +
  • The form element (e.g, Input) will have aria-required set to true
    • +
+ +

Default

false

+
+
+

Optional isTruncated

+
isTruncated?: boolean
+

If true, it clamps truncate a text after one line.

+
+
+

Optional isolation

+
isolation?: ResponsiveValue<Isolation>
+

The CSS isolation property

+
+
+

Optional justifyContent

+
justifyContent?: ResponsiveValue<JustifyContent>
+

The CSS justify-content property.

+

It defines how the browser distributes space between and around content items +along the main-axis of a flex container, and the inline axis of a grid container.

+ +

See

Mozilla Docs

+
+
+

Optional justifyItems

+
justifyItems?: ResponsiveValue<JustifyItems>
+

The CSS justify-items property.

+

It defines the default justify-self for all items of the box, +giving them all a default way of justifying each box +along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional justifySelf

+
justifySelf?: ResponsiveValue<JustifySelf>
+

The CSS justify-self property.

+

It defines the way a box is justified inside its +alignment container along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional label

+
label?: ReactNode
+

The label to be associated with the input

+
+
+

Optional labelProps

+
labelProps?: FormLabelProps
+

Chakra FormLabelProps

+
+
+

Optional layerStyle

+
layerStyle?: ResponsiveValue<string & {}>
+

The layer style object to apply. +Note: Styles must be located in theme.layerStyles

+
+
+

Optional left

+
left?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left property

+
+
+

Optional leftAddon

+
leftAddon?: ReactNode
+

Optional content to be displayed as left addon. +https://chakra-ui.com/docs/components/input#left-and-right-addons

+
+
+

Optional letterSpacing

+
letterSpacing?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "tighter" | "tight" | "wide" | "wider" | "widest">
+

The CSS letter-spacing property

+
+
+

Optional lineHeight

+
lineHeight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "none" | "normal" | number & {} | "shorter" | "short" | "tall" | "taller">
+

The CSS line-height property

+
+
+

Optional listStyleImage

+
listStyleImage?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStyleImg

+
listStyleImg?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStylePos

+
listStylePos?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional listStylePosition

+
listStylePosition?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional m

+
m?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional margin

+
margin?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional marginBottom

+
marginBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional marginEnd

+
marginEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginEnd is equivalent to marginRight. +When direction is rtl, marginEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineEnd

+
marginInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineEnd is equivalent to marginRight. +When direction is rtl, marginInlineEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineStart

+
marginInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineStart is equivalent to marginLeft. +When direction is rtl, marginInlineStart is equivalent to marginRight.

+
+
+

Optional marginLeft

+
marginLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional marginRight

+
marginRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional marginStart

+
marginStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginStart is equivalent to marginLeft. +When direction is rtl, marginStart is equivalent to marginRight.

+
+
+

Optional marginTop

+
marginTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional marginX

+
marginX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional marginY

+
marginY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

Optional maxH

+
maxH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxHeight

+
maxHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxW

+
maxW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional maxWidth

+
maxWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional mb

+
mb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional me

+
me?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, me is equivalent to marginRight. +When direction is rtl, me is equivalent to marginLeft.

+
+
+

Optional minH

+
minH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minHeight

+
minHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minW

+
minW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional minWidth

+
minWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional mixBlendMode

+
mixBlendMode?: ResponsiveValue<MixBlendMode>
+

The mix-blend-mode property

+
+
+

Optional ml

+
ml?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional mr

+
mr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional ms

+
ms?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, ms is equivalent to marginLeft. +When direction is rtl, ms is equivalent to marginRight.

+
+
+

Optional mt

+
mt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional mx

+
mx?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional my

+
my?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

name

+
name: string
+

The name of the input (required)

+
+
+

Optional noOfLines

+
noOfLines?: ResponsiveValue<number>
+

Used to truncate text at a specific number of lines

+
+
+

Optional numberInputProps

+
numberInputProps?: NumberInputProps
+

Chakra's NumberInputProps

+
+
+

Optional objectFit

+
objectFit?: ResponsiveValue<ObjectFit>
+

The CSS object-fit property

+
+
+

Optional objectPosition

+
objectPosition?: ResponsiveValue<ObjectPosition<Length>>
+

The CSS object-position property

+
+
+

Optional onKeyPress

+
onKeyPress?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional onKeyPressCapture

+
onKeyPressCapture?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional opacity

+
opacity?: ResponsiveValue<Opacity>
+

The CSS opacity property

+
+
+

Optional order

+
order?: ResponsiveValue<Order>
+

The CSS order property.

+

It defines the order to lay out an item in a flex or grid container.

+ +

See

Mozilla Docs

+
+
+

Optional outline

+
outline?: ResponsiveValue<Outline<Length>>
+

The CSS outline property

+
+
+

Optional outlineColor

+
outlineColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS outline-color property

+
+
+

Optional outlineOffset

+
outlineOffset?: ResponsiveValue<OutlineOffset<Length>>
+

The CSS outline-offset property

+
+
+

Optional overflow

+
overflow?: ResponsiveValue<Overflow>
+

The CSS overflow property

+
+
+

Optional overflowWrap

+
overflowWrap?: ResponsiveValue<OverflowWrap>
+

The CSS overflow-wrap property

+
+
+

Optional overflowX

+
overflowX?: ResponsiveValue<OverflowX>
+

The CSS overflow-x property

+
+
+

Optional overflowY

+
overflowY?: ResponsiveValue<OverflowY>
+

The CSS overflow-y property

+
+
+

Optional overscroll

+
overscroll?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehavior

+
overscrollBehavior?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehaviorX

+
overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollBehaviorY

+
overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional overscrollX

+
overscrollX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollY

+
overscrollY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional p

+
p?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional padding

+
padding?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional paddingBottom

+
paddingBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional paddingEnd

+
paddingEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingEnd is equivalent to paddingRight. +When direction is rtl, paddingEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineEnd

+
paddingInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineEnd is equivalent to paddingRight. +When direction is rtl, paddingInlineEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineStart

+
paddingInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineStart is equivalent to paddingLeft. +When direction is rtl, paddingInlineStart is equivalent to paddingRight.

+
+
+

Optional paddingLeft

+
paddingLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional paddingRight

+
paddingRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional paddingStart

+
paddingStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingStart is equivalent to paddingLeft. +When direction is rtl, paddingStart is equivalent to paddingRight.

+
+
+

Optional paddingTop

+
paddingTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional paddingX

+
paddingX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional paddingY

+
paddingY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional pb

+
pb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional pe

+
pe?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, pe is equivalent to paddingRight. +When direction is rtl, pe is equivalent to paddingLeft.

+
+
+

Optional pl

+
pl?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional placeContent

+
placeContent?: ResponsiveValue<PlaceContent>
+

The CSS place-content property.

+

It allows you to align content along both the block and +inline directions at once (i.e. the align-content and justify-content properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional placeItems

+
placeItems?: ResponsiveValue<PlaceItems>
+

The CSS place-items property.

+

It allows you to align items along both the block and +inline directions at once (i.e. the align-items and justify-items properties) +in a relevant layout system such as Grid or Flex.

+ +

See

Mozilla Docs

+
+
+

Optional placeSelf

+
placeSelf?: ResponsiveValue<PlaceSelf>
+

The CSS place-self property.

+

It allows you to align an individual item in both the block and +inline directions at once (i.e. the align-self and justify-self properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional pointerEvents

+
pointerEvents?: ResponsiveValue<PointerEvents>
+

The CSS pointer-events property

+
+
+

Optional pos

+
pos?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional position

+
position?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional pr

+
pr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional ps

+
ps?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, ps is equivalent to paddingLeft. +When direction is rtl, ps is equivalent to paddingRight.

+
+
+

Optional pt

+
pt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional px

+
px?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional py

+
py?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional resize

+
resize?: ResponsiveValue<Resize>
+

The CSS resize property

+
+
+

Optional right

+
right?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS right property

+
+
+

Optional rightAddon

+
rightAddon?: ReactNode
+

Optional content to be displayed as right addon. +https://chakra-ui.com/docs/components/input#left-and-right-addons

+
+
+

Optional ring

+
ring?: ResponsiveValue<Length>
+

Creates outline rings with CSS box-shadow property

+
+
+

Optional ringColor

+
ringColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the outline ring

+
+
+

Optional ringInset

+
ringInset?: ResponsiveValue<"inset" | "none">
+

If the outline ring should an inset

+
+
+

Optional ringOffset

+
ringOffset?: ResponsiveValue<Length>
+

The thickness of the offset shadow when using outline rings

+
+
+

Optional ringOffsetColor

+
ringOffsetColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the offset shadow when adding outline rings

+
+
+

Optional rotate

+
rotate?: ResponsiveValue<Length>
+

Sets the rotation value of the element

+
+
+

Optional rounded

+
rounded?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional roundedBottom

+
roundedBottom?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional roundedBottomLeft

+
roundedBottomLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional roundedBottomRight

+
roundedBottomRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional roundedEnd

+
roundedEnd?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedLeft

+
roundedLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional roundedRight

+
roundedRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional roundedStart

+
roundedStart?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedTop

+
roundedTop?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional roundedTopLeft

+
roundedTopLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional roundedTopRight

+
roundedTopRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional rowGap

+
rowGap?: ResponsiveValue<RowGap<Length>>
+

The CSS row-gap property.

+

It sets the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional saturate

+
saturate?: ResponsiveValue<Length>
+

Sets the saturation filter value of an element. +Value is assigned to --chakra-saturate css variable

+
+
+

Optional scale

+
scale?: ResponsiveValue<Length>
+

Sets the scale value of the element

+
+
+

Optional scaleX

+
scaleX?: ResponsiveValue<Length>
+

Scale value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-x
    • +
+
+
+

Optional scaleY

+
scaleY?: ResponsiveValue<Length>
+

Scale value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-y
    • +
+
+
+

Optional shadow

+
shadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional showStepper

+
showStepper?: boolean
+

Whether or not the stopper should be shownF

+
+
+

Optional skewX

+
skewX?: ResponsiveValue<Length>
+

Skew value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-x
    • +
+
+
+

Optional skewY

+
skewY?: ResponsiveValue<Length>
+

Skew value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-y
    • +
+
+
+

Optional srOnly

+
srOnly?: true | "focusable"
+

If true, hide an element visually without hiding it from screen readers.

+

If focusable, the sr-only styles will be undone, making the element visible +to sighted users as well as screen readers.

+
+
+

Optional stroke

+
stroke?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS stroke property for icon svgs and paths

+
+
+

Optional sx

+
sx?: SystemStyleObject
+

Used to pass theme-aware style props. +NB: This is the public API for user-land

+
+
+

Optional textAlign

+
textAlign?: ResponsiveValue<TextAlign>
+

The CSS text-align property

+
+
+

Optional textColor

+
textColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional textDecor

+
textDecor?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecoration

+
textDecoration?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecorationColor

+
textDecorationColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | TextDecorationColor>
+

The CSS text-decoration-color property

+
+
+

Optional textDecorationLine

+
textDecorationLine?: ResponsiveValue<TextDecorationLine>
+

The CSS text-decoration-line property

+
+
+

Optional textDecorationStyle

+
textDecorationStyle?: ResponsiveValue<TextDecorationStyle>
+

The CSS text-decoration-style property

+
+
+

Optional textDecorationThickness

+
textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>
+

The CSS text-decoration-thickness property

+
+
+

Optional textIndent

+
textIndent?: ResponsiveValue<TextIndent<0 | string & {}>>
+

The CSS text-indent property

+
+
+

Optional textOverflow

+
textOverflow?: ResponsiveValue<TextOverflow>
+

The CSS text-overflow property

+
+
+

Optional textShadow

+
textShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "inner" | "dark-lg" | TextShadow>
+

The text-shadow property

+
+
+

Optional textStyle

+
textStyle?: ResponsiveValue<string & {}>
+

The text style object to apply. +Note: Styles must be located in theme.textStyles

+
+
+

Optional textTransform

+
textTransform?: ResponsiveValue<TextTransform>
+

The CSS text-transform property

+
+
+

Optional textUnderlineOffset

+
textUnderlineOffset?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto">
+

The CSS text-underline-offset property

+
+
+

Optional top

+
top?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top property

+
+
+

Optional transform

+
transform?: ResponsiveValue<"auto" | Transform | "auto-gpu">
+

The CSS transform property

+
+
+

Optional transformOrigin

+
transformOrigin?: ResponsiveValue<number | "center" | "px" | "top" | "right" | "bottom" | "left" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS transform-origin property

+
+
+

Optional transition

+
transition?: ResponsiveValue<Transition<string & {}>>
+

The CSS transition property

+
+
+

Optional transitionDelay

+
transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>
+

The CSS transition-delay property

+
+
+

Optional transitionDuration

+
transitionDuration?: ResponsiveValue<string>
+

The CSS transition-duration property

+
+
+

Optional transitionProperty

+
transitionProperty?: ResponsiveValue<TransitionProperty>
+

The CSS transition-property property

+
+
+

Optional transitionTimingFunction

+
transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>
+

The CSS transition-timing-function property

+
+
+

Optional translateX

+
translateX?: ResponsiveValue<Length>
+

Translate value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-x
    • +
+
+
+

Optional translateY

+
translateY?: ResponsiveValue<Length>
+

Translate value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-y
    • +
+
+
+

Optional userSelect

+
userSelect?: ResponsiveValue<UserSelect>
+

The CSS user-select property

+
+
+

Optional verticalAlign

+
verticalAlign?: ResponsiveValue<VerticalAlign<Length>>
+

The CSS vertical-align property

+
+
+

Optional visibility

+
visibility?: ResponsiveValue<Visibility>
+

The CSS visibility property

+
+
+

Optional w

+
w?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional whiteSpace

+
whiteSpace?: ResponsiveValue<WhiteSpace>
+

The CSS white-space property

+
+
+

Optional width

+
width?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional willChange

+
willChange?: ResponsiveValue<WillChange>
+

The CSS will-change property

+
+
+

Optional wordBreak

+
wordBreak?: ResponsiveValue<WordBreak>
+

The CSS word-break property

+
+
+

Optional zIndex

+
zIndex?: ResponsiveValue<"base" | "overlay" | ZIndex | "hide" | "docked" | "dropdown" | "sticky" | "banner" | "modal" | "popover" | "skipLink" | "toast" | "tooltip">
+

The CSS z-index property

+
+
+
+
+

Settings

 +
+
+

Member Visibility

+
    +
    • +
    • +
    • +
    • +
    • +
+
+

Theme

+ +
+
+

Generated using TypeDoc

+
\ No newline at end of file diff --git a/docs/interfaces/PinInputControlProps.html b/docs/interfaces/PinInputControlProps.html new file mode 100644 index 0000000..9c8085d --- /dev/null +++ b/docs/interfaces/PinInputControlProps.html @@ -0,0 +1,4503 @@ +PinInputControlProps | react-hook-form-chakra
+
+ +
+
+
+
+ +

Interface PinInputControlProps

+
+

The union of ChakraFormControlProps and BaseReactHookFormProps which defines the base properties +for most of react-hook-form-chakra components

+
+
+

Hierarchy

+
+
+
+
+ +
+
+

Properties

+
__css? +_active? +_activeLink? +_activeStep? +_after? +_autofill? +_before? +_checked? +_dark? +_disabled? +_empty? +_even? +_expanded? +_first? +_firstLetter? +_focus? +_focusVisible? +_focusWithin? +_fullScreen? +_grabbed? +_groupActive? +_groupChecked? +_groupDisabled? +_groupFocus? +_groupFocusVisible? +_groupFocusWithin? +_groupHover? +_groupInvalid? +_hidden? +_highlighted? +_hover? +_indeterminate? +_invalid? +_last? +_light? +_loading? +_ltr? +_mediaDark? +_mediaReduceMotion? +_notFirst? +_notLast? +_odd? +_peerActive? +_peerChecked? +_peerDisabled? +_peerFocus? +_peerFocusVisible? +_peerFocusWithin? +_peerHover? +_peerInvalid? +_peerPlaceholderShown? +_placeholder? +_placeholderShown? +_pressed? +_readOnly? +_rtl? +_selected? +_selection? +_valid? +_visited? +alignContent? +alignItems? +alignSelf? +animation? +appearance? +apply? +aria-activedescendant? +aria-atomic? +aria-autocomplete? +aria-busy? +aria-checked? +aria-colcount? +aria-colindex? +aria-colspan? +aria-controls? +aria-current? +aria-describedby? +aria-details? +aria-disabled? +aria-dropeffect? +aria-errormessage? +aria-expanded? +aria-flowto? +aria-grabbed? +aria-haspopup? +aria-hidden? +aria-invalid? +aria-keyshortcuts? +aria-label? +aria-labelledby? +aria-level? +aria-live? +aria-modal? +aria-multiline? +aria-multiselectable? +aria-orientation? +aria-owns? +aria-placeholder? +aria-posinset? +aria-pressed? +aria-readonly? +aria-relevant? +aria-required? +aria-roledescription? +aria-rowcount? +aria-rowindex? +aria-rowspan? +aria-selected? +aria-setsize? +aria-sort? +aria-valuemax? +aria-valuemin? +aria-valuenow? +aria-valuetext? +backdropBlur? +backdropBrightness? +backdropContrast? +backdropFilter? +backdropHueRotate? +backdropInvert? +backdropSaturate? +background? +backgroundAttachment? +backgroundBlendMode? +backgroundClip? +backgroundColor? +backgroundImage? +backgroundPosition? +backgroundRepeat? +backgroundSize? +bg? +bgAttachment? +bgBlendMode? +bgClip? +bgColor? +bgGradient? +bgImage? +bgImg? +bgPos? +bgPosition? +bgRepeat? +bgSize? +blendMode? +blur? +border? +borderBottom? +borderBottomColor? +borderBottomLeftRadius? +borderBottomRadius? +borderBottomRightRadius? +borderBottomStyle? +borderBottomWidth? +borderColor? +borderEndRadius? +borderInlineEndRadius? +borderInlineStartRadius? +borderLeft? +borderLeftColor? +borderLeftRadius? +borderLeftStyle? +borderLeftWidth? +borderRadius? +borderRight? +borderRightColor? +borderRightRadius? +borderRightStyle? +borderRightWidth? +borderStartRadius? +borderStyle? +borderTop? +borderTopColor? +borderTopLeftRadius? +borderTopRadius? +borderTopRightRadius? +borderTopStyle? +borderTopWidth? +borderWidth? +borderX? +borderY? +bottom? +boxDecorationBreak? +boxShadow? +boxSize? +boxSizing? +brightness? +clipPath? +color? +columnGap? +contrast? +control? +css? +cursor? +display? +dropShadow? +errorMessageProps? +fill? +filter? +flex? +flexBasis? +flexDir? +flexDirection? +flexFlow? +flexGrow? +flexShrink? +flexWrap? +float? +fontFamily? +fontSize? +fontStyle? +fontWeight? +gap? +gridArea? +gridAutoColumns? +gridAutoFlow? +gridAutoRows? +gridColumn? +gridColumnEnd? +gridColumnGap? +gridColumnStart? +gridGap? +gridRow? +gridRowEnd? +gridRowGap? +gridRowStart? +gridTemplate? +gridTemplateAreas? +gridTemplateColumns? +gridTemplateRows? +h? +height? +helperText? +helperTextProps? +hideBelow? +hideFrom? +hueRotate? +inputMode? +inset? +insetEnd? +insetInlineEnd? +insetStart? +insetX? +insetY? +invert? +is? +isDisabled? +isInvalid? +isReadOnly? +isRequired? +isTruncated? +isolation? +justifyContent? +justifyItems? +justifySelf? +label? +labelProps? +layerStyle? +left? +letterSpacing? +lineHeight? +listStyleImage? +listStyleImg? +listStylePos? +listStylePosition? +m? +margin? +marginBottom? +marginEnd? +marginInlineEnd? +marginInlineStart? +marginLeft? +marginRight? +marginStart? +marginTop? +marginX? +marginY? +maxH? +maxHeight? +maxW? +maxWidth? +mb? +me? +minH? +minHeight? +minW? +minWidth? +mixBlendMode? +ml? +mr? +ms? +mt? +mx? +my? +name +noOfLines? +objectFit? +objectPosition? +onKeyPress? +onKeyPressCapture? +opacity? +order? +outline? +outlineColor? +outlineOffset? +overflow? +overflowWrap? +overflowX? +overflowY? +overscroll? +overscrollBehavior? +overscrollBehaviorX? +overscrollBehaviorY? +overscrollX? +overscrollY? +p? +padding? +paddingBottom? +paddingEnd? +paddingInlineEnd? +paddingInlineStart? +paddingLeft? +paddingRight? +paddingStart? +paddingTop? +paddingX? +paddingY? +pb? +pe? +pinAmount +pinInputProps? +pl? +placeContent? +placeItems? +placeSelf? +pointerEvents? +pos? +position? +pr? +ps? +pt? +px? +py? +resize? +right? +ring? +ringColor? +ringInset? +ringOffset? +ringOffsetColor? +rotate? +rounded? +roundedBottom? +roundedBottomLeft? +roundedBottomRight? +roundedEnd? +roundedLeft? +roundedRight? +roundedStart? +roundedTop? +roundedTopLeft? +roundedTopRight? +rowGap? +saturate? +scale? +scaleX? +scaleY? +shadow? +skewX? +skewY? +srOnly? +stackProps? +stroke? +sx? +textAlign? +textColor? +textDecor? +textDecoration? +textDecorationColor? +textDecorationLine? +textDecorationStyle? +textDecorationThickness? +textIndent? +textOverflow? +textShadow? +textStyle? +textTransform? +textUnderlineOffset? +top? +transform? +transformOrigin? +transition? +transitionDelay? +transitionDuration? +transitionProperty? +transitionTimingFunction? +translateX? +translateY? +userSelect? +verticalAlign? +visibility? +w? +whiteSpace? +width? +willChange? +wordBreak? +zIndex? +
+
+

Properties

+
+

Optional Private __css

+
__css?: SystemStyleObject
+

Used for internal css management

+
+
+

Optional _active

+
_active?: SystemStyleObject
+

Styles for CSS Selector &:active

+
+
+

Optional _activeLink

+
_activeLink?: SystemStyleObject
+

Used to style the active link in a navigation +Styles for CSS Selector &[aria-current=page]

+
+
+

Optional _activeStep

+
_activeStep?: SystemStyleObject
+

Used to style the current step within a process +Styles for CSS Selector &[aria-current=step]

+
+
+

Optional _after

+
_after?: SystemStyleObject
+

Styles for CSS selector &::after

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _after={{content:`""` }}/>
+
+
+
+

Optional _autofill

+
_autofill?: SystemStyleObject
+

Styles for CSS Selector &:-webkit-autofill

+
+
+

Optional _before

+
_before?: SystemStyleObject
+

Styles for CSS selector &::before

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _before={{content:`""` }}/>
+
+
+
+

Optional _checked

+
_checked?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is true

+
    +
  • CSS selector &[aria-checked=true]
    • +
+
+
+

Optional _dark

+
_dark?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _disabled

+
_disabled?: SystemStyleObject
+

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

+
    +
  • &[aria-disabled=true]
    • +
  • &:disabled
    • +
  • &[data-disabled]
    • +
  • &[disabled]
    • +
+
+
+

Optional _empty

+
_empty?: SystemStyleObject
+

Styles for CSS selector &:empty

+
+
+

Optional _even

+
_even?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(even)

+
+
+

Optional _expanded

+
_expanded?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-expanded is true

+
    +
  • CSS selector &[aria-expanded=true]
    • +
+
+
+

Optional _first

+
_first?: SystemStyleObject
+

Styles for CSS Selector &:first-of-type

+
+
+

Optional _firstLetter

+
_firstLetter?: SystemStyleObject
+

Styles for CSS selector &::first-letter

+

NOTE: This selector is only applied for block-level elements and not preceded by an image or table.

+ +

Example

<Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
+
+
+
+

Optional _focus

+
_focus?: SystemStyleObject
+

Styles for CSS selector &:focus

+
+
+

Optional _focusVisible

+
_focusVisible?: SystemStyleObject
+

Styles to apply when this element has received focus via tabbing

+
    +
  • CSS Selector &:focus-visible
    • +
+
+
+

Optional _focusWithin

+
_focusWithin?: SystemStyleObject
+

Styles to apply when a child of this element has received focus

+
    +
  • CSS Selector &:focus-within
    • +
+
+
+

Optional _fullScreen

+
_fullScreen?: SystemStyleObject
+

Styles for CSS Selector &:fullscreen.

+
+
+

Optional _grabbed

+
_grabbed?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-grabbed is true

+
    +
  • CSS selector &[aria-grabbed=true]
    • +
+
+
+

Optional _groupActive

+
_groupActive?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is active

+
+
+

Optional _groupChecked

+
_groupChecked?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is checked

+
+
+

Optional _groupDisabled

+
_groupDisabled?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is disabled

+
+
+

Optional _groupFocus

+
_groupFocus?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is focused

+
+
+

Optional _groupFocusVisible

+
_groupFocusVisible?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has visible focus

+
+
+

Optional _groupFocusWithin

+
_groupFocusWithin?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has focus within

+
+
+

Optional _groupHover

+
_groupHover?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is hovered

+
+
+

Optional _groupInvalid

+
_groupInvalid?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is invalid

+
+
+

Optional _hidden

+
_hidden?: SystemStyleObject
+

Styles for CSS Selector [hidden=true]

+
+
+

Optional _highlighted

+
_highlighted?: SystemStyleObject
+

Styles for the highlighted state.

+
+
+

Optional _hover

+
_hover?: SystemStyleObject
+

Styles for CSS selector &:hover

+
+
+

Optional _indeterminate

+
_indeterminate?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is mixed

+
    +
  • CSS selector &[aria-checked=mixed]
    • +
+
+
+

Optional _invalid

+
_invalid?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-invalid is true

+
    +
  • CSS selector &[aria-invalid=true]
    • +
+
+
+

Optional _last

+
_last?: SystemStyleObject
+

Styles for CSS Selector &:last-of-type

+
+
+

Optional _light

+
_light?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _loading

+
_loading?: SystemStyleObject
+

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. +Useful for styling loading states

+
+
+

Optional _ltr

+
_ltr?: SystemStyleObject
+

Styles for CSS Selector [dir=ltr] & +It is applied when a parent element or this element has dir="ltr"

+
+
+

Optional _mediaDark

+
_mediaDark?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-color-scheme: dark) +It is used when the user has requested the system use a light or dark color theme.

+
+
+

Optional _mediaReduceMotion

+
_mediaReduceMotion?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-reduced-motion: reduce) +It is used when the user has requested the system to reduce the amount of animations.

+
+
+

Optional _notFirst

+
_notFirst?: SystemStyleObject
+

Styles for CSS Selector &:not(:first-of-type)

+
+
+

Optional _notLast

+
_notLast?: SystemStyleObject
+

Styles for CSS Selector &:not(:last-of-type)

+
+
+

Optional _odd

+
_odd?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(odd)

+
+
+

Optional _peerActive

+
_peerActive?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is active

+
+
+

Optional _peerChecked

+
_peerChecked?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is checked

+
+
+

Optional _peerDisabled

+
_peerDisabled?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is disabled

+
+
+

Optional _peerFocus

+
_peerFocus?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is focused

+
+
+

Optional _peerFocusVisible

+
_peerFocusVisible?: SystemStyleObject
+

Styles to apply when a sibling element with .peeror data-peer has visible focus

+
+
+

Optional _peerFocusWithin

+
_peerFocusWithin?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has focus within

+
+
+

Optional _peerHover

+
_peerHover?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is hovered

+
+
+

Optional _peerInvalid

+
_peerInvalid?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is invalid

+
+
+

Optional _peerPlaceholderShown

+
_peerPlaceholderShown?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

+
+
+

Optional _placeholder

+
_placeholder?: SystemStyleObject
+

Styles for CSS Selector &::placeholder.

+
+
+

Optional _placeholderShown

+
_placeholderShown?: SystemStyleObject
+

Styles for CSS Selector &:placeholder-shown.

+
+
+

Optional _pressed

+
_pressed?: SystemStyleObject
+

Styles for CSS Selector &[aria-pressed=true] +Typically used to style the current "pressed" state of toggle buttons

+
+
+

Optional _readOnly

+
_readOnly?: SystemStyleObject
+

Styles for CSS Selector &:readonly

+
+
+

Optional _rtl

+
_rtl?: SystemStyleObject
+

Styles for CSS Selector [dir=rtl] & +It is applied when a parent element or this element has dir="rtl"

+
+
+

Optional _selected

+
_selected?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-selected is true

+
    +
  • CSS selector &[aria-selected=true]
    • +
+
+
+

Optional _selection

+
_selection?: SystemStyleObject
+

Styles for CSS Selector &::selection

+
+
+

Optional _valid

+
_valid?: SystemStyleObject
+

Styles for the valid state

+
    +
  • CSS selector &[data-valid], &[data-state=valid]
    • +
+
+
+

Optional _visited

+
_visited?: SystemStyleObject
+

Styles for CSS Selector &:visited

+
+
+

Optional alignContent

+
alignContent?: ResponsiveValue<AlignContent>
+

The CSS align-content property.

+

It defines the distribution of space between and around +content items along a flexbox cross-axis or a grid's block axis.

+ +

See

Mozilla Docs

+
+
+

Optional alignItems

+
alignItems?: ResponsiveValue<AlignItems>
+

The CSS align-items property.

+

It defines the align-self value on all direct children as a group.

+
    +
  • In Flexbox, it controls the alignment of items on the Cross Axis.
    • +
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
    • +
+ +

See

Mozilla Docs

+
+
+

Optional alignSelf

+
alignSelf?: ResponsiveValue<AlignSelf>
+

The CSS align-self property.

+

It works like align-items, but applies only to a +single flexbox item, instead of all of them.

+ +

See

Mozilla Docs

+
+
+

Optional animation

+
animation?: ResponsiveValue<Animation<string & {}>>
+

The CSS animation property

+
+
+

Optional appearance

+
appearance?: ResponsiveValue<Appearance>
+

The CSS appearance property

+
+
+

Optional apply

+
apply?: ResponsiveValue<string>
+

Apply theme-aware style objects in theme

+ +

Example

<Box apply="styles.h3">This is a div</Box>
+
+

This will apply styles defined in theme.styles.h3

+
+
+

Optional aria-activedescendant

+
aria-activedescendant?: string
+

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

+
+
+

Optional aria-atomic

+
aria-atomic?: Booleanish
+

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

+
+
+

Optional aria-autocomplete

+
aria-autocomplete?: "none" | "both" | "inline" | "list"
+

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be +presented if they are made.

+
+
+

Optional aria-busy

+
aria-busy?: Booleanish
+

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

+
+
+

Optional aria-checked

+
aria-checked?: boolean | "true" | "false" | "mixed"
+

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

+ +

See

    +
  • aria-pressed
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-colcount

+
aria-colcount?: number
+

Defines the total number of columns in a table, grid, or treegrid.

+ +

See

aria-colindex.

+
+
+

Optional aria-colindex

+
aria-colindex?: number
+

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

+ +

See

    +
  • aria-colcount
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-colspan

+
aria-colspan?: number
+

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-colindex
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-controls

+
aria-controls?: string
+

Identifies the element (or elements) whose contents or presence are controlled by the current element.

+ +

See

aria-owns.

+
+
+

Optional aria-current

+
aria-current?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"
+

Indicates the element that represents the current item within a container or set of related elements.

+
+
+

Optional aria-describedby

+
aria-describedby?: string
+

Identifies the element (or elements) that describes the object.

+ +

See

aria-labelledby

+
+
+

Optional aria-details

+
aria-details?: string
+

Identifies the element that provides a detailed, extended description for the object.

+ +

See

aria-describedby.

+
+
+

Optional aria-disabled

+
aria-disabled?: Booleanish
+

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

+ +

See

    +
  • aria-hidden
    • +
  • aria-readonly.
    • +
+
+
+

Optional aria-dropeffect

+
aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"
+

Indicates what functions can be performed when a dragged object is released on the drop target.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-errormessage

+
aria-errormessage?: string
+

Identifies the element that provides an error message for the object.

+ +

See

    +
  • aria-invalid
    • +
  • aria-describedby.
    • +
+
+
+

Optional aria-expanded

+
aria-expanded?: Booleanish
+

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

+
+
+

Optional aria-flowto

+
aria-flowto?: string
+

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, +allows assistive technology to override the general default of reading in document source order.

+
+
+

Optional aria-grabbed

+
aria-grabbed?: Booleanish
+

Indicates an element's "grabbed" state in a drag-and-drop operation.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-haspopup

+
aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "true" | "false" | "tree"
+

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

+
+
+

Optional aria-hidden

+
aria-hidden?: Booleanish
+

Indicates whether the element is exposed to an accessibility API.

+ +

See

aria-disabled.

+
+
+

Optional aria-invalid

+
aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"
+

Indicates the entered value does not conform to the format expected by the application.

+ +

See

aria-errormessage.

+
+
+

Optional aria-keyshortcuts

+
aria-keyshortcuts?: string
+

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

+
+
+

Optional aria-label

+
aria-label?: string
+

Defines a string value that labels the current element.

+ +

See

aria-labelledby.

+
+
+

Optional aria-labelledby

+
aria-labelledby?: string
+

Identifies the element (or elements) that labels the current element.

+ +

See

aria-describedby.

+
+
+

Optional aria-level

+
aria-level?: number
+

Defines the hierarchical level of an element within a structure.

+
+
+

Optional aria-live

+
aria-live?: "off" | "assertive" | "polite"
+

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

+
+
+

Optional aria-modal

+
aria-modal?: Booleanish
+

Indicates whether an element is modal when displayed.

+
+
+

Optional aria-multiline

+
aria-multiline?: Booleanish
+

Indicates whether a text box accepts multiple lines of input or only a single line.

+
+
+

Optional aria-multiselectable

+
aria-multiselectable?: Booleanish
+

Indicates that the user may select more than one item from the current selectable descendants.

+
+
+

Optional aria-orientation

+
aria-orientation?: "horizontal" | "vertical"
+

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

+
+
+

Optional aria-owns

+
aria-owns?: string
+

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship +between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

+ +

See

aria-controls.

+
+
+

Optional aria-placeholder

+
aria-placeholder?: string
+

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. +A hint could be a sample value or a brief description of the expected format.

+
+
+

Optional aria-posinset

+
aria-posinset?: number
+

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-setsize.

+
+
+

Optional aria-pressed

+
aria-pressed?: boolean | "true" | "false" | "mixed"
+

Indicates the current "pressed" state of toggle buttons.

+ +

See

    +
  • aria-checked
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-readonly

+
aria-readonly?: Booleanish
+

Indicates that the element is not editable, but is otherwise operable.

+ +

See

aria-disabled.

+
+
+

Optional aria-relevant

+
aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
+

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

+ +

See

aria-atomic.

+
+
+

Optional aria-required

+
aria-required?: Booleanish
+

Indicates that user input is required on the element before a form may be submitted.

+
+
+

Optional aria-roledescription

+
aria-roledescription?: string
+

Defines a human-readable, author-localized description for the role of an element.

+
+
+

Optional aria-rowcount

+
aria-rowcount?: number
+

Defines the total number of rows in a table, grid, or treegrid.

+ +

See

aria-rowindex.

+
+
+

Optional aria-rowindex

+
aria-rowindex?: number
+

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowcount
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-rowspan

+
aria-rowspan?: number
+

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowindex
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-selected

+
aria-selected?: Booleanish
+

Indicates the current "selected" state of various widgets.

+ +

See

    +
  • aria-checked
    • +
  • aria-pressed.
    • +
+
+
+

Optional aria-setsize

+
aria-setsize?: number
+

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-posinset.

+
+
+

Optional aria-sort

+
aria-sort?: "none" | "ascending" | "descending" | "other"
+

Indicates if items in a table or grid are sorted in ascending or descending order.

+
+
+

Optional aria-valuemax

+
aria-valuemax?: number
+

Defines the maximum allowed value for a range widget.

+
+
+

Optional aria-valuemin

+
aria-valuemin?: number
+

Defines the minimum allowed value for a range widget.

+
+
+

Optional aria-valuenow

+
aria-valuenow?: number
+

Defines the current value for a range widget.

+ +

See

aria-valuetext.

+
+
+

Optional aria-valuetext

+
aria-valuetext?: string
+

Defines the human readable text alternative of aria-valuenow for a range widget.

+
+
+

Optional backdropBlur

+
backdropBlur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the backdrop-blur filter value of an element. +Value is assigned to --chakra-backdrop-blur css variable

+
+
+

Optional backdropBrightness

+
backdropBrightness?: ResponsiveValue<Length>
+

Sets the backdrop-brightness filter value of an element. +Value is assigned to --chakra-backdrop-brightness css variable

+
+
+

Optional backdropContrast

+
backdropContrast?: ResponsiveValue<Length>
+

Sets the backdrop-contrast filter value of an element. +Value is assigned to --chakra-backdrop-contrast css variable

+
+
+

Optional backdropFilter

+
backdropFilter?: ResponsiveValue<"auto" | BackdropFilter>
+

The CSS backdrop-filter property. When set to auto, you allow +Chakra UI to define the color based on the backdrop filter style props +(backdropBlur, backdropSaturate, etc.)

+
+
+

Optional backdropHueRotate

+
backdropHueRotate?: ResponsiveValue<Length>
+

Sets the backdrop-hue-rotate filter value of an element. +Value is assigned to --chakra-backdrop-hue-rotate css variable

+
+
+

Optional backdropInvert

+
backdropInvert?: ResponsiveValue<Length>
+

Sets the backdrop-invert filter value of an element. +Value is assigned to --chakra-backdrop-invert css variable

+
+
+

Optional backdropSaturate

+
backdropSaturate?: ResponsiveValue<Length>
+

Sets the backdrop-saturate filter value of an element. +Value is assigned to --chakra-backdrop-saturate css variable

+
+
+

Optional background

+
background?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional backgroundAttachment

+
backgroundAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional backgroundBlendMode

+
backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional backgroundClip

+
backgroundClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional backgroundColor

+
backgroundColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional backgroundImage

+
backgroundImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional backgroundPosition

+
backgroundPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional backgroundRepeat

+
backgroundRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional backgroundSize

+
backgroundSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional bg

+
bg?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional bgAttachment

+
bgAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional bgBlendMode

+
bgBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional bgClip

+
bgClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional bgColor

+
bgColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional bgGradient

+
bgGradient?: ResponsiveValue<string | string & {}>
+

The background-gradient shorthand

+
+
+

Optional bgImage

+
bgImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgImg

+
bgImg?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgPos

+
bgPos?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgPosition

+
bgPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgRepeat

+
bgRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional bgSize

+
bgSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional blendMode

+
blendMode?: ResponsiveValue<MixBlendMode>
+

The blend-mode property

+
+
+

Optional blur

+
blur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the blur filter value of an element. +Value is assigned to --chakra-filter css variable

+
+
+

Optional border

+
border?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border property

+
+
+

Optional borderBottom

+
borderBottom?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-bottom property

+
+
+

Optional borderBottomColor

+
borderBottomColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderBottomColor>
+

The CSS border-bottom-color property

+
+
+

Optional borderBottomLeftRadius

+
borderBottomLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional borderBottomRadius

+
borderBottomRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional borderBottomRightRadius

+
borderBottomRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional borderBottomStyle

+
borderBottomStyle?: ResponsiveValue<BorderBottomStyle>
+

The CSS border-bottom-style property

+
+
+

Optional borderBottomWidth

+
borderBottomWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-bottom-width property

+
+
+

Optional borderColor

+
borderColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-color property

+
+
+

Optional borderEndRadius

+
borderEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineEndRadius

+
borderInlineEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderInlineEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineStartRadius

+
borderInlineStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderInlineStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderLeft

+
borderLeft?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-left property

+
+
+

Optional borderLeftColor

+
borderLeftColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderLeftColor>
+

The CSS border-left-color property

+
+
+

Optional borderLeftRadius

+
borderLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional borderLeftStyle

+
borderLeftStyle?: ResponsiveValue<BorderLeftStyle>
+

The CSS border-left-style property

+
+
+

Optional borderLeftWidth

+
borderLeftWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-left-width property

+
+
+

Optional borderRadius

+
borderRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional borderRight

+
borderRight?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right property

+
+
+

Optional borderRightColor

+
borderRightColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderRightColor>
+

The CSS border-right-color property

+
+
+

Optional borderRightRadius

+
borderRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional borderRightStyle

+
borderRightStyle?: ResponsiveValue<BorderRightStyle>
+

The CSS border-right-styles property

+
+
+

Optional borderRightWidth

+
borderRightWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-right-width property

+
+
+

Optional borderStartRadius

+
borderStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderStyle

+
borderStyle?: ResponsiveValue<BorderStyle>
+

The CSS border-style property

+
+
+

Optional borderTop

+
borderTop?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top property

+
+
+

Optional borderTopColor

+
borderTopColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-top-color property

+
+
+

Optional borderTopLeftRadius

+
borderTopLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional borderTopRadius

+
borderTopRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional borderTopRightRadius

+
borderTopRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional borderTopStyle

+
borderTopStyle?: ResponsiveValue<BorderTopStyle>
+

The CSS border-top-style property

+
+
+

Optional borderTopWidth

+
borderTopWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-top-width property

+
+
+

Optional borderWidth

+
borderWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-width property

+
+
+

Optional borderX

+
borderX?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right and border-left property

+
+
+

Optional borderY

+
borderY?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top and border-bottom property

+
+
+

Optional bottom

+
bottom?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS bottom property

+
+
+

Optional boxDecorationBreak

+
boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>
+

The CSS box-decoration property

+
+
+

Optional boxShadow

+
boxShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional boxSize

+
boxSize?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width and height property

+
+
+

Optional boxSizing

+
boxSizing?: BoxSizing
+

The CSS box-sizing property

+
+
+

Optional brightness

+
brightness?: ResponsiveValue<Length>
+

Sets the brightness filter value of an element. +Value is assigned to --chakra-brightness css variable

+
+
+

Optional clipPath

+
clipPath?: ResponsiveValue<ClipPath>
+

The CSS clip-path property.

+

It creates a clipping region that sets what part of an element should be shown.

+
+
+

Optional color

+
color?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional columnGap

+
columnGap?: ResponsiveValue<ColumnGap<Length>>
+

The CSS column-gap property.

+

It sets the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional contrast

+
contrast?: ResponsiveValue<Length>
+

Sets the contrast filter value of an element. +Value is assigned to --chakra-contrast css variable

+
+
+

Optional control

+
control?: Control<any, any>
+

The control passed down from react-hook-form. +Only required if not using FormProvider

+
+
+

Optional css

+
css?: Interpolation<{}>
+

The emotion's css style object

+
+
+

Optional cursor

+
cursor?: ResponsiveValue<Cursor>
+

The CSS cursor property

+
+
+

Optional display

+
display?: ResponsiveValue<Display>
+

The CSS display property

+
+
+

Optional dropShadow

+
dropShadow?: ResponsiveValue<"base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

Sets the drop-shadow filter value of an element. +Value is assigned to --chakra-drop-shadow css variable

+
+
+

Optional errorMessageProps

+
errorMessageProps?: FormErrorMessageProps
+

Chakra FormErrorMessageProps for error message

+
+
+

Optional fill

+
fill?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS fill property for icon svgs and paths

+
+
+

Optional filter

+
filter?: ResponsiveValue<Filter | "auto">
+

The CSS filter property. When set to auto, you allow +Chakra UI to define the color based on the filter style props +(blur, saturate, etc.)

+
+
+

Optional flex

+
flex?: ResponsiveValue<Flex<Length>>
+

The CSS flex property.

+

It defines how a flex item will grow or shrink +to fit the space available in its flex container.

+ +

See

Mozilla Docs

+
+
+

Optional flexBasis

+
flexBasis?: ResponsiveValue<FlexBasis<Length>>
+

The CSS flex-basis property.

+

It defines the initial main size of a flex item.

+ +

See

Mozilla Docs

+
+
+

Optional flexDir

+
flexDir?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexDirection

+
flexDirection?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexFlow

+
flexFlow?: ResponsiveValue<FlexFlow>
+

The CSS flex-flow property.

+

It is a shorthand property for flex-direction and flex-wrap. +It specifies the direction of a flex container, as well as its wrapping behavior.

+ +

See

Mozilla Docs

+
+
+

Optional flexGrow

+
flexGrow?: ResponsiveValue<FlexGrow>
+

The CSS flex-grow property.

+

It defines how much a flexbox item should grow +if there's space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexShrink

+
flexShrink?: ResponsiveValue<FlexShrink>
+

The CSS flex-shrink property.

+

It defines how much a flexbox item should shrink +if there's not enough space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexWrap

+
flexWrap?: ResponsiveValue<FlexWrap>
+

The CSS flex-wrap property.

+

It defines whether flex items are forced onto one line or +can wrap onto multiple lines. If wrapping is allowed, +it sets the direction that lines are stacked.

+ +

See

Mozilla Docs

+
+
+

Optional float

+
float?: ResponsiveValue<Float>
+

The CSS float property

+
+
+

Optional fontFamily

+
fontFamily?: ResponsiveValue<"body" | FontFamily | "heading" | "mono">
+

The CSS font-family property

+
+
+

Optional fontSize

+
fontSize?: ResponsiveValue<number | "small" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl">
+

The CSS font-size property

+
+
+

Optional fontStyle

+
fontStyle?: ResponsiveValue<FontStyle>
+

The CSS font-style property

+
+
+

Optional fontWeight

+
fontWeight?: ResponsiveValue<number | "bold" | string & {} | "black" | "normal" | "hairline" | "thin" | "light" | "medium" | "semibold" | "extrabold">
+

The CSS font-weight property

+
+
+

Optional gap

+
gap?: ResponsiveValue<Gap<Length>>
+

The CSS gap property.

+

It defines the gap between items in both flex and +grid contexts.

+ +

See

Mozilla Docs

+
+
+

Optional gridArea

+
gridArea?: ResponsiveValue<GridArea>
+

The CSS grid-areas property.

+

It specifies a grid item’s size and location within a grid by +contributing a line, a span, or nothing (automatic) +to its grid placement, thereby specifying the edges of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoColumns

+
gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>
+

The CSS grid-auto-columns property.

+

It specifies the size of an implicitly-created grid column track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoFlow

+
gridAutoFlow?: ResponsiveValue<GridAutoFlow>
+

The CSS grid-auto-flow property

+

It controls how the auto-placement algorithm works, +specifying exactly how auto-placed items get flowed into the grid.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoRows

+
gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>
+

The CSS grid-auto-rows property.

+

It specifies the size of an implicitly-created grid row track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumn

+
gridColumn?: ResponsiveValue<GridColumn>
+

The CSS grid-column property.

+

It specifies a grid item's size and location within a grid column +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnEnd

+
gridColumnEnd?: ResponsiveValue<GridColumnEnd>
+

The CSS grid-column property

+

It specifies a grid item’s end position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the block-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnGap

+
gridColumnGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-column-gap property.

+

It defines the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnStart

+
gridColumnStart?: ResponsiveValue<GridColumnStart>
+

The CSS grid-column property.

+

It specifies a grid item’s start position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement

+ +

See

Mozilla Docs

+
+
+

Optional gridGap

+
gridGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-gap property.

+

It defines the gaps (gutters) between rows and columns

+ +

See

Mozilla Docs

+
+
+

Optional gridRow

+
gridRow?: ResponsiveValue<GridRow>
+

The CSS grid-row property

+

It specifies a grid item’s size and location within the grid row +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowEnd

+
gridRowEnd?: ResponsiveValue<GridRowEnd>
+

The CSS grid-row-end property

+

It specifies a grid item’s end position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowGap

+
gridRowGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-row-gap property.

+

It defines the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowStart

+
gridRowStart?: ResponsiveValue<GridRowStart>
+

The CSS grid-row-start property

+

It specifies a grid item’s start position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplate

+
gridTemplate?: ResponsiveValue<GridTemplate>
+

The CSS grid-template property.

+

It is a shorthand property for defining grid columns, rows, and areas.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateAreas

+
gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>
+

The CSS grid-template-areas property.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateColumns

+
gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>
+

The CSS grid-template-columns property

+

It defines the line names and track sizing functions of the grid columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateRows

+
gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>
+

The CSS grid-template-rows property.

+

It defines the line names and track sizing functions of the grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional h

+
h?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional height

+
height?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional helperText

+
helperText?: ReactNode
+

Helper text to show alongside input

+
+
+

Optional helperTextProps

+
helperTextProps?: TextProps
+

Chakra TextProps associated with the helper text

+
+
+

Optional hideBelow

+
hideBelow?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element below the specified breakpoint

+
+
+

Optional hideFrom

+
hideFrom?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element from the specified breakpoint and up

+
+
+

Optional hueRotate

+
hueRotate?: ResponsiveValue<Length>
+

Sets the hue-rotate filter value of an element. +Value is assigned to --chakra-hue-rotate css variable

+
+
+

Optional inputMode

+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
+

Hints at the type of data that might be entered by the user while editing the element or its contents

+ +

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

+
+
+

Optional inset

+
inset?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, right, top, bottom property

+
+
+

Optional insetEnd

+
insetEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetEnd is equivalent to right. +When the direction is rtl, insetEnd is equivalent to left.

+
+
+

Optional insetInlineEnd

+
insetInlineEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetInlineEnd is equivalent to right. +When the direction is rtl, insetInlineEnd is equivalent to left.

+
+
+

Optional insetStart

+
insetStart?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is start, end is equivalent to left. +When the direction is start, end is equivalent to right.

+
+
+

Optional insetX

+
insetX?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, and right property

+
+
+

Optional insetY

+
insetY?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top, and bottom property

+
+
+

Optional invert

+
invert?: ResponsiveValue<Length>
+

Sets the invert filter value of an element. +Value is assigned to --chakra-invert css variable

+
+
+

Optional is

+
is?: string
+

Specify that a standard HTML element should behave like a defined custom built-in element

+ +

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

+
+
+

Optional isDisabled

+
isDisabled?: boolean
+

If true, the form control will be disabled. This has 2 side effects:

+
    +
  • The FormLabel will have data-disabled attribute
    • +
  • The form element (e.g, Input) will be disabled
    • +
+ +

Default

false

+
+
+

Optional isInvalid

+
isInvalid?: boolean
+

If true, the form control will be invalid. This has 2 side effects:

+
    +
  • The FormLabel and FormErrorIcon will have data-invalid set to true
    • +
  • The form element (e.g, Input) will have aria-invalid set to true
    • +
+ +

Default

false

+
+
+

Optional isReadOnly

+
isReadOnly?: boolean
+

If true, the form control will be readonly

+ +

Default

false

+
+
+

Optional isRequired

+
isRequired?: boolean
+

If true, the form control will be required. This has 2 side effects:

+
    +
  • The FormLabel will show a required indicator
    • +
  • The form element (e.g, Input) will have aria-required set to true
    • +
+ +

Default

false

+
+
+

Optional isTruncated

+
isTruncated?: boolean
+

If true, it clamps truncate a text after one line.

+
+
+

Optional isolation

+
isolation?: ResponsiveValue<Isolation>
+

The CSS isolation property

+
+
+

Optional justifyContent

+
justifyContent?: ResponsiveValue<JustifyContent>
+

The CSS justify-content property.

+

It defines how the browser distributes space between and around content items +along the main-axis of a flex container, and the inline axis of a grid container.

+ +

See

Mozilla Docs

+
+
+

Optional justifyItems

+
justifyItems?: ResponsiveValue<JustifyItems>
+

The CSS justify-items property.

+

It defines the default justify-self for all items of the box, +giving them all a default way of justifying each box +along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional justifySelf

+
justifySelf?: ResponsiveValue<JustifySelf>
+

The CSS justify-self property.

+

It defines the way a box is justified inside its +alignment container along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional label

+
label?: ReactNode
+

The label to be associated with the input

+
+
+

Optional labelProps

+
labelProps?: FormLabelProps
+

Chakra FormLabelProps

+
+
+

Optional layerStyle

+
layerStyle?: ResponsiveValue<string & {}>
+

The layer style object to apply. +Note: Styles must be located in theme.layerStyles

+
+
+

Optional left

+
left?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left property

+
+
+

Optional letterSpacing

+
letterSpacing?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "tighter" | "tight" | "wide" | "wider" | "widest">
+

The CSS letter-spacing property

+
+
+

Optional lineHeight

+
lineHeight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "none" | "normal" | number & {} | "shorter" | "short" | "tall" | "taller">
+

The CSS line-height property

+
+
+

Optional listStyleImage

+
listStyleImage?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStyleImg

+
listStyleImg?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStylePos

+
listStylePos?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional listStylePosition

+
listStylePosition?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional m

+
m?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional margin

+
margin?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional marginBottom

+
marginBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional marginEnd

+
marginEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginEnd is equivalent to marginRight. +When direction is rtl, marginEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineEnd

+
marginInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineEnd is equivalent to marginRight. +When direction is rtl, marginInlineEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineStart

+
marginInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineStart is equivalent to marginLeft. +When direction is rtl, marginInlineStart is equivalent to marginRight.

+
+
+

Optional marginLeft

+
marginLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional marginRight

+
marginRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional marginStart

+
marginStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginStart is equivalent to marginLeft. +When direction is rtl, marginStart is equivalent to marginRight.

+
+
+

Optional marginTop

+
marginTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional marginX

+
marginX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional marginY

+
marginY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

Optional maxH

+
maxH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxHeight

+
maxHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxW

+
maxW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional maxWidth

+
maxWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional mb

+
mb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional me

+
me?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, me is equivalent to marginRight. +When direction is rtl, me is equivalent to marginLeft.

+
+
+

Optional minH

+
minH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minHeight

+
minHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minW

+
minW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional minWidth

+
minWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional mixBlendMode

+
mixBlendMode?: ResponsiveValue<MixBlendMode>
+

The mix-blend-mode property

+
+
+

Optional ml

+
ml?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional mr

+
mr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional ms

+
ms?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, ms is equivalent to marginLeft. +When direction is rtl, ms is equivalent to marginRight.

+
+
+

Optional mt

+
mt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional mx

+
mx?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional my

+
my?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

name

+
name: string
+

The name of the input (required)

+
+
+

Optional noOfLines

+
noOfLines?: ResponsiveValue<number>
+

Used to truncate text at a specific number of lines

+
+
+

Optional objectFit

+
objectFit?: ResponsiveValue<ObjectFit>
+

The CSS object-fit property

+
+
+

Optional objectPosition

+
objectPosition?: ResponsiveValue<ObjectPosition<Length>>
+

The CSS object-position property

+
+
+

Optional onKeyPress

+
onKeyPress?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional onKeyPressCapture

+
onKeyPressCapture?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional opacity

+
opacity?: ResponsiveValue<Opacity>
+

The CSS opacity property

+
+
+

Optional order

+
order?: ResponsiveValue<Order>
+

The CSS order property.

+

It defines the order to lay out an item in a flex or grid container.

+ +

See

Mozilla Docs

+
+
+

Optional outline

+
outline?: ResponsiveValue<Outline<Length>>
+

The CSS outline property

+
+
+

Optional outlineColor

+
outlineColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS outline-color property

+
+
+

Optional outlineOffset

+
outlineOffset?: ResponsiveValue<OutlineOffset<Length>>
+

The CSS outline-offset property

+
+
+

Optional overflow

+
overflow?: ResponsiveValue<Overflow>
+

The CSS overflow property

+
+
+

Optional overflowWrap

+
overflowWrap?: ResponsiveValue<OverflowWrap>
+

The CSS overflow-wrap property

+
+
+

Optional overflowX

+
overflowX?: ResponsiveValue<OverflowX>
+

The CSS overflow-x property

+
+
+

Optional overflowY

+
overflowY?: ResponsiveValue<OverflowY>
+

The CSS overflow-y property

+
+
+

Optional overscroll

+
overscroll?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehavior

+
overscrollBehavior?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehaviorX

+
overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollBehaviorY

+
overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional overscrollX

+
overscrollX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollY

+
overscrollY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional p

+
p?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional padding

+
padding?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional paddingBottom

+
paddingBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional paddingEnd

+
paddingEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingEnd is equivalent to paddingRight. +When direction is rtl, paddingEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineEnd

+
paddingInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineEnd is equivalent to paddingRight. +When direction is rtl, paddingInlineEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineStart

+
paddingInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineStart is equivalent to paddingLeft. +When direction is rtl, paddingInlineStart is equivalent to paddingRight.

+
+
+

Optional paddingLeft

+
paddingLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional paddingRight

+
paddingRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional paddingStart

+
paddingStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingStart is equivalent to paddingLeft. +When direction is rtl, paddingStart is equivalent to paddingRight.

+
+
+

Optional paddingTop

+
paddingTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional paddingX

+
paddingX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional paddingY

+
paddingY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional pb

+
pb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional pe

+
pe?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, pe is equivalent to paddingRight. +When direction is rtl, pe is equivalent to paddingLeft.

+
+
+

pinAmount

+
pinAmount: number
+

The number of PinInputField's to render

+
+
+

Optional pinInputProps

+
pinInputProps?: Omit<PinInputProps, "children">
+

Chakra's PinInputProps (omits children as that is handled for you based on pinAmount)

+
+
+

Optional pl

+
pl?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional placeContent

+
placeContent?: ResponsiveValue<PlaceContent>
+

The CSS place-content property.

+

It allows you to align content along both the block and +inline directions at once (i.e. the align-content and justify-content properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional placeItems

+
placeItems?: ResponsiveValue<PlaceItems>
+

The CSS place-items property.

+

It allows you to align items along both the block and +inline directions at once (i.e. the align-items and justify-items properties) +in a relevant layout system such as Grid or Flex.

+ +

See

Mozilla Docs

+
+
+

Optional placeSelf

+
placeSelf?: ResponsiveValue<PlaceSelf>
+

The CSS place-self property.

+

It allows you to align an individual item in both the block and +inline directions at once (i.e. the align-self and justify-self properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional pointerEvents

+
pointerEvents?: ResponsiveValue<PointerEvents>
+

The CSS pointer-events property

+
+
+

Optional pos

+
pos?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional position

+
position?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional pr

+
pr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional ps

+
ps?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, ps is equivalent to paddingLeft. +When direction is rtl, ps is equivalent to paddingRight.

+
+
+

Optional pt

+
pt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional px

+
px?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional py

+
py?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional resize

+
resize?: ResponsiveValue<Resize>
+

The CSS resize property

+
+
+

Optional right

+
right?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS right property

+
+
+

Optional ring

+
ring?: ResponsiveValue<Length>
+

Creates outline rings with CSS box-shadow property

+
+
+

Optional ringColor

+
ringColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the outline ring

+
+
+

Optional ringInset

+
ringInset?: ResponsiveValue<"inset" | "none">
+

If the outline ring should an inset

+
+
+

Optional ringOffset

+
ringOffset?: ResponsiveValue<Length>
+

The thickness of the offset shadow when using outline rings

+
+
+

Optional ringOffsetColor

+
ringOffsetColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the offset shadow when adding outline rings

+
+
+

Optional rotate

+
rotate?: ResponsiveValue<Length>
+

Sets the rotation value of the element

+
+
+

Optional rounded

+
rounded?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional roundedBottom

+
roundedBottom?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional roundedBottomLeft

+
roundedBottomLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional roundedBottomRight

+
roundedBottomRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional roundedEnd

+
roundedEnd?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedLeft

+
roundedLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional roundedRight

+
roundedRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional roundedStart

+
roundedStart?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedTop

+
roundedTop?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional roundedTopLeft

+
roundedTopLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional roundedTopRight

+
roundedTopRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional rowGap

+
rowGap?: ResponsiveValue<RowGap<Length>>
+

The CSS row-gap property.

+

It sets the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional saturate

+
saturate?: ResponsiveValue<Length>
+

Sets the saturation filter value of an element. +Value is assigned to --chakra-saturate css variable

+
+
+

Optional scale

+
scale?: ResponsiveValue<Length>
+

Sets the scale value of the element

+
+
+

Optional scaleX

+
scaleX?: ResponsiveValue<Length>
+

Scale value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-x
    • +
+
+
+

Optional scaleY

+
scaleY?: ResponsiveValue<Length>
+

Scale value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-y
    • +
+
+
+

Optional shadow

+
shadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional skewX

+
skewX?: ResponsiveValue<Length>
+

Skew value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-x
    • +
+
+
+

Optional skewY

+
skewY?: ResponsiveValue<Length>
+

Skew value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-y
    • +
+
+
+

Optional srOnly

+
srOnly?: true | "focusable"
+

If true, hide an element visually without hiding it from screen readers.

+

If focusable, the sr-only styles will be undone, making the element visible +to sighted users as well as screen readers.

+
+
+

Optional stackProps

+
stackProps?: StackProps
+

Chakra's StackProps

+
+
+

Optional stroke

+
stroke?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS stroke property for icon svgs and paths

+
+
+

Optional sx

+
sx?: SystemStyleObject
+

Used to pass theme-aware style props. +NB: This is the public API for user-land

+
+
+

Optional textAlign

+
textAlign?: ResponsiveValue<TextAlign>
+

The CSS text-align property

+
+
+

Optional textColor

+
textColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional textDecor

+
textDecor?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecoration

+
textDecoration?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecorationColor

+
textDecorationColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | TextDecorationColor>
+

The CSS text-decoration-color property

+
+
+

Optional textDecorationLine

+
textDecorationLine?: ResponsiveValue<TextDecorationLine>
+

The CSS text-decoration-line property

+
+
+

Optional textDecorationStyle

+
textDecorationStyle?: ResponsiveValue<TextDecorationStyle>
+

The CSS text-decoration-style property

+
+
+

Optional textDecorationThickness

+
textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>
+

The CSS text-decoration-thickness property

+
+
+

Optional textIndent

+
textIndent?: ResponsiveValue<TextIndent<0 | string & {}>>
+

The CSS text-indent property

+
+
+

Optional textOverflow

+
textOverflow?: ResponsiveValue<TextOverflow>
+

The CSS text-overflow property

+
+
+

Optional textShadow

+
textShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "inner" | "dark-lg" | TextShadow>
+

The text-shadow property

+
+
+

Optional textStyle

+
textStyle?: ResponsiveValue<string & {}>
+

The text style object to apply. +Note: Styles must be located in theme.textStyles

+
+
+

Optional textTransform

+
textTransform?: ResponsiveValue<TextTransform>
+

The CSS text-transform property

+
+
+

Optional textUnderlineOffset

+
textUnderlineOffset?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto">
+

The CSS text-underline-offset property

+
+
+

Optional top

+
top?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top property

+
+
+

Optional transform

+
transform?: ResponsiveValue<"auto" | Transform | "auto-gpu">
+

The CSS transform property

+
+
+

Optional transformOrigin

+
transformOrigin?: ResponsiveValue<number | "center" | "px" | "top" | "right" | "bottom" | "left" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS transform-origin property

+
+
+

Optional transition

+
transition?: ResponsiveValue<Transition<string & {}>>
+

The CSS transition property

+
+
+

Optional transitionDelay

+
transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>
+

The CSS transition-delay property

+
+
+

Optional transitionDuration

+
transitionDuration?: ResponsiveValue<string>
+

The CSS transition-duration property

+
+
+

Optional transitionProperty

+
transitionProperty?: ResponsiveValue<TransitionProperty>
+

The CSS transition-property property

+
+
+

Optional transitionTimingFunction

+
transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>
+

The CSS transition-timing-function property

+
+
+

Optional translateX

+
translateX?: ResponsiveValue<Length>
+

Translate value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-x
    • +
+
+
+

Optional translateY

+
translateY?: ResponsiveValue<Length>
+

Translate value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-y
    • +
+
+
+

Optional userSelect

+
userSelect?: ResponsiveValue<UserSelect>
+

The CSS user-select property

+
+
+

Optional verticalAlign

+
verticalAlign?: ResponsiveValue<VerticalAlign<Length>>
+

The CSS vertical-align property

+
+
+

Optional visibility

+
visibility?: ResponsiveValue<Visibility>
+

The CSS visibility property

+
+
+

Optional w

+
w?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional whiteSpace

+
whiteSpace?: ResponsiveValue<WhiteSpace>
+

The CSS white-space property

+
+
+

Optional width

+
width?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional willChange

+
willChange?: ResponsiveValue<WillChange>
+

The CSS will-change property

+
+
+

Optional wordBreak

+
wordBreak?: ResponsiveValue<WordBreak>
+

The CSS word-break property

+
+
+

Optional zIndex

+
zIndex?: ResponsiveValue<"base" | "overlay" | ZIndex | "hide" | "docked" | "dropdown" | "sticky" | "banner" | "modal" | "popover" | "skipLink" | "toast" | "tooltip">
+

The CSS z-index property

+
+
+
+
+

Settings

 +
+
+

Member Visibility

+
    +
    • +
    • +
    • +
    • +
    • +
+
+

Theme

+ +
+
+

Generated using TypeDoc

+
\ No newline at end of file diff --git a/docs/interfaces/RadioGroupControlProps.html b/docs/interfaces/RadioGroupControlProps.html new file mode 100644 index 0000000..375092f --- /dev/null +++ b/docs/interfaces/RadioGroupControlProps.html @@ -0,0 +1,4504 @@ +RadioGroupControlProps | react-hook-form-chakra
+
+ +
+
+
+
+ +

Interface RadioGroupControlProps

+
+

The union of ChakraFormControlProps and BaseReactHookFormProps which defines the base properties +for most of react-hook-form-chakra components

+
+
+

Hierarchy

+
+
+
+
+ +
+
+

Properties

+
__css? +_active? +_activeLink? +_activeStep? +_after? +_autofill? +_before? +_checked? +_dark? +_disabled? +_empty? +_even? +_expanded? +_first? +_firstLetter? +_focus? +_focusVisible? +_focusWithin? +_fullScreen? +_grabbed? +_groupActive? +_groupChecked? +_groupDisabled? +_groupFocus? +_groupFocusVisible? +_groupFocusWithin? +_groupHover? +_groupInvalid? +_hidden? +_highlighted? +_hover? +_indeterminate? +_invalid? +_last? +_light? +_loading? +_ltr? +_mediaDark? +_mediaReduceMotion? +_notFirst? +_notLast? +_odd? +_peerActive? +_peerChecked? +_peerDisabled? +_peerFocus? +_peerFocusVisible? +_peerFocusWithin? +_peerHover? +_peerInvalid? +_peerPlaceholderShown? +_placeholder? +_placeholderShown? +_pressed? +_readOnly? +_rtl? +_selected? +_selection? +_valid? +_visited? +alignContent? +alignItems? +alignSelf? +animation? +appearance? +apply? +aria-activedescendant? +aria-atomic? +aria-autocomplete? +aria-busy? +aria-checked? +aria-colcount? +aria-colindex? +aria-colspan? +aria-controls? +aria-current? +aria-describedby? +aria-details? +aria-disabled? +aria-dropeffect? +aria-errormessage? +aria-expanded? +aria-flowto? +aria-grabbed? +aria-haspopup? +aria-hidden? +aria-invalid? +aria-keyshortcuts? +aria-label? +aria-labelledby? +aria-level? +aria-live? +aria-modal? +aria-multiline? +aria-multiselectable? +aria-orientation? +aria-owns? +aria-placeholder? +aria-posinset? +aria-pressed? +aria-readonly? +aria-relevant? +aria-required? +aria-roledescription? +aria-rowcount? +aria-rowindex? +aria-rowspan? +aria-selected? +aria-setsize? +aria-sort? +aria-valuemax? +aria-valuemin? +aria-valuenow? +aria-valuetext? +backdropBlur? +backdropBrightness? +backdropContrast? +backdropFilter? +backdropHueRotate? +backdropInvert? +backdropSaturate? +background? +backgroundAttachment? +backgroundBlendMode? +backgroundClip? +backgroundColor? +backgroundImage? +backgroundPosition? +backgroundRepeat? +backgroundSize? +bg? +bgAttachment? +bgBlendMode? +bgClip? +bgColor? +bgGradient? +bgImage? +bgImg? +bgPos? +bgPosition? +bgRepeat? +bgSize? +blendMode? +blur? +border? +borderBottom? +borderBottomColor? +borderBottomLeftRadius? +borderBottomRadius? +borderBottomRightRadius? +borderBottomStyle? +borderBottomWidth? +borderColor? +borderEndRadius? +borderInlineEndRadius? +borderInlineStartRadius? +borderLeft? +borderLeftColor? +borderLeftRadius? +borderLeftStyle? +borderLeftWidth? +borderRadius? +borderRight? +borderRightColor? +borderRightRadius? +borderRightStyle? +borderRightWidth? +borderStartRadius? +borderStyle? +borderTop? +borderTopColor? +borderTopLeftRadius? +borderTopRadius? +borderTopRightRadius? +borderTopStyle? +borderTopWidth? +borderWidth? +borderX? +borderY? +bottom? +boxDecorationBreak? +boxShadow? +boxSize? +boxSizing? +brightness? +children +clipPath? +color? +columnGap? +contrast? +control? +css? +cursor? +display? +dropShadow? +errorMessageProps? +fill? +filter? +flex? +flexBasis? +flexDir? +flexDirection? +flexFlow? +flexGrow? +flexShrink? +flexWrap? +float? +fontFamily? +fontSize? +fontStyle? +fontWeight? +gap? +gridArea? +gridAutoColumns? +gridAutoFlow? +gridAutoRows? +gridColumn? +gridColumnEnd? +gridColumnGap? +gridColumnStart? +gridGap? +gridRow? +gridRowEnd? +gridRowGap? +gridRowStart? +gridTemplate? +gridTemplateAreas? +gridTemplateColumns? +gridTemplateRows? +h? +height? +helperText? +helperTextProps? +hideBelow? +hideFrom? +hueRotate? +inputMode? +inset? +insetEnd? +insetInlineEnd? +insetStart? +insetX? +insetY? +invert? +is? +isDisabled? +isInvalid? +isReadOnly? +isRequired? +isTruncated? +isolation? +justifyContent? +justifyItems? +justifySelf? +label? +labelProps? +layerStyle? +left? +letterSpacing? +lineHeight? +listStyleImage? +listStyleImg? +listStylePos? +listStylePosition? +m? +margin? +marginBottom? +marginEnd? +marginInlineEnd? +marginInlineStart? +marginLeft? +marginRight? +marginStart? +marginTop? +marginX? +marginY? +maxH? +maxHeight? +maxW? +maxWidth? +mb? +me? +minH? +minHeight? +minW? +minWidth? +mixBlendMode? +ml? +mr? +ms? +mt? +mx? +my? +name +noOfLines? +objectFit? +objectPosition? +onKeyPress? +onKeyPressCapture? +opacity? +order? +outline? +outlineColor? +outlineOffset? +overflow? +overflowWrap? +overflowX? +overflowY? +overscroll? +overscrollBehavior? +overscrollBehaviorX? +overscrollBehaviorY? +overscrollX? +overscrollY? +p? +padding? +paddingBottom? +paddingEnd? +paddingInlineEnd? +paddingInlineStart? +paddingLeft? +paddingRight? +paddingStart? +paddingTop? +paddingX? +paddingY? +pb? +pe? +pl? +placeContent? +placeItems? +placeSelf? +pointerEvents? +pos? +position? +pr? +ps? +pt? +px? +py? +radioGroupProps? +resize? +right? +ring? +ringColor? +ringInset? +ringOffset? +ringOffsetColor? +rotate? +rounded? +roundedBottom? +roundedBottomLeft? +roundedBottomRight? +roundedEnd? +roundedLeft? +roundedRight? +roundedStart? +roundedTop? +roundedTopLeft? +roundedTopRight? +rowGap? +saturate? +scale? +scaleX? +scaleY? +shadow? +skewX? +skewY? +srOnly? +stackProps? +stroke? +sx? +textAlign? +textColor? +textDecor? +textDecoration? +textDecorationColor? +textDecorationLine? +textDecorationStyle? +textDecorationThickness? +textIndent? +textOverflow? +textShadow? +textStyle? +textTransform? +textUnderlineOffset? +top? +transform? +transformOrigin? +transition? +transitionDelay? +transitionDuration? +transitionProperty? +transitionTimingFunction? +translateX? +translateY? +userSelect? +verticalAlign? +visibility? +w? +whiteSpace? +width? +willChange? +wordBreak? +zIndex? +
+
+

Properties

+
+

Optional Private __css

+
__css?: SystemStyleObject
+

Used for internal css management

+
+
+

Optional _active

+
_active?: SystemStyleObject
+

Styles for CSS Selector &:active

+
+
+

Optional _activeLink

+
_activeLink?: SystemStyleObject
+

Used to style the active link in a navigation +Styles for CSS Selector &[aria-current=page]

+
+
+

Optional _activeStep

+
_activeStep?: SystemStyleObject
+

Used to style the current step within a process +Styles for CSS Selector &[aria-current=step]

+
+
+

Optional _after

+
_after?: SystemStyleObject
+

Styles for CSS selector &::after

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _after={{content:`""` }}/>
+
+
+
+

Optional _autofill

+
_autofill?: SystemStyleObject
+

Styles for CSS Selector &:-webkit-autofill

+
+
+

Optional _before

+
_before?: SystemStyleObject
+

Styles for CSS selector &::before

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _before={{content:`""` }}/>
+
+
+
+

Optional _checked

+
_checked?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is true

+
    +
  • CSS selector &[aria-checked=true]
    • +
+
+
+

Optional _dark

+
_dark?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _disabled

+
_disabled?: SystemStyleObject
+

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

+
    +
  • &[aria-disabled=true]
    • +
  • &:disabled
    • +
  • &[data-disabled]
    • +
  • &[disabled]
    • +
+
+
+

Optional _empty

+
_empty?: SystemStyleObject
+

Styles for CSS selector &:empty

+
+
+

Optional _even

+
_even?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(even)

+
+
+

Optional _expanded

+
_expanded?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-expanded is true

+
    +
  • CSS selector &[aria-expanded=true]
    • +
+
+
+

Optional _first

+
_first?: SystemStyleObject
+

Styles for CSS Selector &:first-of-type

+
+
+

Optional _firstLetter

+
_firstLetter?: SystemStyleObject
+

Styles for CSS selector &::first-letter

+

NOTE: This selector is only applied for block-level elements and not preceded by an image or table.

+ +

Example

<Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
+
+
+
+

Optional _focus

+
_focus?: SystemStyleObject
+

Styles for CSS selector &:focus

+
+
+

Optional _focusVisible

+
_focusVisible?: SystemStyleObject
+

Styles to apply when this element has received focus via tabbing

+
    +
  • CSS Selector &:focus-visible
    • +
+
+
+

Optional _focusWithin

+
_focusWithin?: SystemStyleObject
+

Styles to apply when a child of this element has received focus

+
    +
  • CSS Selector &:focus-within
    • +
+
+
+

Optional _fullScreen

+
_fullScreen?: SystemStyleObject
+

Styles for CSS Selector &:fullscreen.

+
+
+

Optional _grabbed

+
_grabbed?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-grabbed is true

+
    +
  • CSS selector &[aria-grabbed=true]
    • +
+
+
+

Optional _groupActive

+
_groupActive?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is active

+
+
+

Optional _groupChecked

+
_groupChecked?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is checked

+
+
+

Optional _groupDisabled

+
_groupDisabled?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is disabled

+
+
+

Optional _groupFocus

+
_groupFocus?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is focused

+
+
+

Optional _groupFocusVisible

+
_groupFocusVisible?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has visible focus

+
+
+

Optional _groupFocusWithin

+
_groupFocusWithin?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has focus within

+
+
+

Optional _groupHover

+
_groupHover?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is hovered

+
+
+

Optional _groupInvalid

+
_groupInvalid?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is invalid

+
+
+

Optional _hidden

+
_hidden?: SystemStyleObject
+

Styles for CSS Selector [hidden=true]

+
+
+

Optional _highlighted

+
_highlighted?: SystemStyleObject
+

Styles for the highlighted state.

+
+
+

Optional _hover

+
_hover?: SystemStyleObject
+

Styles for CSS selector &:hover

+
+
+

Optional _indeterminate

+
_indeterminate?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is mixed

+
    +
  • CSS selector &[aria-checked=mixed]
    • +
+
+
+

Optional _invalid

+
_invalid?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-invalid is true

+
    +
  • CSS selector &[aria-invalid=true]
    • +
+
+
+

Optional _last

+
_last?: SystemStyleObject
+

Styles for CSS Selector &:last-of-type

+
+
+

Optional _light

+
_light?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _loading

+
_loading?: SystemStyleObject
+

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. +Useful for styling loading states

+
+
+

Optional _ltr

+
_ltr?: SystemStyleObject
+

Styles for CSS Selector [dir=ltr] & +It is applied when a parent element or this element has dir="ltr"

+
+
+

Optional _mediaDark

+
_mediaDark?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-color-scheme: dark) +It is used when the user has requested the system use a light or dark color theme.

+
+
+

Optional _mediaReduceMotion

+
_mediaReduceMotion?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-reduced-motion: reduce) +It is used when the user has requested the system to reduce the amount of animations.

+
+
+

Optional _notFirst

+
_notFirst?: SystemStyleObject
+

Styles for CSS Selector &:not(:first-of-type)

+
+
+

Optional _notLast

+
_notLast?: SystemStyleObject
+

Styles for CSS Selector &:not(:last-of-type)

+
+
+

Optional _odd

+
_odd?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(odd)

+
+
+

Optional _peerActive

+
_peerActive?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is active

+
+
+

Optional _peerChecked

+
_peerChecked?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is checked

+
+
+

Optional _peerDisabled

+
_peerDisabled?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is disabled

+
+
+

Optional _peerFocus

+
_peerFocus?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is focused

+
+
+

Optional _peerFocusVisible

+
_peerFocusVisible?: SystemStyleObject
+

Styles to apply when a sibling element with .peeror data-peer has visible focus

+
+
+

Optional _peerFocusWithin

+
_peerFocusWithin?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has focus within

+
+
+

Optional _peerHover

+
_peerHover?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is hovered

+
+
+

Optional _peerInvalid

+
_peerInvalid?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is invalid

+
+
+

Optional _peerPlaceholderShown

+
_peerPlaceholderShown?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

+
+
+

Optional _placeholder

+
_placeholder?: SystemStyleObject
+

Styles for CSS Selector &::placeholder.

+
+
+

Optional _placeholderShown

+
_placeholderShown?: SystemStyleObject
+

Styles for CSS Selector &:placeholder-shown.

+
+
+

Optional _pressed

+
_pressed?: SystemStyleObject
+

Styles for CSS Selector &[aria-pressed=true] +Typically used to style the current "pressed" state of toggle buttons

+
+
+

Optional _readOnly

+
_readOnly?: SystemStyleObject
+

Styles for CSS Selector &:readonly

+
+
+

Optional _rtl

+
_rtl?: SystemStyleObject
+

Styles for CSS Selector [dir=rtl] & +It is applied when a parent element or this element has dir="rtl"

+
+
+

Optional _selected

+
_selected?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-selected is true

+
    +
  • CSS selector &[aria-selected=true]
    • +
+
+
+

Optional _selection

+
_selection?: SystemStyleObject
+

Styles for CSS Selector &::selection

+
+
+

Optional _valid

+
_valid?: SystemStyleObject
+

Styles for the valid state

+
    +
  • CSS selector &[data-valid], &[data-state=valid]
    • +
+
+
+

Optional _visited

+
_visited?: SystemStyleObject
+

Styles for CSS Selector &:visited

+
+
+

Optional alignContent

+
alignContent?: ResponsiveValue<AlignContent>
+

The CSS align-content property.

+

It defines the distribution of space between and around +content items along a flexbox cross-axis or a grid's block axis.

+ +

See

Mozilla Docs

+
+
+

Optional alignItems

+
alignItems?: ResponsiveValue<AlignItems>
+

The CSS align-items property.

+

It defines the align-self value on all direct children as a group.

+
    +
  • In Flexbox, it controls the alignment of items on the Cross Axis.
    • +
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
    • +
+ +

See

Mozilla Docs

+
+
+

Optional alignSelf

+
alignSelf?: ResponsiveValue<AlignSelf>
+

The CSS align-self property.

+

It works like align-items, but applies only to a +single flexbox item, instead of all of them.

+ +

See

Mozilla Docs

+
+
+

Optional animation

+
animation?: ResponsiveValue<Animation<string & {}>>
+

The CSS animation property

+
+
+

Optional appearance

+
appearance?: ResponsiveValue<Appearance>
+

The CSS appearance property

+
+
+

Optional apply

+
apply?: ResponsiveValue<string>
+

Apply theme-aware style objects in theme

+ +

Example

<Box apply="styles.h3">This is a div</Box>
+
+

This will apply styles defined in theme.styles.h3

+
+
+

Optional aria-activedescendant

+
aria-activedescendant?: string
+

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

+
+
+

Optional aria-atomic

+
aria-atomic?: Booleanish
+

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

+
+
+

Optional aria-autocomplete

+
aria-autocomplete?: "none" | "both" | "inline" | "list"
+

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be +presented if they are made.

+
+
+

Optional aria-busy

+
aria-busy?: Booleanish
+

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

+
+
+

Optional aria-checked

+
aria-checked?: boolean | "true" | "false" | "mixed"
+

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

+ +

See

    +
  • aria-pressed
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-colcount

+
aria-colcount?: number
+

Defines the total number of columns in a table, grid, or treegrid.

+ +

See

aria-colindex.

+
+
+

Optional aria-colindex

+
aria-colindex?: number
+

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

+ +

See

    +
  • aria-colcount
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-colspan

+
aria-colspan?: number
+

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-colindex
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-controls

+
aria-controls?: string
+

Identifies the element (or elements) whose contents or presence are controlled by the current element.

+ +

See

aria-owns.

+
+
+

Optional aria-current

+
aria-current?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"
+

Indicates the element that represents the current item within a container or set of related elements.

+
+
+

Optional aria-describedby

+
aria-describedby?: string
+

Identifies the element (or elements) that describes the object.

+ +

See

aria-labelledby

+
+
+

Optional aria-details

+
aria-details?: string
+

Identifies the element that provides a detailed, extended description for the object.

+ +

See

aria-describedby.

+
+
+

Optional aria-disabled

+
aria-disabled?: Booleanish
+

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

+ +

See

    +
  • aria-hidden
    • +
  • aria-readonly.
    • +
+
+
+

Optional aria-dropeffect

+
aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"
+

Indicates what functions can be performed when a dragged object is released on the drop target.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-errormessage

+
aria-errormessage?: string
+

Identifies the element that provides an error message for the object.

+ +

See

    +
  • aria-invalid
    • +
  • aria-describedby.
    • +
+
+
+

Optional aria-expanded

+
aria-expanded?: Booleanish
+

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

+
+
+

Optional aria-flowto

+
aria-flowto?: string
+

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, +allows assistive technology to override the general default of reading in document source order.

+
+
+

Optional aria-grabbed

+
aria-grabbed?: Booleanish
+

Indicates an element's "grabbed" state in a drag-and-drop operation.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-haspopup

+
aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "true" | "false" | "tree"
+

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

+
+
+

Optional aria-hidden

+
aria-hidden?: Booleanish
+

Indicates whether the element is exposed to an accessibility API.

+ +

See

aria-disabled.

+
+
+

Optional aria-invalid

+
aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"
+

Indicates the entered value does not conform to the format expected by the application.

+ +

See

aria-errormessage.

+
+
+

Optional aria-keyshortcuts

+
aria-keyshortcuts?: string
+

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

+
+
+

Optional aria-label

+
aria-label?: string
+

Defines a string value that labels the current element.

+ +

See

aria-labelledby.

+
+
+

Optional aria-labelledby

+
aria-labelledby?: string
+

Identifies the element (or elements) that labels the current element.

+ +

See

aria-describedby.

+
+
+

Optional aria-level

+
aria-level?: number
+

Defines the hierarchical level of an element within a structure.

+
+
+

Optional aria-live

+
aria-live?: "off" | "assertive" | "polite"
+

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

+
+
+

Optional aria-modal

+
aria-modal?: Booleanish
+

Indicates whether an element is modal when displayed.

+
+
+

Optional aria-multiline

+
aria-multiline?: Booleanish
+

Indicates whether a text box accepts multiple lines of input or only a single line.

+
+
+

Optional aria-multiselectable

+
aria-multiselectable?: Booleanish
+

Indicates that the user may select more than one item from the current selectable descendants.

+
+
+

Optional aria-orientation

+
aria-orientation?: "horizontal" | "vertical"
+

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

+
+
+

Optional aria-owns

+
aria-owns?: string
+

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship +between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

+ +

See

aria-controls.

+
+
+

Optional aria-placeholder

+
aria-placeholder?: string
+

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. +A hint could be a sample value or a brief description of the expected format.

+
+
+

Optional aria-posinset

+
aria-posinset?: number
+

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-setsize.

+
+
+

Optional aria-pressed

+
aria-pressed?: boolean | "true" | "false" | "mixed"
+

Indicates the current "pressed" state of toggle buttons.

+ +

See

    +
  • aria-checked
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-readonly

+
aria-readonly?: Booleanish
+

Indicates that the element is not editable, but is otherwise operable.

+ +

See

aria-disabled.

+
+
+

Optional aria-relevant

+
aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
+

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

+ +

See

aria-atomic.

+
+
+

Optional aria-required

+
aria-required?: Booleanish
+

Indicates that user input is required on the element before a form may be submitted.

+
+
+

Optional aria-roledescription

+
aria-roledescription?: string
+

Defines a human-readable, author-localized description for the role of an element.

+
+
+

Optional aria-rowcount

+
aria-rowcount?: number
+

Defines the total number of rows in a table, grid, or treegrid.

+ +

See

aria-rowindex.

+
+
+

Optional aria-rowindex

+
aria-rowindex?: number
+

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowcount
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-rowspan

+
aria-rowspan?: number
+

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowindex
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-selected

+
aria-selected?: Booleanish
+

Indicates the current "selected" state of various widgets.

+ +

See

    +
  • aria-checked
    • +
  • aria-pressed.
    • +
+
+
+

Optional aria-setsize

+
aria-setsize?: number
+

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-posinset.

+
+
+

Optional aria-sort

+
aria-sort?: "none" | "ascending" | "descending" | "other"
+

Indicates if items in a table or grid are sorted in ascending or descending order.

+
+
+

Optional aria-valuemax

+
aria-valuemax?: number
+

Defines the maximum allowed value for a range widget.

+
+
+

Optional aria-valuemin

+
aria-valuemin?: number
+

Defines the minimum allowed value for a range widget.

+
+
+

Optional aria-valuenow

+
aria-valuenow?: number
+

Defines the current value for a range widget.

+ +

See

aria-valuetext.

+
+
+

Optional aria-valuetext

+
aria-valuetext?: string
+

Defines the human readable text alternative of aria-valuenow for a range widget.

+
+
+

Optional backdropBlur

+
backdropBlur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the backdrop-blur filter value of an element. +Value is assigned to --chakra-backdrop-blur css variable

+
+
+

Optional backdropBrightness

+
backdropBrightness?: ResponsiveValue<Length>
+

Sets the backdrop-brightness filter value of an element. +Value is assigned to --chakra-backdrop-brightness css variable

+
+
+

Optional backdropContrast

+
backdropContrast?: ResponsiveValue<Length>
+

Sets the backdrop-contrast filter value of an element. +Value is assigned to --chakra-backdrop-contrast css variable

+
+
+

Optional backdropFilter

+
backdropFilter?: ResponsiveValue<"auto" | BackdropFilter>
+

The CSS backdrop-filter property. When set to auto, you allow +Chakra UI to define the color based on the backdrop filter style props +(backdropBlur, backdropSaturate, etc.)

+
+
+

Optional backdropHueRotate

+
backdropHueRotate?: ResponsiveValue<Length>
+

Sets the backdrop-hue-rotate filter value of an element. +Value is assigned to --chakra-backdrop-hue-rotate css variable

+
+
+

Optional backdropInvert

+
backdropInvert?: ResponsiveValue<Length>
+

Sets the backdrop-invert filter value of an element. +Value is assigned to --chakra-backdrop-invert css variable

+
+
+

Optional backdropSaturate

+
backdropSaturate?: ResponsiveValue<Length>
+

Sets the backdrop-saturate filter value of an element. +Value is assigned to --chakra-backdrop-saturate css variable

+
+
+

Optional background

+
background?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional backgroundAttachment

+
backgroundAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional backgroundBlendMode

+
backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional backgroundClip

+
backgroundClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional backgroundColor

+
backgroundColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional backgroundImage

+
backgroundImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional backgroundPosition

+
backgroundPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional backgroundRepeat

+
backgroundRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional backgroundSize

+
backgroundSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional bg

+
bg?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional bgAttachment

+
bgAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional bgBlendMode

+
bgBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional bgClip

+
bgClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional bgColor

+
bgColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional bgGradient

+
bgGradient?: ResponsiveValue<string | string & {}>
+

The background-gradient shorthand

+
+
+

Optional bgImage

+
bgImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgImg

+
bgImg?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgPos

+
bgPos?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgPosition

+
bgPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgRepeat

+
bgRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional bgSize

+
bgSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional blendMode

+
blendMode?: ResponsiveValue<MixBlendMode>
+

The blend-mode property

+
+
+

Optional blur

+
blur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the blur filter value of an element. +Value is assigned to --chakra-filter css variable

+
+
+

Optional border

+
border?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border property

+
+
+

Optional borderBottom

+
borderBottom?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-bottom property

+
+
+

Optional borderBottomColor

+
borderBottomColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderBottomColor>
+

The CSS border-bottom-color property

+
+
+

Optional borderBottomLeftRadius

+
borderBottomLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional borderBottomRadius

+
borderBottomRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional borderBottomRightRadius

+
borderBottomRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional borderBottomStyle

+
borderBottomStyle?: ResponsiveValue<BorderBottomStyle>
+

The CSS border-bottom-style property

+
+
+

Optional borderBottomWidth

+
borderBottomWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-bottom-width property

+
+
+

Optional borderColor

+
borderColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-color property

+
+
+

Optional borderEndRadius

+
borderEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineEndRadius

+
borderInlineEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderInlineEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineStartRadius

+
borderInlineStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderInlineStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderLeft

+
borderLeft?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-left property

+
+
+

Optional borderLeftColor

+
borderLeftColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderLeftColor>
+

The CSS border-left-color property

+
+
+

Optional borderLeftRadius

+
borderLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional borderLeftStyle

+
borderLeftStyle?: ResponsiveValue<BorderLeftStyle>
+

The CSS border-left-style property

+
+
+

Optional borderLeftWidth

+
borderLeftWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-left-width property

+
+
+

Optional borderRadius

+
borderRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional borderRight

+
borderRight?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right property

+
+
+

Optional borderRightColor

+
borderRightColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderRightColor>
+

The CSS border-right-color property

+
+
+

Optional borderRightRadius

+
borderRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional borderRightStyle

+
borderRightStyle?: ResponsiveValue<BorderRightStyle>
+

The CSS border-right-styles property

+
+
+

Optional borderRightWidth

+
borderRightWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-right-width property

+
+
+

Optional borderStartRadius

+
borderStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderStyle

+
borderStyle?: ResponsiveValue<BorderStyle>
+

The CSS border-style property

+
+
+

Optional borderTop

+
borderTop?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top property

+
+
+

Optional borderTopColor

+
borderTopColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-top-color property

+
+
+

Optional borderTopLeftRadius

+
borderTopLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional borderTopRadius

+
borderTopRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional borderTopRightRadius

+
borderTopRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional borderTopStyle

+
borderTopStyle?: ResponsiveValue<BorderTopStyle>
+

The CSS border-top-style property

+
+
+

Optional borderTopWidth

+
borderTopWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-top-width property

+
+
+

Optional borderWidth

+
borderWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-width property

+
+
+

Optional borderX

+
borderX?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right and border-left property

+
+
+

Optional borderY

+
borderY?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top and border-bottom property

+
+
+

Optional bottom

+
bottom?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS bottom property

+
+
+

Optional boxDecorationBreak

+
boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>
+

The CSS box-decoration property

+
+
+

Optional boxShadow

+
boxShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional boxSize

+
boxSize?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width and height property

+
+
+

Optional boxSizing

+
boxSizing?: BoxSizing
+

The CSS box-sizing property

+
+
+

Optional brightness

+
brightness?: ResponsiveValue<Length>
+

Sets the brightness filter value of an element. +Value is assigned to --chakra-brightness css variable

+
+
+

children

+
children: ReactNode
+

The Radio components to be rendered in this group (required)

+
+
+

Optional clipPath

+
clipPath?: ResponsiveValue<ClipPath>
+

The CSS clip-path property.

+

It creates a clipping region that sets what part of an element should be shown.

+
+
+

Optional color

+
color?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional columnGap

+
columnGap?: ResponsiveValue<ColumnGap<Length>>
+

The CSS column-gap property.

+

It sets the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional contrast

+
contrast?: ResponsiveValue<Length>
+

Sets the contrast filter value of an element. +Value is assigned to --chakra-contrast css variable

+
+
+

Optional control

+
control?: Control<any, any>
+

The control passed down from react-hook-form. +Only required if not using FormProvider

+
+
+

Optional css

+
css?: Interpolation<{}>
+

The emotion's css style object

+
+
+

Optional cursor

+
cursor?: ResponsiveValue<Cursor>
+

The CSS cursor property

+
+
+

Optional display

+
display?: ResponsiveValue<Display>
+

The CSS display property

+
+
+

Optional dropShadow

+
dropShadow?: ResponsiveValue<"base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

Sets the drop-shadow filter value of an element. +Value is assigned to --chakra-drop-shadow css variable

+
+
+

Optional errorMessageProps

+
errorMessageProps?: FormErrorMessageProps
+

Chakra FormErrorMessageProps for error message

+
+
+

Optional fill

+
fill?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS fill property for icon svgs and paths

+
+
+

Optional filter

+
filter?: ResponsiveValue<Filter | "auto">
+

The CSS filter property. When set to auto, you allow +Chakra UI to define the color based on the filter style props +(blur, saturate, etc.)

+
+
+

Optional flex

+
flex?: ResponsiveValue<Flex<Length>>
+

The CSS flex property.

+

It defines how a flex item will grow or shrink +to fit the space available in its flex container.

+ +

See

Mozilla Docs

+
+
+

Optional flexBasis

+
flexBasis?: ResponsiveValue<FlexBasis<Length>>
+

The CSS flex-basis property.

+

It defines the initial main size of a flex item.

+ +

See

Mozilla Docs

+
+
+

Optional flexDir

+
flexDir?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexDirection

+
flexDirection?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexFlow

+
flexFlow?: ResponsiveValue<FlexFlow>
+

The CSS flex-flow property.

+

It is a shorthand property for flex-direction and flex-wrap. +It specifies the direction of a flex container, as well as its wrapping behavior.

+ +

See

Mozilla Docs

+
+
+

Optional flexGrow

+
flexGrow?: ResponsiveValue<FlexGrow>
+

The CSS flex-grow property.

+

It defines how much a flexbox item should grow +if there's space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexShrink

+
flexShrink?: ResponsiveValue<FlexShrink>
+

The CSS flex-shrink property.

+

It defines how much a flexbox item should shrink +if there's not enough space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexWrap

+
flexWrap?: ResponsiveValue<FlexWrap>
+

The CSS flex-wrap property.

+

It defines whether flex items are forced onto one line or +can wrap onto multiple lines. If wrapping is allowed, +it sets the direction that lines are stacked.

+ +

See

Mozilla Docs

+
+
+

Optional float

+
float?: ResponsiveValue<Float>
+

The CSS float property

+
+
+

Optional fontFamily

+
fontFamily?: ResponsiveValue<"body" | FontFamily | "heading" | "mono">
+

The CSS font-family property

+
+
+

Optional fontSize

+
fontSize?: ResponsiveValue<number | "small" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl">
+

The CSS font-size property

+
+
+

Optional fontStyle

+
fontStyle?: ResponsiveValue<FontStyle>
+

The CSS font-style property

+
+
+

Optional fontWeight

+
fontWeight?: ResponsiveValue<number | "bold" | string & {} | "black" | "normal" | "hairline" | "thin" | "light" | "medium" | "semibold" | "extrabold">
+

The CSS font-weight property

+
+
+

Optional gap

+
gap?: ResponsiveValue<Gap<Length>>
+

The CSS gap property.

+

It defines the gap between items in both flex and +grid contexts.

+ +

See

Mozilla Docs

+
+
+

Optional gridArea

+
gridArea?: ResponsiveValue<GridArea>
+

The CSS grid-areas property.

+

It specifies a grid item’s size and location within a grid by +contributing a line, a span, or nothing (automatic) +to its grid placement, thereby specifying the edges of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoColumns

+
gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>
+

The CSS grid-auto-columns property.

+

It specifies the size of an implicitly-created grid column track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoFlow

+
gridAutoFlow?: ResponsiveValue<GridAutoFlow>
+

The CSS grid-auto-flow property

+

It controls how the auto-placement algorithm works, +specifying exactly how auto-placed items get flowed into the grid.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoRows

+
gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>
+

The CSS grid-auto-rows property.

+

It specifies the size of an implicitly-created grid row track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumn

+
gridColumn?: ResponsiveValue<GridColumn>
+

The CSS grid-column property.

+

It specifies a grid item's size and location within a grid column +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnEnd

+
gridColumnEnd?: ResponsiveValue<GridColumnEnd>
+

The CSS grid-column property

+

It specifies a grid item’s end position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the block-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnGap

+
gridColumnGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-column-gap property.

+

It defines the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnStart

+
gridColumnStart?: ResponsiveValue<GridColumnStart>
+

The CSS grid-column property.

+

It specifies a grid item’s start position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement

+ +

See

Mozilla Docs

+
+
+

Optional gridGap

+
gridGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-gap property.

+

It defines the gaps (gutters) between rows and columns

+ +

See

Mozilla Docs

+
+
+

Optional gridRow

+
gridRow?: ResponsiveValue<GridRow>
+

The CSS grid-row property

+

It specifies a grid item’s size and location within the grid row +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowEnd

+
gridRowEnd?: ResponsiveValue<GridRowEnd>
+

The CSS grid-row-end property

+

It specifies a grid item’s end position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowGap

+
gridRowGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-row-gap property.

+

It defines the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowStart

+
gridRowStart?: ResponsiveValue<GridRowStart>
+

The CSS grid-row-start property

+

It specifies a grid item’s start position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplate

+
gridTemplate?: ResponsiveValue<GridTemplate>
+

The CSS grid-template property.

+

It is a shorthand property for defining grid columns, rows, and areas.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateAreas

+
gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>
+

The CSS grid-template-areas property.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateColumns

+
gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>
+

The CSS grid-template-columns property

+

It defines the line names and track sizing functions of the grid columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateRows

+
gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>
+

The CSS grid-template-rows property.

+

It defines the line names and track sizing functions of the grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional h

+
h?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional height

+
height?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional helperText

+
helperText?: ReactNode
+

Helper text to show alongside input

+
+
+

Optional helperTextProps

+
helperTextProps?: TextProps
+

Chakra TextProps associated with the helper text

+
+
+

Optional hideBelow

+
hideBelow?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element below the specified breakpoint

+
+
+

Optional hideFrom

+
hideFrom?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element from the specified breakpoint and up

+
+
+

Optional hueRotate

+
hueRotate?: ResponsiveValue<Length>
+

Sets the hue-rotate filter value of an element. +Value is assigned to --chakra-hue-rotate css variable

+
+
+

Optional inputMode

+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
+

Hints at the type of data that might be entered by the user while editing the element or its contents

+ +

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

+
+
+

Optional inset

+
inset?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, right, top, bottom property

+
+
+

Optional insetEnd

+
insetEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetEnd is equivalent to right. +When the direction is rtl, insetEnd is equivalent to left.

+
+
+

Optional insetInlineEnd

+
insetInlineEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetInlineEnd is equivalent to right. +When the direction is rtl, insetInlineEnd is equivalent to left.

+
+
+

Optional insetStart

+
insetStart?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is start, end is equivalent to left. +When the direction is start, end is equivalent to right.

+
+
+

Optional insetX

+
insetX?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, and right property

+
+
+

Optional insetY

+
insetY?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top, and bottom property

+
+
+

Optional invert

+
invert?: ResponsiveValue<Length>
+

Sets the invert filter value of an element. +Value is assigned to --chakra-invert css variable

+
+
+

Optional is

+
is?: string
+

Specify that a standard HTML element should behave like a defined custom built-in element

+ +

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

+
+
+

Optional isDisabled

+
isDisabled?: boolean
+

If true, the form control will be disabled. This has 2 side effects:

+
    +
  • The FormLabel will have data-disabled attribute
    • +
  • The form element (e.g, Input) will be disabled
    • +
+ +

Default

false

+
+
+

Optional isInvalid

+
isInvalid?: boolean
+

If true, the form control will be invalid. This has 2 side effects:

+
    +
  • The FormLabel and FormErrorIcon will have data-invalid set to true
    • +
  • The form element (e.g, Input) will have aria-invalid set to true
    • +
+ +

Default

false

+
+
+

Optional isReadOnly

+
isReadOnly?: boolean
+

If true, the form control will be readonly

+ +

Default

false

+
+
+

Optional isRequired

+
isRequired?: boolean
+

If true, the form control will be required. This has 2 side effects:

+
    +
  • The FormLabel will show a required indicator
    • +
  • The form element (e.g, Input) will have aria-required set to true
    • +
+ +

Default

false

+
+
+

Optional isTruncated

+
isTruncated?: boolean
+

If true, it clamps truncate a text after one line.

+
+
+

Optional isolation

+
isolation?: ResponsiveValue<Isolation>
+

The CSS isolation property

+
+
+

Optional justifyContent

+
justifyContent?: ResponsiveValue<JustifyContent>
+

The CSS justify-content property.

+

It defines how the browser distributes space between and around content items +along the main-axis of a flex container, and the inline axis of a grid container.

+ +

See

Mozilla Docs

+
+
+

Optional justifyItems

+
justifyItems?: ResponsiveValue<JustifyItems>
+

The CSS justify-items property.

+

It defines the default justify-self for all items of the box, +giving them all a default way of justifying each box +along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional justifySelf

+
justifySelf?: ResponsiveValue<JustifySelf>
+

The CSS justify-self property.

+

It defines the way a box is justified inside its +alignment container along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional label

+
label?: ReactNode
+

The label to be associated with the input

+
+
+

Optional labelProps

+
labelProps?: FormLabelProps
+

Chakra FormLabelProps

+
+
+

Optional layerStyle

+
layerStyle?: ResponsiveValue<string & {}>
+

The layer style object to apply. +Note: Styles must be located in theme.layerStyles

+
+
+

Optional left

+
left?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left property

+
+
+

Optional letterSpacing

+
letterSpacing?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "tighter" | "tight" | "wide" | "wider" | "widest">
+

The CSS letter-spacing property

+
+
+

Optional lineHeight

+
lineHeight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "none" | "normal" | number & {} | "shorter" | "short" | "tall" | "taller">
+

The CSS line-height property

+
+
+

Optional listStyleImage

+
listStyleImage?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStyleImg

+
listStyleImg?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStylePos

+
listStylePos?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional listStylePosition

+
listStylePosition?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional m

+
m?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional margin

+
margin?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional marginBottom

+
marginBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional marginEnd

+
marginEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginEnd is equivalent to marginRight. +When direction is rtl, marginEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineEnd

+
marginInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineEnd is equivalent to marginRight. +When direction is rtl, marginInlineEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineStart

+
marginInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineStart is equivalent to marginLeft. +When direction is rtl, marginInlineStart is equivalent to marginRight.

+
+
+

Optional marginLeft

+
marginLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional marginRight

+
marginRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional marginStart

+
marginStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginStart is equivalent to marginLeft. +When direction is rtl, marginStart is equivalent to marginRight.

+
+
+

Optional marginTop

+
marginTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional marginX

+
marginX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional marginY

+
marginY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

Optional maxH

+
maxH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxHeight

+
maxHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxW

+
maxW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional maxWidth

+
maxWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional mb

+
mb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional me

+
me?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, me is equivalent to marginRight. +When direction is rtl, me is equivalent to marginLeft.

+
+
+

Optional minH

+
minH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minHeight

+
minHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minW

+
minW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional minWidth

+
minWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional mixBlendMode

+
mixBlendMode?: ResponsiveValue<MixBlendMode>
+

The mix-blend-mode property

+
+
+

Optional ml

+
ml?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional mr

+
mr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional ms

+
ms?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, ms is equivalent to marginLeft. +When direction is rtl, ms is equivalent to marginRight.

+
+
+

Optional mt

+
mt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional mx

+
mx?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional my

+
my?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

name

+
name: string
+

The name of the input (required)

+
+
+

Optional noOfLines

+
noOfLines?: ResponsiveValue<number>
+

Used to truncate text at a specific number of lines

+
+
+

Optional objectFit

+
objectFit?: ResponsiveValue<ObjectFit>
+

The CSS object-fit property

+
+
+

Optional objectPosition

+
objectPosition?: ResponsiveValue<ObjectPosition<Length>>
+

The CSS object-position property

+
+
+

Optional onKeyPress

+
onKeyPress?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional onKeyPressCapture

+
onKeyPressCapture?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional opacity

+
opacity?: ResponsiveValue<Opacity>
+

The CSS opacity property

+
+
+

Optional order

+
order?: ResponsiveValue<Order>
+

The CSS order property.

+

It defines the order to lay out an item in a flex or grid container.

+ +

See

Mozilla Docs

+
+
+

Optional outline

+
outline?: ResponsiveValue<Outline<Length>>
+

The CSS outline property

+
+
+

Optional outlineColor

+
outlineColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS outline-color property

+
+
+

Optional outlineOffset

+
outlineOffset?: ResponsiveValue<OutlineOffset<Length>>
+

The CSS outline-offset property

+
+
+

Optional overflow

+
overflow?: ResponsiveValue<Overflow>
+

The CSS overflow property

+
+
+

Optional overflowWrap

+
overflowWrap?: ResponsiveValue<OverflowWrap>
+

The CSS overflow-wrap property

+
+
+

Optional overflowX

+
overflowX?: ResponsiveValue<OverflowX>
+

The CSS overflow-x property

+
+
+

Optional overflowY

+
overflowY?: ResponsiveValue<OverflowY>
+

The CSS overflow-y property

+
+
+

Optional overscroll

+
overscroll?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehavior

+
overscrollBehavior?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehaviorX

+
overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollBehaviorY

+
overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional overscrollX

+
overscrollX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollY

+
overscrollY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional p

+
p?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional padding

+
padding?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional paddingBottom

+
paddingBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional paddingEnd

+
paddingEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingEnd is equivalent to paddingRight. +When direction is rtl, paddingEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineEnd

+
paddingInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineEnd is equivalent to paddingRight. +When direction is rtl, paddingInlineEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineStart

+
paddingInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineStart is equivalent to paddingLeft. +When direction is rtl, paddingInlineStart is equivalent to paddingRight.

+
+
+

Optional paddingLeft

+
paddingLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional paddingRight

+
paddingRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional paddingStart

+
paddingStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingStart is equivalent to paddingLeft. +When direction is rtl, paddingStart is equivalent to paddingRight.

+
+
+

Optional paddingTop

+
paddingTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional paddingX

+
paddingX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional paddingY

+
paddingY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional pb

+
pb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional pe

+
pe?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, pe is equivalent to paddingRight. +When direction is rtl, pe is equivalent to paddingLeft.

+
+
+

Optional pl

+
pl?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional placeContent

+
placeContent?: ResponsiveValue<PlaceContent>
+

The CSS place-content property.

+

It allows you to align content along both the block and +inline directions at once (i.e. the align-content and justify-content properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional placeItems

+
placeItems?: ResponsiveValue<PlaceItems>
+

The CSS place-items property.

+

It allows you to align items along both the block and +inline directions at once (i.e. the align-items and justify-items properties) +in a relevant layout system such as Grid or Flex.

+ +

See

Mozilla Docs

+
+
+

Optional placeSelf

+
placeSelf?: ResponsiveValue<PlaceSelf>
+

The CSS place-self property.

+

It allows you to align an individual item in both the block and +inline directions at once (i.e. the align-self and justify-self properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional pointerEvents

+
pointerEvents?: ResponsiveValue<PointerEvents>
+

The CSS pointer-events property

+
+
+

Optional pos

+
pos?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional position

+
position?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional pr

+
pr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional ps

+
ps?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, ps is equivalent to paddingLeft. +When direction is rtl, ps is equivalent to paddingRight.

+
+
+

Optional pt

+
pt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional px

+
px?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional py

+
py?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional radioGroupProps

+
radioGroupProps?: RadioGroupProps
+

Chakra RadioGroupProps

+
+
+

Optional resize

+
resize?: ResponsiveValue<Resize>
+

The CSS resize property

+
+
+

Optional right

+
right?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS right property

+
+
+

Optional ring

+
ring?: ResponsiveValue<Length>
+

Creates outline rings with CSS box-shadow property

+
+
+

Optional ringColor

+
ringColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the outline ring

+
+
+

Optional ringInset

+
ringInset?: ResponsiveValue<"inset" | "none">
+

If the outline ring should an inset

+
+
+

Optional ringOffset

+
ringOffset?: ResponsiveValue<Length>
+

The thickness of the offset shadow when using outline rings

+
+
+

Optional ringOffsetColor

+
ringOffsetColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the offset shadow when adding outline rings

+
+
+

Optional rotate

+
rotate?: ResponsiveValue<Length>
+

Sets the rotation value of the element

+
+
+

Optional rounded

+
rounded?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional roundedBottom

+
roundedBottom?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional roundedBottomLeft

+
roundedBottomLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional roundedBottomRight

+
roundedBottomRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional roundedEnd

+
roundedEnd?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedLeft

+
roundedLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional roundedRight

+
roundedRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional roundedStart

+
roundedStart?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedTop

+
roundedTop?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional roundedTopLeft

+
roundedTopLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional roundedTopRight

+
roundedTopRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional rowGap

+
rowGap?: ResponsiveValue<RowGap<Length>>
+

The CSS row-gap property.

+

It sets the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional saturate

+
saturate?: ResponsiveValue<Length>
+

Sets the saturation filter value of an element. +Value is assigned to --chakra-saturate css variable

+
+
+

Optional scale

+
scale?: ResponsiveValue<Length>
+

Sets the scale value of the element

+
+
+

Optional scaleX

+
scaleX?: ResponsiveValue<Length>
+

Scale value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-x
    • +
+
+
+

Optional scaleY

+
scaleY?: ResponsiveValue<Length>
+

Scale value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-y
    • +
+
+
+

Optional shadow

+
shadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional skewX

+
skewX?: ResponsiveValue<Length>
+

Skew value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-x
    • +
+
+
+

Optional skewY

+
skewY?: ResponsiveValue<Length>
+

Skew value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-y
    • +
+
+
+

Optional srOnly

+
srOnly?: true | "focusable"
+

If true, hide an element visually without hiding it from screen readers.

+

If focusable, the sr-only styles will be undone, making the element visible +to sighted users as well as screen readers.

+
+
+

Optional stackProps

+
stackProps?: StackProps
+

Chakra StackProps

+
+
+

Optional stroke

+
stroke?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS stroke property for icon svgs and paths

+
+
+

Optional sx

+
sx?: SystemStyleObject
+

Used to pass theme-aware style props. +NB: This is the public API for user-land

+
+
+

Optional textAlign

+
textAlign?: ResponsiveValue<TextAlign>
+

The CSS text-align property

+
+
+

Optional textColor

+
textColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional textDecor

+
textDecor?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecoration

+
textDecoration?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecorationColor

+
textDecorationColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | TextDecorationColor>
+

The CSS text-decoration-color property

+
+
+

Optional textDecorationLine

+
textDecorationLine?: ResponsiveValue<TextDecorationLine>
+

The CSS text-decoration-line property

+
+
+

Optional textDecorationStyle

+
textDecorationStyle?: ResponsiveValue<TextDecorationStyle>
+

The CSS text-decoration-style property

+
+
+

Optional textDecorationThickness

+
textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>
+

The CSS text-decoration-thickness property

+
+
+

Optional textIndent

+
textIndent?: ResponsiveValue<TextIndent<0 | string & {}>>
+

The CSS text-indent property

+
+
+

Optional textOverflow

+
textOverflow?: ResponsiveValue<TextOverflow>
+

The CSS text-overflow property

+
+
+

Optional textShadow

+
textShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "inner" | "dark-lg" | TextShadow>
+

The text-shadow property

+
+
+

Optional textStyle

+
textStyle?: ResponsiveValue<string & {}>
+

The text style object to apply. +Note: Styles must be located in theme.textStyles

+
+
+

Optional textTransform

+
textTransform?: ResponsiveValue<TextTransform>
+

The CSS text-transform property

+
+
+

Optional textUnderlineOffset

+
textUnderlineOffset?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto">
+

The CSS text-underline-offset property

+
+
+

Optional top

+
top?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top property

+
+
+

Optional transform

+
transform?: ResponsiveValue<"auto" | Transform | "auto-gpu">
+

The CSS transform property

+
+
+

Optional transformOrigin

+
transformOrigin?: ResponsiveValue<number | "center" | "px" | "top" | "right" | "bottom" | "left" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS transform-origin property

+
+
+

Optional transition

+
transition?: ResponsiveValue<Transition<string & {}>>
+

The CSS transition property

+
+
+

Optional transitionDelay

+
transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>
+

The CSS transition-delay property

+
+
+

Optional transitionDuration

+
transitionDuration?: ResponsiveValue<string>
+

The CSS transition-duration property

+
+
+

Optional transitionProperty

+
transitionProperty?: ResponsiveValue<TransitionProperty>
+

The CSS transition-property property

+
+
+

Optional transitionTimingFunction

+
transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>
+

The CSS transition-timing-function property

+
+
+

Optional translateX

+
translateX?: ResponsiveValue<Length>
+

Translate value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-x
    • +
+
+
+

Optional translateY

+
translateY?: ResponsiveValue<Length>
+

Translate value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-y
    • +
+
+
+

Optional userSelect

+
userSelect?: ResponsiveValue<UserSelect>
+

The CSS user-select property

+
+
+

Optional verticalAlign

+
verticalAlign?: ResponsiveValue<VerticalAlign<Length>>
+

The CSS vertical-align property

+
+
+

Optional visibility

+
visibility?: ResponsiveValue<Visibility>
+

The CSS visibility property

+
+
+

Optional w

+
w?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional whiteSpace

+
whiteSpace?: ResponsiveValue<WhiteSpace>
+

The CSS white-space property

+
+
+

Optional width

+
width?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional willChange

+
willChange?: ResponsiveValue<WillChange>
+

The CSS will-change property

+
+
+

Optional wordBreak

+
wordBreak?: ResponsiveValue<WordBreak>
+

The CSS word-break property

+
+
+

Optional zIndex

+
zIndex?: ResponsiveValue<"base" | "overlay" | ZIndex | "hide" | "docked" | "dropdown" | "sticky" | "banner" | "modal" | "popover" | "skipLink" | "toast" | "tooltip">
+

The CSS z-index property

+
+
+
+
+

Settings

 +
+
+

Member Visibility

+
    +
    • +
    • +
    • +
    • +
    • +
+
+

Theme

+ +
+
+

Generated using TypeDoc

+
\ No newline at end of file diff --git a/docs/interfaces/ResetButtonProps.html b/docs/interfaces/ResetButtonProps.html new file mode 100644 index 0000000..691bb8d --- /dev/null +++ b/docs/interfaces/ResetButtonProps.html @@ -0,0 +1,4460 @@ +ResetButtonProps | react-hook-form-chakra
+
+ +
+
+
+
+ +

Interface ResetButtonProps

+
+

Hierarchy

+
    +
  • ButtonProps +
      +
    • ResetButtonProps
+
+
+
+ +
+
+

Properties

+
__css? +_active? +_activeLink? +_activeStep? +_after? +_autofill? +_before? +_checked? +_dark? +_disabled? +_empty? +_even? +_expanded? +_first? +_firstLetter? +_focus? +_focusVisible? +_focusWithin? +_fullScreen? +_grabbed? +_groupActive? +_groupChecked? +_groupDisabled? +_groupFocus? +_groupFocusVisible? +_groupFocusWithin? +_groupHover? +_groupInvalid? +_hidden? +_highlighted? +_hover? +_indeterminate? +_invalid? +_last? +_light? +_loading? +_ltr? +_mediaDark? +_mediaReduceMotion? +_notFirst? +_notLast? +_odd? +_peerActive? +_peerChecked? +_peerDisabled? +_peerFocus? +_peerFocusVisible? +_peerFocusWithin? +_peerHover? +_peerInvalid? +_peerPlaceholderShown? +_placeholder? +_placeholderShown? +_pressed? +_readOnly? +_rtl? +_selected? +_selection? +_valid? +_visited? +alignContent? +alignItems? +alignSelf? +animation? +appearance? +apply? +aria-activedescendant? +aria-atomic? +aria-autocomplete? +aria-busy? +aria-checked? +aria-colcount? +aria-colindex? +aria-colspan? +aria-controls? +aria-current? +aria-describedby? +aria-details? +aria-disabled? +aria-dropeffect? +aria-errormessage? +aria-expanded? +aria-flowto? +aria-grabbed? +aria-haspopup? +aria-hidden? +aria-invalid? +aria-keyshortcuts? +aria-label? +aria-labelledby? +aria-level? +aria-live? +aria-modal? +aria-multiline? +aria-multiselectable? +aria-orientation? +aria-owns? +aria-placeholder? +aria-posinset? +aria-pressed? +aria-readonly? +aria-relevant? +aria-required? +aria-roledescription? +aria-rowcount? +aria-rowindex? +aria-rowspan? +aria-selected? +aria-setsize? +aria-sort? +aria-valuemax? +aria-valuemin? +aria-valuenow? +aria-valuetext? +backdropBlur? +backdropBrightness? +backdropContrast? +backdropFilter? +backdropHueRotate? +backdropInvert? +backdropSaturate? +background? +backgroundAttachment? +backgroundBlendMode? +backgroundClip? +backgroundColor? +backgroundImage? +backgroundPosition? +backgroundRepeat? +backgroundSize? +bg? +bgAttachment? +bgBlendMode? +bgClip? +bgColor? +bgGradient? +bgImage? +bgImg? +bgPos? +bgPosition? +bgRepeat? +bgSize? +blendMode? +blur? +border? +borderBottom? +borderBottomColor? +borderBottomLeftRadius? +borderBottomRadius? +borderBottomRightRadius? +borderBottomStyle? +borderBottomWidth? +borderColor? +borderEndRadius? +borderInlineEndRadius? +borderInlineStartRadius? +borderLeft? +borderLeftColor? +borderLeftRadius? +borderLeftStyle? +borderLeftWidth? +borderRadius? +borderRight? +borderRightColor? +borderRightRadius? +borderRightStyle? +borderRightWidth? +borderStartRadius? +borderStyle? +borderTop? +borderTopColor? +borderTopLeftRadius? +borderTopRadius? +borderTopRightRadius? +borderTopStyle? +borderTopWidth? +borderWidth? +borderX? +borderY? +bottom? +boxDecorationBreak? +boxShadow? +boxSize? +boxSizing? +brightness? +clipPath? +color? +columnGap? +contrast? +control? +css? +cursor? +display? +dropShadow? +fill? +filter? +flex? +flexBasis? +flexDir? +flexDirection? +flexFlow? +flexGrow? +flexShrink? +flexWrap? +float? +fontFamily? +fontSize? +fontStyle? +fontWeight? +gap? +gridArea? +gridAutoColumns? +gridAutoFlow? +gridAutoRows? +gridColumn? +gridColumnEnd? +gridColumnGap? +gridColumnStart? +gridGap? +gridRow? +gridRowEnd? +gridRowGap? +gridRowStart? +gridTemplate? +gridTemplateAreas? +gridTemplateColumns? +gridTemplateRows? +h? +height? +hideBelow? +hideFrom? +hueRotate? +iconSpacing? +inputMode? +inset? +insetEnd? +insetInlineEnd? +insetStart? +insetX? +insetY? +invert? +is? +isActive? +isDisabled? +isLoading? +isTruncated? +isolation? +justifyContent? +justifyItems? +justifySelf? +layerStyle? +left? +leftIcon? +letterSpacing? +lineHeight? +listStyleImage? +listStyleImg? +listStylePos? +listStylePosition? +loadingText? +m? +margin? +marginBottom? +marginEnd? +marginInlineEnd? +marginInlineStart? +marginLeft? +marginRight? +marginStart? +marginTop? +marginX? +marginY? +maxH? +maxHeight? +maxW? +maxWidth? +mb? +me? +minH? +minHeight? +minW? +minWidth? +mixBlendMode? +ml? +mr? +ms? +mt? +mx? +my? +noOfLines? +objectFit? +objectPosition? +onKeyPress? +onKeyPressCapture? +opacity? +order? +outline? +outlineColor? +outlineOffset? +overflow? +overflowWrap? +overflowX? +overflowY? +overscroll? +overscrollBehavior? +overscrollBehaviorX? +overscrollBehaviorY? +overscrollX? +overscrollY? +p? +padding? +paddingBottom? +paddingEnd? +paddingInlineEnd? +paddingInlineStart? +paddingLeft? +paddingRight? +paddingStart? +paddingTop? +paddingX? +paddingY? +pb? +pe? +pl? +placeContent? +placeItems? +placeSelf? +pointerEvents? +pos? +position? +pr? +ps? +pt? +px? +py? +reset? +resize? +right? +rightIcon? +ring? +ringColor? +ringInset? +ringOffset? +ringOffsetColor? +rotate? +rounded? +roundedBottom? +roundedBottomLeft? +roundedBottomRight? +roundedEnd? +roundedLeft? +roundedRight? +roundedStart? +roundedTop? +roundedTopLeft? +roundedTopRight? +rowGap? +saturate? +scale? +scaleX? +scaleY? +shadow? +skewX? +skewY? +spinner? +spinnerPlacement? +srOnly? +stroke? +sx? +textAlign? +textColor? +textDecor? +textDecoration? +textDecorationColor? +textDecorationLine? +textDecorationStyle? +textDecorationThickness? +textIndent? +textOverflow? +textShadow? +textStyle? +textTransform? +textUnderlineOffset? +top? +transform? +transformOrigin? +transition? +transitionDelay? +transitionDuration? +transitionProperty? +transitionTimingFunction? +translateX? +translateY? +userSelect? +verticalAlign? +visibility? +w? +whiteSpace? +width? +willChange? +wordBreak? +zIndex? +
+
+

Properties

+
+

Optional Private __css

+
__css?: SystemStyleObject
+

Used for internal css management

+
+
+

Optional _active

+
_active?: SystemStyleObject
+

Styles for CSS Selector &:active

+
+
+

Optional _activeLink

+
_activeLink?: SystemStyleObject
+

Used to style the active link in a navigation +Styles for CSS Selector &[aria-current=page]

+
+
+

Optional _activeStep

+
_activeStep?: SystemStyleObject
+

Used to style the current step within a process +Styles for CSS Selector &[aria-current=step]

+
+
+

Optional _after

+
_after?: SystemStyleObject
+

Styles for CSS selector &::after

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _after={{content:`""` }}/>
+
+
+
+

Optional _autofill

+
_autofill?: SystemStyleObject
+

Styles for CSS Selector &:-webkit-autofill

+
+
+

Optional _before

+
_before?: SystemStyleObject
+

Styles for CSS selector &::before

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _before={{content:`""` }}/>
+
+
+
+

Optional _checked

+
_checked?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is true

+
    +
  • CSS selector &[aria-checked=true]
    • +
+
+
+

Optional _dark

+
_dark?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _disabled

+
_disabled?: SystemStyleObject
+

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

+
    +
  • &[aria-disabled=true]
    • +
  • &:disabled
    • +
  • &[data-disabled]
    • +
  • &[disabled]
    • +
+
+
+

Optional _empty

+
_empty?: SystemStyleObject
+

Styles for CSS selector &:empty

+
+
+

Optional _even

+
_even?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(even)

+
+
+

Optional _expanded

+
_expanded?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-expanded is true

+
    +
  • CSS selector &[aria-expanded=true]
    • +
+
+
+

Optional _first

+
_first?: SystemStyleObject
+

Styles for CSS Selector &:first-of-type

+
+
+

Optional _firstLetter

+
_firstLetter?: SystemStyleObject
+

Styles for CSS selector &::first-letter

+

NOTE: This selector is only applied for block-level elements and not preceded by an image or table.

+ +

Example

<Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
+
+
+
+

Optional _focus

+
_focus?: SystemStyleObject
+

Styles for CSS selector &:focus

+
+
+

Optional _focusVisible

+
_focusVisible?: SystemStyleObject
+

Styles to apply when this element has received focus via tabbing

+
    +
  • CSS Selector &:focus-visible
    • +
+
+
+

Optional _focusWithin

+
_focusWithin?: SystemStyleObject
+

Styles to apply when a child of this element has received focus

+
    +
  • CSS Selector &:focus-within
    • +
+
+
+

Optional _fullScreen

+
_fullScreen?: SystemStyleObject
+

Styles for CSS Selector &:fullscreen.

+
+
+

Optional _grabbed

+
_grabbed?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-grabbed is true

+
    +
  • CSS selector &[aria-grabbed=true]
    • +
+
+
+

Optional _groupActive

+
_groupActive?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is active

+
+
+

Optional _groupChecked

+
_groupChecked?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is checked

+
+
+

Optional _groupDisabled

+
_groupDisabled?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is disabled

+
+
+

Optional _groupFocus

+
_groupFocus?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is focused

+
+
+

Optional _groupFocusVisible

+
_groupFocusVisible?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has visible focus

+
+
+

Optional _groupFocusWithin

+
_groupFocusWithin?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has focus within

+
+
+

Optional _groupHover

+
_groupHover?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is hovered

+
+
+

Optional _groupInvalid

+
_groupInvalid?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is invalid

+
+
+

Optional _hidden

+
_hidden?: SystemStyleObject
+

Styles for CSS Selector [hidden=true]

+
+
+

Optional _highlighted

+
_highlighted?: SystemStyleObject
+

Styles for the highlighted state.

+
+
+

Optional _hover

+
_hover?: SystemStyleObject
+

Styles for CSS selector &:hover

+
+
+

Optional _indeterminate

+
_indeterminate?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is mixed

+
    +
  • CSS selector &[aria-checked=mixed]
    • +
+
+
+

Optional _invalid

+
_invalid?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-invalid is true

+
    +
  • CSS selector &[aria-invalid=true]
    • +
+
+
+

Optional _last

+
_last?: SystemStyleObject
+

Styles for CSS Selector &:last-of-type

+
+
+

Optional _light

+
_light?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _loading

+
_loading?: SystemStyleObject
+

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. +Useful for styling loading states

+
+
+

Optional _ltr

+
_ltr?: SystemStyleObject
+

Styles for CSS Selector [dir=ltr] & +It is applied when a parent element or this element has dir="ltr"

+
+
+

Optional _mediaDark

+
_mediaDark?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-color-scheme: dark) +It is used when the user has requested the system use a light or dark color theme.

+
+
+

Optional _mediaReduceMotion

+
_mediaReduceMotion?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-reduced-motion: reduce) +It is used when the user has requested the system to reduce the amount of animations.

+
+
+

Optional _notFirst

+
_notFirst?: SystemStyleObject
+

Styles for CSS Selector &:not(:first-of-type)

+
+
+

Optional _notLast

+
_notLast?: SystemStyleObject
+

Styles for CSS Selector &:not(:last-of-type)

+
+
+

Optional _odd

+
_odd?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(odd)

+
+
+

Optional _peerActive

+
_peerActive?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is active

+
+
+

Optional _peerChecked

+
_peerChecked?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is checked

+
+
+

Optional _peerDisabled

+
_peerDisabled?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is disabled

+
+
+

Optional _peerFocus

+
_peerFocus?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is focused

+
+
+

Optional _peerFocusVisible

+
_peerFocusVisible?: SystemStyleObject
+

Styles to apply when a sibling element with .peeror data-peer has visible focus

+
+
+

Optional _peerFocusWithin

+
_peerFocusWithin?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has focus within

+
+
+

Optional _peerHover

+
_peerHover?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is hovered

+
+
+

Optional _peerInvalid

+
_peerInvalid?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is invalid

+
+
+

Optional _peerPlaceholderShown

+
_peerPlaceholderShown?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

+
+
+

Optional _placeholder

+
_placeholder?: SystemStyleObject
+

Styles for CSS Selector &::placeholder.

+
+
+

Optional _placeholderShown

+
_placeholderShown?: SystemStyleObject
+

Styles for CSS Selector &:placeholder-shown.

+
+
+

Optional _pressed

+
_pressed?: SystemStyleObject
+

Styles for CSS Selector &[aria-pressed=true] +Typically used to style the current "pressed" state of toggle buttons

+
+
+

Optional _readOnly

+
_readOnly?: SystemStyleObject
+

Styles for CSS Selector &:readonly

+
+
+

Optional _rtl

+
_rtl?: SystemStyleObject
+

Styles for CSS Selector [dir=rtl] & +It is applied when a parent element or this element has dir="rtl"

+
+
+

Optional _selected

+
_selected?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-selected is true

+
    +
  • CSS selector &[aria-selected=true]
    • +
+
+
+

Optional _selection

+
_selection?: SystemStyleObject
+

Styles for CSS Selector &::selection

+
+
+

Optional _valid

+
_valid?: SystemStyleObject
+

Styles for the valid state

+
    +
  • CSS selector &[data-valid], &[data-state=valid]
    • +
+
+
+

Optional _visited

+
_visited?: SystemStyleObject
+

Styles for CSS Selector &:visited

+
+
+

Optional alignContent

+
alignContent?: ResponsiveValue<AlignContent>
+

The CSS align-content property.

+

It defines the distribution of space between and around +content items along a flexbox cross-axis or a grid's block axis.

+ +

See

Mozilla Docs

+
+
+

Optional alignItems

+
alignItems?: ResponsiveValue<AlignItems>
+

The CSS align-items property.

+

It defines the align-self value on all direct children as a group.

+
    +
  • In Flexbox, it controls the alignment of items on the Cross Axis.
    • +
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
    • +
+ +

See

Mozilla Docs

+
+
+

Optional alignSelf

+
alignSelf?: ResponsiveValue<AlignSelf>
+

The CSS align-self property.

+

It works like align-items, but applies only to a +single flexbox item, instead of all of them.

+ +

See

Mozilla Docs

+
+
+

Optional animation

+
animation?: ResponsiveValue<Animation<string & {}>>
+

The CSS animation property

+
+
+

Optional appearance

+
appearance?: ResponsiveValue<Appearance>
+

The CSS appearance property

+
+
+

Optional apply

+
apply?: ResponsiveValue<string>
+

Apply theme-aware style objects in theme

+ +

Example

<Box apply="styles.h3">This is a div</Box>
+
+

This will apply styles defined in theme.styles.h3

+
+
+

Optional aria-activedescendant

+
aria-activedescendant?: string
+

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

+
+
+

Optional aria-atomic

+
aria-atomic?: Booleanish
+

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

+
+
+

Optional aria-autocomplete

+
aria-autocomplete?: "none" | "both" | "inline" | "list"
+

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be +presented if they are made.

+
+
+

Optional aria-busy

+
aria-busy?: Booleanish
+

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

+
+
+

Optional aria-checked

+
aria-checked?: boolean | "true" | "false" | "mixed"
+

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

+ +

See

    +
  • aria-pressed
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-colcount

+
aria-colcount?: number
+

Defines the total number of columns in a table, grid, or treegrid.

+ +

See

aria-colindex.

+
+
+

Optional aria-colindex

+
aria-colindex?: number
+

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

+ +

See

    +
  • aria-colcount
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-colspan

+
aria-colspan?: number
+

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-colindex
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-controls

+
aria-controls?: string
+

Identifies the element (or elements) whose contents or presence are controlled by the current element.

+ +

See

aria-owns.

+
+
+

Optional aria-current

+
aria-current?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"
+

Indicates the element that represents the current item within a container or set of related elements.

+
+
+

Optional aria-describedby

+
aria-describedby?: string
+

Identifies the element (or elements) that describes the object.

+ +

See

aria-labelledby

+
+
+

Optional aria-details

+
aria-details?: string
+

Identifies the element that provides a detailed, extended description for the object.

+ +

See

aria-describedby.

+
+
+

Optional aria-disabled

+
aria-disabled?: Booleanish
+

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

+ +

See

    +
  • aria-hidden
    • +
  • aria-readonly.
    • +
+
+
+

Optional aria-dropeffect

+
aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"
+

Indicates what functions can be performed when a dragged object is released on the drop target.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-errormessage

+
aria-errormessage?: string
+

Identifies the element that provides an error message for the object.

+ +

See

    +
  • aria-invalid
    • +
  • aria-describedby.
    • +
+
+
+

Optional aria-expanded

+
aria-expanded?: Booleanish
+

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

+
+
+

Optional aria-flowto

+
aria-flowto?: string
+

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, +allows assistive technology to override the general default of reading in document source order.

+
+
+

Optional aria-grabbed

+
aria-grabbed?: Booleanish
+

Indicates an element's "grabbed" state in a drag-and-drop operation.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-haspopup

+
aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "true" | "false" | "tree"
+

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

+
+
+

Optional aria-hidden

+
aria-hidden?: Booleanish
+

Indicates whether the element is exposed to an accessibility API.

+ +

See

aria-disabled.

+
+
+

Optional aria-invalid

+
aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"
+

Indicates the entered value does not conform to the format expected by the application.

+ +

See

aria-errormessage.

+
+
+

Optional aria-keyshortcuts

+
aria-keyshortcuts?: string
+

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

+
+
+

Optional aria-label

+
aria-label?: string
+

Defines a string value that labels the current element.

+ +

See

aria-labelledby.

+
+
+

Optional aria-labelledby

+
aria-labelledby?: string
+

Identifies the element (or elements) that labels the current element.

+ +

See

aria-describedby.

+
+
+

Optional aria-level

+
aria-level?: number
+

Defines the hierarchical level of an element within a structure.

+
+
+

Optional aria-live

+
aria-live?: "off" | "assertive" | "polite"
+

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

+
+
+

Optional aria-modal

+
aria-modal?: Booleanish
+

Indicates whether an element is modal when displayed.

+
+
+

Optional aria-multiline

+
aria-multiline?: Booleanish
+

Indicates whether a text box accepts multiple lines of input or only a single line.

+
+
+

Optional aria-multiselectable

+
aria-multiselectable?: Booleanish
+

Indicates that the user may select more than one item from the current selectable descendants.

+
+
+

Optional aria-orientation

+
aria-orientation?: "horizontal" | "vertical"
+

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

+
+
+

Optional aria-owns

+
aria-owns?: string
+

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship +between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

+ +

See

aria-controls.

+
+
+

Optional aria-placeholder

+
aria-placeholder?: string
+

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. +A hint could be a sample value or a brief description of the expected format.

+
+
+

Optional aria-posinset

+
aria-posinset?: number
+

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-setsize.

+
+
+

Optional aria-pressed

+
aria-pressed?: boolean | "true" | "false" | "mixed"
+

Indicates the current "pressed" state of toggle buttons.

+ +

See

    +
  • aria-checked
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-readonly

+
aria-readonly?: Booleanish
+

Indicates that the element is not editable, but is otherwise operable.

+ +

See

aria-disabled.

+
+
+

Optional aria-relevant

+
aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
+

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

+ +

See

aria-atomic.

+
+
+

Optional aria-required

+
aria-required?: Booleanish
+

Indicates that user input is required on the element before a form may be submitted.

+
+
+

Optional aria-roledescription

+
aria-roledescription?: string
+

Defines a human-readable, author-localized description for the role of an element.

+
+
+

Optional aria-rowcount

+
aria-rowcount?: number
+

Defines the total number of rows in a table, grid, or treegrid.

+ +

See

aria-rowindex.

+
+
+

Optional aria-rowindex

+
aria-rowindex?: number
+

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowcount
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-rowspan

+
aria-rowspan?: number
+

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowindex
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-selected

+
aria-selected?: Booleanish
+

Indicates the current "selected" state of various widgets.

+ +

See

    +
  • aria-checked
    • +
  • aria-pressed.
    • +
+
+
+

Optional aria-setsize

+
aria-setsize?: number
+

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-posinset.

+
+
+

Optional aria-sort

+
aria-sort?: "none" | "ascending" | "descending" | "other"
+

Indicates if items in a table or grid are sorted in ascending or descending order.

+
+
+

Optional aria-valuemax

+
aria-valuemax?: number
+

Defines the maximum allowed value for a range widget.

+
+
+

Optional aria-valuemin

+
aria-valuemin?: number
+

Defines the minimum allowed value for a range widget.

+
+
+

Optional aria-valuenow

+
aria-valuenow?: number
+

Defines the current value for a range widget.

+ +

See

aria-valuetext.

+
+
+

Optional aria-valuetext

+
aria-valuetext?: string
+

Defines the human readable text alternative of aria-valuenow for a range widget.

+
+
+

Optional backdropBlur

+
backdropBlur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the backdrop-blur filter value of an element. +Value is assigned to --chakra-backdrop-blur css variable

+
+
+

Optional backdropBrightness

+
backdropBrightness?: ResponsiveValue<Length>
+

Sets the backdrop-brightness filter value of an element. +Value is assigned to --chakra-backdrop-brightness css variable

+
+
+

Optional backdropContrast

+
backdropContrast?: ResponsiveValue<Length>
+

Sets the backdrop-contrast filter value of an element. +Value is assigned to --chakra-backdrop-contrast css variable

+
+
+

Optional backdropFilter

+
backdropFilter?: ResponsiveValue<"auto" | BackdropFilter>
+

The CSS backdrop-filter property. When set to auto, you allow +Chakra UI to define the color based on the backdrop filter style props +(backdropBlur, backdropSaturate, etc.)

+
+
+

Optional backdropHueRotate

+
backdropHueRotate?: ResponsiveValue<Length>
+

Sets the backdrop-hue-rotate filter value of an element. +Value is assigned to --chakra-backdrop-hue-rotate css variable

+
+
+

Optional backdropInvert

+
backdropInvert?: ResponsiveValue<Length>
+

Sets the backdrop-invert filter value of an element. +Value is assigned to --chakra-backdrop-invert css variable

+
+
+

Optional backdropSaturate

+
backdropSaturate?: ResponsiveValue<Length>
+

Sets the backdrop-saturate filter value of an element. +Value is assigned to --chakra-backdrop-saturate css variable

+
+
+

Optional background

+
background?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional backgroundAttachment

+
backgroundAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional backgroundBlendMode

+
backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional backgroundClip

+
backgroundClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional backgroundColor

+
backgroundColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional backgroundImage

+
backgroundImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional backgroundPosition

+
backgroundPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional backgroundRepeat

+
backgroundRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional backgroundSize

+
backgroundSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional bg

+
bg?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional bgAttachment

+
bgAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional bgBlendMode

+
bgBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional bgClip

+
bgClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional bgColor

+
bgColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional bgGradient

+
bgGradient?: ResponsiveValue<string | string & {}>
+

The background-gradient shorthand

+
+
+

Optional bgImage

+
bgImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgImg

+
bgImg?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgPos

+
bgPos?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgPosition

+
bgPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgRepeat

+
bgRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional bgSize

+
bgSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional blendMode

+
blendMode?: ResponsiveValue<MixBlendMode>
+

The blend-mode property

+
+
+

Optional blur

+
blur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the blur filter value of an element. +Value is assigned to --chakra-filter css variable

+
+
+

Optional border

+
border?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border property

+
+
+

Optional borderBottom

+
borderBottom?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-bottom property

+
+
+

Optional borderBottomColor

+
borderBottomColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderBottomColor>
+

The CSS border-bottom-color property

+
+
+

Optional borderBottomLeftRadius

+
borderBottomLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional borderBottomRadius

+
borderBottomRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional borderBottomRightRadius

+
borderBottomRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional borderBottomStyle

+
borderBottomStyle?: ResponsiveValue<BorderBottomStyle>
+

The CSS border-bottom-style property

+
+
+

Optional borderBottomWidth

+
borderBottomWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-bottom-width property

+
+
+

Optional borderColor

+
borderColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-color property

+
+
+

Optional borderEndRadius

+
borderEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineEndRadius

+
borderInlineEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderInlineEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineStartRadius

+
borderInlineStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderInlineStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderLeft

+
borderLeft?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-left property

+
+
+

Optional borderLeftColor

+
borderLeftColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderLeftColor>
+

The CSS border-left-color property

+
+
+

Optional borderLeftRadius

+
borderLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional borderLeftStyle

+
borderLeftStyle?: ResponsiveValue<BorderLeftStyle>
+

The CSS border-left-style property

+
+
+

Optional borderLeftWidth

+
borderLeftWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-left-width property

+
+
+

Optional borderRadius

+
borderRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional borderRight

+
borderRight?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right property

+
+
+

Optional borderRightColor

+
borderRightColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderRightColor>
+

The CSS border-right-color property

+
+
+

Optional borderRightRadius

+
borderRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional borderRightStyle

+
borderRightStyle?: ResponsiveValue<BorderRightStyle>
+

The CSS border-right-styles property

+
+
+

Optional borderRightWidth

+
borderRightWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-right-width property

+
+
+

Optional borderStartRadius

+
borderStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderStyle

+
borderStyle?: ResponsiveValue<BorderStyle>
+

The CSS border-style property

+
+
+

Optional borderTop

+
borderTop?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top property

+
+
+

Optional borderTopColor

+
borderTopColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-top-color property

+
+
+

Optional borderTopLeftRadius

+
borderTopLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional borderTopRadius

+
borderTopRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional borderTopRightRadius

+
borderTopRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional borderTopStyle

+
borderTopStyle?: ResponsiveValue<BorderTopStyle>
+

The CSS border-top-style property

+
+
+

Optional borderTopWidth

+
borderTopWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-top-width property

+
+
+

Optional borderWidth

+
borderWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-width property

+
+
+

Optional borderX

+
borderX?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right and border-left property

+
+
+

Optional borderY

+
borderY?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top and border-bottom property

+
+
+

Optional bottom

+
bottom?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS bottom property

+
+
+

Optional boxDecorationBreak

+
boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>
+

The CSS box-decoration property

+
+
+

Optional boxShadow

+
boxShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional boxSize

+
boxSize?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width and height property

+
+
+

Optional boxSizing

+
boxSizing?: BoxSizing
+

The CSS box-sizing property

+
+
+

Optional brightness

+
brightness?: ResponsiveValue<Length>
+

Sets the brightness filter value of an element. +Value is assigned to --chakra-brightness css variable

+
+
+

Optional clipPath

+
clipPath?: ResponsiveValue<ClipPath>
+

The CSS clip-path property.

+

It creates a clipping region that sets what part of an element should be shown.

+
+
+

Optional color

+
color?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional columnGap

+
columnGap?: ResponsiveValue<ColumnGap<Length>>
+

The CSS column-gap property.

+

It sets the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional contrast

+
contrast?: ResponsiveValue<Length>
+

Sets the contrast filter value of an element. +Value is assigned to --chakra-contrast css variable

+
+
+

Optional control

+
control?: Control<any, any>
+

The control passed down from react-hook-form. +Only required if not using FormProvider

+
+
+

Optional css

+
css?: Interpolation<{}>
+

The emotion's css style object

+
+
+

Optional cursor

+
cursor?: ResponsiveValue<Cursor>
+

The CSS cursor property

+
+
+

Optional display

+
display?: ResponsiveValue<Display>
+

The CSS display property

+
+
+

Optional dropShadow

+
dropShadow?: ResponsiveValue<"base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

Sets the drop-shadow filter value of an element. +Value is assigned to --chakra-drop-shadow css variable

+
+
+

Optional fill

+
fill?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS fill property for icon svgs and paths

+
+
+

Optional filter

+
filter?: ResponsiveValue<Filter | "auto">
+

The CSS filter property. When set to auto, you allow +Chakra UI to define the color based on the filter style props +(blur, saturate, etc.)

+
+
+

Optional flex

+
flex?: ResponsiveValue<Flex<Length>>
+

The CSS flex property.

+

It defines how a flex item will grow or shrink +to fit the space available in its flex container.

+ +

See

Mozilla Docs

+
+
+

Optional flexBasis

+
flexBasis?: ResponsiveValue<FlexBasis<Length>>
+

The CSS flex-basis property.

+

It defines the initial main size of a flex item.

+ +

See

Mozilla Docs

+
+
+

Optional flexDir

+
flexDir?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexDirection

+
flexDirection?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexFlow

+
flexFlow?: ResponsiveValue<FlexFlow>
+

The CSS flex-flow property.

+

It is a shorthand property for flex-direction and flex-wrap. +It specifies the direction of a flex container, as well as its wrapping behavior.

+ +

See

Mozilla Docs

+
+
+

Optional flexGrow

+
flexGrow?: ResponsiveValue<FlexGrow>
+

The CSS flex-grow property.

+

It defines how much a flexbox item should grow +if there's space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexShrink

+
flexShrink?: ResponsiveValue<FlexShrink>
+

The CSS flex-shrink property.

+

It defines how much a flexbox item should shrink +if there's not enough space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexWrap

+
flexWrap?: ResponsiveValue<FlexWrap>
+

The CSS flex-wrap property.

+

It defines whether flex items are forced onto one line or +can wrap onto multiple lines. If wrapping is allowed, +it sets the direction that lines are stacked.

+ +

See

Mozilla Docs

+
+
+

Optional float

+
float?: ResponsiveValue<Float>
+

The CSS float property

+
+
+

Optional fontFamily

+
fontFamily?: ResponsiveValue<"body" | FontFamily | "heading" | "mono">
+

The CSS font-family property

+
+
+

Optional fontSize

+
fontSize?: ResponsiveValue<number | "small" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl">
+

The CSS font-size property

+
+
+

Optional fontStyle

+
fontStyle?: ResponsiveValue<FontStyle>
+

The CSS font-style property

+
+
+

Optional fontWeight

+
fontWeight?: ResponsiveValue<number | "bold" | string & {} | "black" | "normal" | "hairline" | "thin" | "light" | "medium" | "semibold" | "extrabold">
+

The CSS font-weight property

+
+
+

Optional gap

+
gap?: ResponsiveValue<Gap<Length>>
+

The CSS gap property.

+

It defines the gap between items in both flex and +grid contexts.

+ +

See

Mozilla Docs

+
+
+

Optional gridArea

+
gridArea?: ResponsiveValue<GridArea>
+

The CSS grid-areas property.

+

It specifies a grid item’s size and location within a grid by +contributing a line, a span, or nothing (automatic) +to its grid placement, thereby specifying the edges of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoColumns

+
gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>
+

The CSS grid-auto-columns property.

+

It specifies the size of an implicitly-created grid column track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoFlow

+
gridAutoFlow?: ResponsiveValue<GridAutoFlow>
+

The CSS grid-auto-flow property

+

It controls how the auto-placement algorithm works, +specifying exactly how auto-placed items get flowed into the grid.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoRows

+
gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>
+

The CSS grid-auto-rows property.

+

It specifies the size of an implicitly-created grid row track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumn

+
gridColumn?: ResponsiveValue<GridColumn>
+

The CSS grid-column property.

+

It specifies a grid item's size and location within a grid column +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnEnd

+
gridColumnEnd?: ResponsiveValue<GridColumnEnd>
+

The CSS grid-column property

+

It specifies a grid item’s end position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the block-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnGap

+
gridColumnGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-column-gap property.

+

It defines the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnStart

+
gridColumnStart?: ResponsiveValue<GridColumnStart>
+

The CSS grid-column property.

+

It specifies a grid item’s start position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement

+ +

See

Mozilla Docs

+
+
+

Optional gridGap

+
gridGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-gap property.

+

It defines the gaps (gutters) between rows and columns

+ +

See

Mozilla Docs

+
+
+

Optional gridRow

+
gridRow?: ResponsiveValue<GridRow>
+

The CSS grid-row property

+

It specifies a grid item’s size and location within the grid row +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowEnd

+
gridRowEnd?: ResponsiveValue<GridRowEnd>
+

The CSS grid-row-end property

+

It specifies a grid item’s end position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowGap

+
gridRowGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-row-gap property.

+

It defines the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowStart

+
gridRowStart?: ResponsiveValue<GridRowStart>
+

The CSS grid-row-start property

+

It specifies a grid item’s start position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplate

+
gridTemplate?: ResponsiveValue<GridTemplate>
+

The CSS grid-template property.

+

It is a shorthand property for defining grid columns, rows, and areas.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateAreas

+
gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>
+

The CSS grid-template-areas property.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateColumns

+
gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>
+

The CSS grid-template-columns property

+

It defines the line names and track sizing functions of the grid columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateRows

+
gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>
+

The CSS grid-template-rows property.

+

It defines the line names and track sizing functions of the grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional h

+
h?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional height

+
height?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional hideBelow

+
hideBelow?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element below the specified breakpoint

+
+
+

Optional hideFrom

+
hideFrom?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element from the specified breakpoint and up

+
+
+

Optional hueRotate

+
hueRotate?: ResponsiveValue<Length>
+

Sets the hue-rotate filter value of an element. +Value is assigned to --chakra-hue-rotate css variable

+
+
+

Optional iconSpacing

+
iconSpacing?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

The space between the button icon and label.

+
+
+

Optional inputMode

+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
+

Hints at the type of data that might be entered by the user while editing the element or its contents

+ +

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

+
+
+

Optional inset

+
inset?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, right, top, bottom property

+
+
+

Optional insetEnd

+
insetEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetEnd is equivalent to right. +When the direction is rtl, insetEnd is equivalent to left.

+
+
+

Optional insetInlineEnd

+
insetInlineEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetInlineEnd is equivalent to right. +When the direction is rtl, insetInlineEnd is equivalent to left.

+
+
+

Optional insetStart

+
insetStart?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is start, end is equivalent to left. +When the direction is start, end is equivalent to right.

+
+
+

Optional insetX

+
insetX?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, and right property

+
+
+

Optional insetY

+
insetY?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top, and bottom property

+
+
+

Optional invert

+
invert?: ResponsiveValue<Length>
+

Sets the invert filter value of an element. +Value is assigned to --chakra-invert css variable

+
+
+

Optional is

+
is?: string
+

Specify that a standard HTML element should behave like a defined custom built-in element

+ +

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

+
+
+

Optional isActive

+
isActive?: boolean
+

If true, the button will be styled in its active state.

+ +

Default

false

+
+
+

Optional isDisabled

+
isDisabled?: boolean
+

If true, the button will be disabled.

+ +

Default

false

+
+
+

Optional isLoading

+
isLoading?: boolean
+

If true, the button will show a spinner.

+ +

Default

false

+
+
+

Optional isTruncated

+
isTruncated?: boolean
+

If true, it clamps truncate a text after one line.

+
+
+

Optional isolation

+
isolation?: ResponsiveValue<Isolation>
+

The CSS isolation property

+
+
+

Optional justifyContent

+
justifyContent?: ResponsiveValue<JustifyContent>
+

The CSS justify-content property.

+

It defines how the browser distributes space between and around content items +along the main-axis of a flex container, and the inline axis of a grid container.

+ +

See

Mozilla Docs

+
+
+

Optional justifyItems

+
justifyItems?: ResponsiveValue<JustifyItems>
+

The CSS justify-items property.

+

It defines the default justify-self for all items of the box, +giving them all a default way of justifying each box +along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional justifySelf

+
justifySelf?: ResponsiveValue<JustifySelf>
+

The CSS justify-self property.

+

It defines the way a box is justified inside its +alignment container along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional layerStyle

+
layerStyle?: ResponsiveValue<string & {}>
+

The layer style object to apply. +Note: Styles must be located in theme.layerStyles

+
+
+

Optional left

+
left?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left property

+
+
+

Optional leftIcon

+
leftIcon?: ReactElement<any, string | JSXElementConstructor<any>>
+

If added, the button will show an icon before the button's label.

+
+
+

Optional letterSpacing

+
letterSpacing?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "tighter" | "tight" | "wide" | "wider" | "widest">
+

The CSS letter-spacing property

+
+
+

Optional lineHeight

+
lineHeight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "none" | "normal" | number & {} | "shorter" | "short" | "tall" | "taller">
+

The CSS line-height property

+
+
+

Optional listStyleImage

+
listStyleImage?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStyleImg

+
listStyleImg?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStylePos

+
listStylePos?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional listStylePosition

+
listStylePosition?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional loadingText

+
loadingText?: ReactNode
+

The label to show in the button when isLoading is true +If no text is passed, it only shows the spinner

+
+
+

Optional m

+
m?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional margin

+
margin?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional marginBottom

+
marginBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional marginEnd

+
marginEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginEnd is equivalent to marginRight. +When direction is rtl, marginEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineEnd

+
marginInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineEnd is equivalent to marginRight. +When direction is rtl, marginInlineEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineStart

+
marginInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineStart is equivalent to marginLeft. +When direction is rtl, marginInlineStart is equivalent to marginRight.

+
+
+

Optional marginLeft

+
marginLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional marginRight

+
marginRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional marginStart

+
marginStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginStart is equivalent to marginLeft. +When direction is rtl, marginStart is equivalent to marginRight.

+
+
+

Optional marginTop

+
marginTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional marginX

+
marginX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional marginY

+
marginY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

Optional maxH

+
maxH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxHeight

+
maxHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxW

+
maxW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional maxWidth

+
maxWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional mb

+
mb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional me

+
me?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, me is equivalent to marginRight. +When direction is rtl, me is equivalent to marginLeft.

+
+
+

Optional minH

+
minH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minHeight

+
minHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minW

+
minW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional minWidth

+
minWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional mixBlendMode

+
mixBlendMode?: ResponsiveValue<MixBlendMode>
+

The mix-blend-mode property

+
+
+

Optional ml

+
ml?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional mr

+
mr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional ms

+
ms?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, ms is equivalent to marginLeft. +When direction is rtl, ms is equivalent to marginRight.

+
+
+

Optional mt

+
mt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional mx

+
mx?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional my

+
my?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

Optional noOfLines

+
noOfLines?: ResponsiveValue<number>
+

Used to truncate text at a specific number of lines

+
+
+

Optional objectFit

+
objectFit?: ResponsiveValue<ObjectFit>
+

The CSS object-fit property

+
+
+

Optional objectPosition

+
objectPosition?: ResponsiveValue<ObjectPosition<Length>>
+

The CSS object-position property

+
+
+

Optional onKeyPress

+
onKeyPress?: KeyboardEventHandler<HTMLButtonElement>
+
+

Deprecated

+
+

Optional onKeyPressCapture

+
onKeyPressCapture?: KeyboardEventHandler<HTMLButtonElement>
+
+

Deprecated

+
+

Optional opacity

+
opacity?: ResponsiveValue<Opacity>
+

The CSS opacity property

+
+
+

Optional order

+
order?: ResponsiveValue<Order>
+

The CSS order property.

+

It defines the order to lay out an item in a flex or grid container.

+ +

See

Mozilla Docs

+
+
+

Optional outline

+
outline?: ResponsiveValue<Outline<Length>>
+

The CSS outline property

+
+
+

Optional outlineColor

+
outlineColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS outline-color property

+
+
+

Optional outlineOffset

+
outlineOffset?: ResponsiveValue<OutlineOffset<Length>>
+

The CSS outline-offset property

+
+
+

Optional overflow

+
overflow?: ResponsiveValue<Overflow>
+

The CSS overflow property

+
+
+

Optional overflowWrap

+
overflowWrap?: ResponsiveValue<OverflowWrap>
+

The CSS overflow-wrap property

+
+
+

Optional overflowX

+
overflowX?: ResponsiveValue<OverflowX>
+

The CSS overflow-x property

+
+
+

Optional overflowY

+
overflowY?: ResponsiveValue<OverflowY>
+

The CSS overflow-y property

+
+
+

Optional overscroll

+
overscroll?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehavior

+
overscrollBehavior?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehaviorX

+
overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollBehaviorY

+
overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional overscrollX

+
overscrollX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollY

+
overscrollY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional p

+
p?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional padding

+
padding?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional paddingBottom

+
paddingBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional paddingEnd

+
paddingEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingEnd is equivalent to paddingRight. +When direction is rtl, paddingEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineEnd

+
paddingInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineEnd is equivalent to paddingRight. +When direction is rtl, paddingInlineEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineStart

+
paddingInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineStart is equivalent to paddingLeft. +When direction is rtl, paddingInlineStart is equivalent to paddingRight.

+
+
+

Optional paddingLeft

+
paddingLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional paddingRight

+
paddingRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional paddingStart

+
paddingStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingStart is equivalent to paddingLeft. +When direction is rtl, paddingStart is equivalent to paddingRight.

+
+
+

Optional paddingTop

+
paddingTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional paddingX

+
paddingX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional paddingY

+
paddingY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional pb

+
pb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional pe

+
pe?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, pe is equivalent to paddingRight. +When direction is rtl, pe is equivalent to paddingLeft.

+
+
+

Optional pl

+
pl?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional placeContent

+
placeContent?: ResponsiveValue<PlaceContent>
+

The CSS place-content property.

+

It allows you to align content along both the block and +inline directions at once (i.e. the align-content and justify-content properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional placeItems

+
placeItems?: ResponsiveValue<PlaceItems>
+

The CSS place-items property.

+

It allows you to align items along both the block and +inline directions at once (i.e. the align-items and justify-items properties) +in a relevant layout system such as Grid or Flex.

+ +

See

Mozilla Docs

+
+
+

Optional placeSelf

+
placeSelf?: ResponsiveValue<PlaceSelf>
+

The CSS place-self property.

+

It allows you to align an individual item in both the block and +inline directions at once (i.e. the align-self and justify-self properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional pointerEvents

+
pointerEvents?: ResponsiveValue<PointerEvents>
+

The CSS pointer-events property

+
+
+

Optional pos

+
pos?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional position

+
position?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional pr

+
pr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional ps

+
ps?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, ps is equivalent to paddingLeft. +When direction is rtl, ps is equivalent to paddingRight.

+
+
+

Optional pt

+
pt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional px

+
px?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional py

+
py?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional reset

+
reset?: UseFormReset<any>
+

The reset method (passed down from react-hook-forms useForm) +Only required if not using FormProvider

+
+
+

Optional resize

+
resize?: ResponsiveValue<Resize>
+

The CSS resize property

+
+
+

Optional right

+
right?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS right property

+
+
+

Optional rightIcon

+
rightIcon?: ReactElement<any, string | JSXElementConstructor<any>>
+

If added, the button will show an icon after the button's label.

+
+
+

Optional ring

+
ring?: ResponsiveValue<Length>
+

Creates outline rings with CSS box-shadow property

+
+
+

Optional ringColor

+
ringColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the outline ring

+
+
+

Optional ringInset

+
ringInset?: ResponsiveValue<"inset" | "none">
+

If the outline ring should an inset

+
+
+

Optional ringOffset

+
ringOffset?: ResponsiveValue<Length>
+

The thickness of the offset shadow when using outline rings

+
+
+

Optional ringOffsetColor

+
ringOffsetColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the offset shadow when adding outline rings

+
+
+

Optional rotate

+
rotate?: ResponsiveValue<Length>
+

Sets the rotation value of the element

+
+
+

Optional rounded

+
rounded?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional roundedBottom

+
roundedBottom?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional roundedBottomLeft

+
roundedBottomLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional roundedBottomRight

+
roundedBottomRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional roundedEnd

+
roundedEnd?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedLeft

+
roundedLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional roundedRight

+
roundedRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional roundedStart

+
roundedStart?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedTop

+
roundedTop?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional roundedTopLeft

+
roundedTopLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional roundedTopRight

+
roundedTopRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional rowGap

+
rowGap?: ResponsiveValue<RowGap<Length>>
+

The CSS row-gap property.

+

It sets the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional saturate

+
saturate?: ResponsiveValue<Length>
+

Sets the saturation filter value of an element. +Value is assigned to --chakra-saturate css variable

+
+
+

Optional scale

+
scale?: ResponsiveValue<Length>
+

Sets the scale value of the element

+
+
+

Optional scaleX

+
scaleX?: ResponsiveValue<Length>
+

Scale value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-x
    • +
+
+
+

Optional scaleY

+
scaleY?: ResponsiveValue<Length>
+

Scale value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-y
    • +
+
+
+

Optional shadow

+
shadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional skewX

+
skewX?: ResponsiveValue<Length>
+

Skew value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-x
    • +
+
+
+

Optional skewY

+
skewY?: ResponsiveValue<Length>
+

Skew value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-y
    • +
+
+
+

Optional spinner

+
spinner?: ReactElement<any, string | JSXElementConstructor<any>>
+

Replace the spinner component when isLoading is set to true

+
+
+

Optional spinnerPlacement

+
spinnerPlacement?: "end" | "start"
+

It determines the placement of the spinner when isLoading is true

+ +

Default

"start"

+
+
+

Optional srOnly

+
srOnly?: true | "focusable"
+

If true, hide an element visually without hiding it from screen readers.

+

If focusable, the sr-only styles will be undone, making the element visible +to sighted users as well as screen readers.

+
+
+

Optional stroke

+
stroke?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS stroke property for icon svgs and paths

+
+
+

Optional sx

+
sx?: SystemStyleObject
+

Used to pass theme-aware style props. +NB: This is the public API for user-land

+
+
+

Optional textAlign

+
textAlign?: ResponsiveValue<TextAlign>
+

The CSS text-align property

+
+
+

Optional textColor

+
textColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional textDecor

+
textDecor?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecoration

+
textDecoration?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecorationColor

+
textDecorationColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | TextDecorationColor>
+

The CSS text-decoration-color property

+
+
+

Optional textDecorationLine

+
textDecorationLine?: ResponsiveValue<TextDecorationLine>
+

The CSS text-decoration-line property

+
+
+

Optional textDecorationStyle

+
textDecorationStyle?: ResponsiveValue<TextDecorationStyle>
+

The CSS text-decoration-style property

+
+
+

Optional textDecorationThickness

+
textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>
+

The CSS text-decoration-thickness property

+
+
+

Optional textIndent

+
textIndent?: ResponsiveValue<TextIndent<0 | string & {}>>
+

The CSS text-indent property

+
+
+

Optional textOverflow

+
textOverflow?: ResponsiveValue<TextOverflow>
+

The CSS text-overflow property

+
+
+

Optional textShadow

+
textShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "inner" | "dark-lg" | TextShadow>
+

The text-shadow property

+
+
+

Optional textStyle

+
textStyle?: ResponsiveValue<string & {}>
+

The text style object to apply. +Note: Styles must be located in theme.textStyles

+
+
+

Optional textTransform

+
textTransform?: ResponsiveValue<TextTransform>
+

The CSS text-transform property

+
+
+

Optional textUnderlineOffset

+
textUnderlineOffset?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto">
+

The CSS text-underline-offset property

+
+
+

Optional top

+
top?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top property

+
+
+

Optional transform

+
transform?: ResponsiveValue<"auto" | Transform | "auto-gpu">
+

The CSS transform property

+
+
+

Optional transformOrigin

+
transformOrigin?: ResponsiveValue<number | "center" | "px" | "top" | "right" | "bottom" | "left" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS transform-origin property

+
+
+

Optional transition

+
transition?: ResponsiveValue<Transition<string & {}>>
+

The CSS transition property

+
+
+

Optional transitionDelay

+
transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>
+

The CSS transition-delay property

+
+
+

Optional transitionDuration

+
transitionDuration?: ResponsiveValue<string>
+

The CSS transition-duration property

+
+
+

Optional transitionProperty

+
transitionProperty?: ResponsiveValue<TransitionProperty>
+

The CSS transition-property property

+
+
+

Optional transitionTimingFunction

+
transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>
+

The CSS transition-timing-function property

+
+
+

Optional translateX

+
translateX?: ResponsiveValue<Length>
+

Translate value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-x
    • +
+
+
+

Optional translateY

+
translateY?: ResponsiveValue<Length>
+

Translate value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-y
    • +
+
+
+

Optional userSelect

+
userSelect?: ResponsiveValue<UserSelect>
+

The CSS user-select property

+
+
+

Optional verticalAlign

+
verticalAlign?: ResponsiveValue<VerticalAlign<Length>>
+

The CSS vertical-align property

+
+
+

Optional visibility

+
visibility?: ResponsiveValue<Visibility>
+

The CSS visibility property

+
+
+

Optional w

+
w?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional whiteSpace

+
whiteSpace?: ResponsiveValue<WhiteSpace>
+

The CSS white-space property

+
+
+

Optional width

+
width?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional willChange

+
willChange?: ResponsiveValue<WillChange>
+

The CSS will-change property

+
+
+

Optional wordBreak

+
wordBreak?: ResponsiveValue<WordBreak>
+

The CSS word-break property

+
+
+

Optional zIndex

+
zIndex?: ResponsiveValue<"base" | "overlay" | ZIndex | "hide" | "docked" | "dropdown" | "sticky" | "banner" | "modal" | "popover" | "skipLink" | "toast" | "tooltip">
+

The CSS z-index property

+
+
+
+
+

Settings

 +
+
+

Member Visibility

+
    +
    • +
    • +
    • +
    • +
    • +
+
+

Theme

+ +
+
+

Generated using TypeDoc

+
\ No newline at end of file diff --git a/docs/interfaces/SelectControlProps.html b/docs/interfaces/SelectControlProps.html new file mode 100644 index 0000000..078b369 --- /dev/null +++ b/docs/interfaces/SelectControlProps.html @@ -0,0 +1,4495 @@ +SelectControlProps | react-hook-form-chakra
+
+ +
+
+
+
+ +

Interface SelectControlProps

+
+

The union of ChakraFormControlProps and BaseReactHookFormProps which defines the base properties +for most of react-hook-form-chakra components

+
+
+

Hierarchy

+
+
+
+
+ +
+
+

Properties

+
__css? +_active? +_activeLink? +_activeStep? +_after? +_autofill? +_before? +_checked? +_dark? +_disabled? +_empty? +_even? +_expanded? +_first? +_firstLetter? +_focus? +_focusVisible? +_focusWithin? +_fullScreen? +_grabbed? +_groupActive? +_groupChecked? +_groupDisabled? +_groupFocus? +_groupFocusVisible? +_groupFocusWithin? +_groupHover? +_groupInvalid? +_hidden? +_highlighted? +_hover? +_indeterminate? +_invalid? +_last? +_light? +_loading? +_ltr? +_mediaDark? +_mediaReduceMotion? +_notFirst? +_notLast? +_odd? +_peerActive? +_peerChecked? +_peerDisabled? +_peerFocus? +_peerFocusVisible? +_peerFocusWithin? +_peerHover? +_peerInvalid? +_peerPlaceholderShown? +_placeholder? +_placeholderShown? +_pressed? +_readOnly? +_rtl? +_selected? +_selection? +_valid? +_visited? +alignContent? +alignItems? +alignSelf? +animation? +appearance? +apply? +aria-activedescendant? +aria-atomic? +aria-autocomplete? +aria-busy? +aria-checked? +aria-colcount? +aria-colindex? +aria-colspan? +aria-controls? +aria-current? +aria-describedby? +aria-details? +aria-disabled? +aria-dropeffect? +aria-errormessage? +aria-expanded? +aria-flowto? +aria-grabbed? +aria-haspopup? +aria-hidden? +aria-invalid? +aria-keyshortcuts? +aria-label? +aria-labelledby? +aria-level? +aria-live? +aria-modal? +aria-multiline? +aria-multiselectable? +aria-orientation? +aria-owns? +aria-placeholder? +aria-posinset? +aria-pressed? +aria-readonly? +aria-relevant? +aria-required? +aria-roledescription? +aria-rowcount? +aria-rowindex? +aria-rowspan? +aria-selected? +aria-setsize? +aria-sort? +aria-valuemax? +aria-valuemin? +aria-valuenow? +aria-valuetext? +backdropBlur? +backdropBrightness? +backdropContrast? +backdropFilter? +backdropHueRotate? +backdropInvert? +backdropSaturate? +background? +backgroundAttachment? +backgroundBlendMode? +backgroundClip? +backgroundColor? +backgroundImage? +backgroundPosition? +backgroundRepeat? +backgroundSize? +bg? +bgAttachment? +bgBlendMode? +bgClip? +bgColor? +bgGradient? +bgImage? +bgImg? +bgPos? +bgPosition? +bgRepeat? +bgSize? +blendMode? +blur? +border? +borderBottom? +borderBottomColor? +borderBottomLeftRadius? +borderBottomRadius? +borderBottomRightRadius? +borderBottomStyle? +borderBottomWidth? +borderColor? +borderEndRadius? +borderInlineEndRadius? +borderInlineStartRadius? +borderLeft? +borderLeftColor? +borderLeftRadius? +borderLeftStyle? +borderLeftWidth? +borderRadius? +borderRight? +borderRightColor? +borderRightRadius? +borderRightStyle? +borderRightWidth? +borderStartRadius? +borderStyle? +borderTop? +borderTopColor? +borderTopLeftRadius? +borderTopRadius? +borderTopRightRadius? +borderTopStyle? +borderTopWidth? +borderWidth? +borderX? +borderY? +bottom? +boxDecorationBreak? +boxShadow? +boxSize? +boxSizing? +brightness? +children +clipPath? +color? +columnGap? +contrast? +control? +css? +cursor? +display? +dropShadow? +errorMessageProps? +fill? +filter? +flex? +flexBasis? +flexDir? +flexDirection? +flexFlow? +flexGrow? +flexShrink? +flexWrap? +float? +fontFamily? +fontSize? +fontStyle? +fontWeight? +gap? +gridArea? +gridAutoColumns? +gridAutoFlow? +gridAutoRows? +gridColumn? +gridColumnEnd? +gridColumnGap? +gridColumnStart? +gridGap? +gridRow? +gridRowEnd? +gridRowGap? +gridRowStart? +gridTemplate? +gridTemplateAreas? +gridTemplateColumns? +gridTemplateRows? +h? +height? +helperText? +helperTextProps? +hideBelow? +hideFrom? +hueRotate? +inputMode? +inset? +insetEnd? +insetInlineEnd? +insetStart? +insetX? +insetY? +invert? +is? +isDisabled? +isInvalid? +isReadOnly? +isRequired? +isTruncated? +isolation? +justifyContent? +justifyItems? +justifySelf? +label? +labelProps? +layerStyle? +left? +letterSpacing? +lineHeight? +listStyleImage? +listStyleImg? +listStylePos? +listStylePosition? +m? +margin? +marginBottom? +marginEnd? +marginInlineEnd? +marginInlineStart? +marginLeft? +marginRight? +marginStart? +marginTop? +marginX? +marginY? +maxH? +maxHeight? +maxW? +maxWidth? +mb? +me? +minH? +minHeight? +minW? +minWidth? +mixBlendMode? +ml? +mr? +ms? +mt? +mx? +my? +name +noOfLines? +objectFit? +objectPosition? +onKeyPress? +onKeyPressCapture? +opacity? +order? +outline? +outlineColor? +outlineOffset? +overflow? +overflowWrap? +overflowX? +overflowY? +overscroll? +overscrollBehavior? +overscrollBehaviorX? +overscrollBehaviorY? +overscrollX? +overscrollY? +p? +padding? +paddingBottom? +paddingEnd? +paddingInlineEnd? +paddingInlineStart? +paddingLeft? +paddingRight? +paddingStart? +paddingTop? +paddingX? +paddingY? +pb? +pe? +pl? +placeContent? +placeItems? +placeSelf? +pointerEvents? +pos? +position? +pr? +ps? +pt? +px? +py? +resize? +right? +ring? +ringColor? +ringInset? +ringOffset? +ringOffsetColor? +rotate? +rounded? +roundedBottom? +roundedBottomLeft? +roundedBottomRight? +roundedEnd? +roundedLeft? +roundedRight? +roundedStart? +roundedTop? +roundedTopLeft? +roundedTopRight? +rowGap? +saturate? +scale? +scaleX? +scaleY? +selectProps? +shadow? +skewX? +skewY? +srOnly? +stroke? +sx? +textAlign? +textColor? +textDecor? +textDecoration? +textDecorationColor? +textDecorationLine? +textDecorationStyle? +textDecorationThickness? +textIndent? +textOverflow? +textShadow? +textStyle? +textTransform? +textUnderlineOffset? +top? +transform? +transformOrigin? +transition? +transitionDelay? +transitionDuration? +transitionProperty? +transitionTimingFunction? +translateX? +translateY? +userSelect? +verticalAlign? +visibility? +w? +whiteSpace? +width? +willChange? +wordBreak? +zIndex? +
+
+

Properties

+
+

Optional Private __css

+
__css?: SystemStyleObject
+

Used for internal css management

+
+
+

Optional _active

+
_active?: SystemStyleObject
+

Styles for CSS Selector &:active

+
+
+

Optional _activeLink

+
_activeLink?: SystemStyleObject
+

Used to style the active link in a navigation +Styles for CSS Selector &[aria-current=page]

+
+
+

Optional _activeStep

+
_activeStep?: SystemStyleObject
+

Used to style the current step within a process +Styles for CSS Selector &[aria-current=step]

+
+
+

Optional _after

+
_after?: SystemStyleObject
+

Styles for CSS selector &::after

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _after={{content:`""` }}/>
+
+
+
+

Optional _autofill

+
_autofill?: SystemStyleObject
+

Styles for CSS Selector &:-webkit-autofill

+
+
+

Optional _before

+
_before?: SystemStyleObject
+

Styles for CSS selector &::before

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _before={{content:`""` }}/>
+
+
+
+

Optional _checked

+
_checked?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is true

+
    +
  • CSS selector &[aria-checked=true]
    • +
+
+
+

Optional _dark

+
_dark?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _disabled

+
_disabled?: SystemStyleObject
+

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

+
    +
  • &[aria-disabled=true]
    • +
  • &:disabled
    • +
  • &[data-disabled]
    • +
  • &[disabled]
    • +
+
+
+

Optional _empty

+
_empty?: SystemStyleObject
+

Styles for CSS selector &:empty

+
+
+

Optional _even

+
_even?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(even)

+
+
+

Optional _expanded

+
_expanded?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-expanded is true

+
    +
  • CSS selector &[aria-expanded=true]
    • +
+
+
+

Optional _first

+
_first?: SystemStyleObject
+

Styles for CSS Selector &:first-of-type

+
+
+

Optional _firstLetter

+
_firstLetter?: SystemStyleObject
+

Styles for CSS selector &::first-letter

+

NOTE: This selector is only applied for block-level elements and not preceded by an image or table.

+ +

Example

<Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
+
+
+
+

Optional _focus

+
_focus?: SystemStyleObject
+

Styles for CSS selector &:focus

+
+
+

Optional _focusVisible

+
_focusVisible?: SystemStyleObject
+

Styles to apply when this element has received focus via tabbing

+
    +
  • CSS Selector &:focus-visible
    • +
+
+
+

Optional _focusWithin

+
_focusWithin?: SystemStyleObject
+

Styles to apply when a child of this element has received focus

+
    +
  • CSS Selector &:focus-within
    • +
+
+
+

Optional _fullScreen

+
_fullScreen?: SystemStyleObject
+

Styles for CSS Selector &:fullscreen.

+
+
+

Optional _grabbed

+
_grabbed?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-grabbed is true

+
    +
  • CSS selector &[aria-grabbed=true]
    • +
+
+
+

Optional _groupActive

+
_groupActive?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is active

+
+
+

Optional _groupChecked

+
_groupChecked?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is checked

+
+
+

Optional _groupDisabled

+
_groupDisabled?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is disabled

+
+
+

Optional _groupFocus

+
_groupFocus?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is focused

+
+
+

Optional _groupFocusVisible

+
_groupFocusVisible?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has visible focus

+
+
+

Optional _groupFocusWithin

+
_groupFocusWithin?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has focus within

+
+
+

Optional _groupHover

+
_groupHover?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is hovered

+
+
+

Optional _groupInvalid

+
_groupInvalid?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is invalid

+
+
+

Optional _hidden

+
_hidden?: SystemStyleObject
+

Styles for CSS Selector [hidden=true]

+
+
+

Optional _highlighted

+
_highlighted?: SystemStyleObject
+

Styles for the highlighted state.

+
+
+

Optional _hover

+
_hover?: SystemStyleObject
+

Styles for CSS selector &:hover

+
+
+

Optional _indeterminate

+
_indeterminate?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is mixed

+
    +
  • CSS selector &[aria-checked=mixed]
    • +
+
+
+

Optional _invalid

+
_invalid?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-invalid is true

+
    +
  • CSS selector &[aria-invalid=true]
    • +
+
+
+

Optional _last

+
_last?: SystemStyleObject
+

Styles for CSS Selector &:last-of-type

+
+
+

Optional _light

+
_light?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _loading

+
_loading?: SystemStyleObject
+

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. +Useful for styling loading states

+
+
+

Optional _ltr

+
_ltr?: SystemStyleObject
+

Styles for CSS Selector [dir=ltr] & +It is applied when a parent element or this element has dir="ltr"

+
+
+

Optional _mediaDark

+
_mediaDark?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-color-scheme: dark) +It is used when the user has requested the system use a light or dark color theme.

+
+
+

Optional _mediaReduceMotion

+
_mediaReduceMotion?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-reduced-motion: reduce) +It is used when the user has requested the system to reduce the amount of animations.

+
+
+

Optional _notFirst

+
_notFirst?: SystemStyleObject
+

Styles for CSS Selector &:not(:first-of-type)

+
+
+

Optional _notLast

+
_notLast?: SystemStyleObject
+

Styles for CSS Selector &:not(:last-of-type)

+
+
+

Optional _odd

+
_odd?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(odd)

+
+
+

Optional _peerActive

+
_peerActive?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is active

+
+
+

Optional _peerChecked

+
_peerChecked?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is checked

+
+
+

Optional _peerDisabled

+
_peerDisabled?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is disabled

+
+
+

Optional _peerFocus

+
_peerFocus?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is focused

+
+
+

Optional _peerFocusVisible

+
_peerFocusVisible?: SystemStyleObject
+

Styles to apply when a sibling element with .peeror data-peer has visible focus

+
+
+

Optional _peerFocusWithin

+
_peerFocusWithin?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has focus within

+
+
+

Optional _peerHover

+
_peerHover?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is hovered

+
+
+

Optional _peerInvalid

+
_peerInvalid?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is invalid

+
+
+

Optional _peerPlaceholderShown

+
_peerPlaceholderShown?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

+
+
+

Optional _placeholder

+
_placeholder?: SystemStyleObject
+

Styles for CSS Selector &::placeholder.

+
+
+

Optional _placeholderShown

+
_placeholderShown?: SystemStyleObject
+

Styles for CSS Selector &:placeholder-shown.

+
+
+

Optional _pressed

+
_pressed?: SystemStyleObject
+

Styles for CSS Selector &[aria-pressed=true] +Typically used to style the current "pressed" state of toggle buttons

+
+
+

Optional _readOnly

+
_readOnly?: SystemStyleObject
+

Styles for CSS Selector &:readonly

+
+
+

Optional _rtl

+
_rtl?: SystemStyleObject
+

Styles for CSS Selector [dir=rtl] & +It is applied when a parent element or this element has dir="rtl"

+
+
+

Optional _selected

+
_selected?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-selected is true

+
    +
  • CSS selector &[aria-selected=true]
    • +
+
+
+

Optional _selection

+
_selection?: SystemStyleObject
+

Styles for CSS Selector &::selection

+
+
+

Optional _valid

+
_valid?: SystemStyleObject
+

Styles for the valid state

+
    +
  • CSS selector &[data-valid], &[data-state=valid]
    • +
+
+
+

Optional _visited

+
_visited?: SystemStyleObject
+

Styles for CSS Selector &:visited

+
+
+

Optional alignContent

+
alignContent?: ResponsiveValue<AlignContent>
+

The CSS align-content property.

+

It defines the distribution of space between and around +content items along a flexbox cross-axis or a grid's block axis.

+ +

See

Mozilla Docs

+
+
+

Optional alignItems

+
alignItems?: ResponsiveValue<AlignItems>
+

The CSS align-items property.

+

It defines the align-self value on all direct children as a group.

+
    +
  • In Flexbox, it controls the alignment of items on the Cross Axis.
    • +
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
    • +
+ +

See

Mozilla Docs

+
+
+

Optional alignSelf

+
alignSelf?: ResponsiveValue<AlignSelf>
+

The CSS align-self property.

+

It works like align-items, but applies only to a +single flexbox item, instead of all of them.

+ +

See

Mozilla Docs

+
+
+

Optional animation

+
animation?: ResponsiveValue<Animation<string & {}>>
+

The CSS animation property

+
+
+

Optional appearance

+
appearance?: ResponsiveValue<Appearance>
+

The CSS appearance property

+
+
+

Optional apply

+
apply?: ResponsiveValue<string>
+

Apply theme-aware style objects in theme

+ +

Example

<Box apply="styles.h3">This is a div</Box>
+
+

This will apply styles defined in theme.styles.h3

+
+
+

Optional aria-activedescendant

+
aria-activedescendant?: string
+

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

+
+
+

Optional aria-atomic

+
aria-atomic?: Booleanish
+

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

+
+
+

Optional aria-autocomplete

+
aria-autocomplete?: "none" | "both" | "inline" | "list"
+

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be +presented if they are made.

+
+
+

Optional aria-busy

+
aria-busy?: Booleanish
+

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

+
+
+

Optional aria-checked

+
aria-checked?: boolean | "true" | "false" | "mixed"
+

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

+ +

See

    +
  • aria-pressed
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-colcount

+
aria-colcount?: number
+

Defines the total number of columns in a table, grid, or treegrid.

+ +

See

aria-colindex.

+
+
+

Optional aria-colindex

+
aria-colindex?: number
+

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

+ +

See

    +
  • aria-colcount
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-colspan

+
aria-colspan?: number
+

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-colindex
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-controls

+
aria-controls?: string
+

Identifies the element (or elements) whose contents or presence are controlled by the current element.

+ +

See

aria-owns.

+
+
+

Optional aria-current

+
aria-current?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"
+

Indicates the element that represents the current item within a container or set of related elements.

+
+
+

Optional aria-describedby

+
aria-describedby?: string
+

Identifies the element (or elements) that describes the object.

+ +

See

aria-labelledby

+
+
+

Optional aria-details

+
aria-details?: string
+

Identifies the element that provides a detailed, extended description for the object.

+ +

See

aria-describedby.

+
+
+

Optional aria-disabled

+
aria-disabled?: Booleanish
+

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

+ +

See

    +
  • aria-hidden
    • +
  • aria-readonly.
    • +
+
+
+

Optional aria-dropeffect

+
aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"
+

Indicates what functions can be performed when a dragged object is released on the drop target.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-errormessage

+
aria-errormessage?: string
+

Identifies the element that provides an error message for the object.

+ +

See

    +
  • aria-invalid
    • +
  • aria-describedby.
    • +
+
+
+

Optional aria-expanded

+
aria-expanded?: Booleanish
+

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

+
+
+

Optional aria-flowto

+
aria-flowto?: string
+

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, +allows assistive technology to override the general default of reading in document source order.

+
+
+

Optional aria-grabbed

+
aria-grabbed?: Booleanish
+

Indicates an element's "grabbed" state in a drag-and-drop operation.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-haspopup

+
aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "true" | "false" | "tree"
+

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

+
+
+

Optional aria-hidden

+
aria-hidden?: Booleanish
+

Indicates whether the element is exposed to an accessibility API.

+ +

See

aria-disabled.

+
+
+

Optional aria-invalid

+
aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"
+

Indicates the entered value does not conform to the format expected by the application.

+ +

See

aria-errormessage.

+
+
+

Optional aria-keyshortcuts

+
aria-keyshortcuts?: string
+

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

+
+
+

Optional aria-label

+
aria-label?: string
+

Defines a string value that labels the current element.

+ +

See

aria-labelledby.

+
+
+

Optional aria-labelledby

+
aria-labelledby?: string
+

Identifies the element (or elements) that labels the current element.

+ +

See

aria-describedby.

+
+
+

Optional aria-level

+
aria-level?: number
+

Defines the hierarchical level of an element within a structure.

+
+
+

Optional aria-live

+
aria-live?: "off" | "assertive" | "polite"
+

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

+
+
+

Optional aria-modal

+
aria-modal?: Booleanish
+

Indicates whether an element is modal when displayed.

+
+
+

Optional aria-multiline

+
aria-multiline?: Booleanish
+

Indicates whether a text box accepts multiple lines of input or only a single line.

+
+
+

Optional aria-multiselectable

+
aria-multiselectable?: Booleanish
+

Indicates that the user may select more than one item from the current selectable descendants.

+
+
+

Optional aria-orientation

+
aria-orientation?: "horizontal" | "vertical"
+

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

+
+
+

Optional aria-owns

+
aria-owns?: string
+

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship +between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

+ +

See

aria-controls.

+
+
+

Optional aria-placeholder

+
aria-placeholder?: string
+

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. +A hint could be a sample value or a brief description of the expected format.

+
+
+

Optional aria-posinset

+
aria-posinset?: number
+

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-setsize.

+
+
+

Optional aria-pressed

+
aria-pressed?: boolean | "true" | "false" | "mixed"
+

Indicates the current "pressed" state of toggle buttons.

+ +

See

    +
  • aria-checked
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-readonly

+
aria-readonly?: Booleanish
+

Indicates that the element is not editable, but is otherwise operable.

+ +

See

aria-disabled.

+
+
+

Optional aria-relevant

+
aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
+

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

+ +

See

aria-atomic.

+
+
+

Optional aria-required

+
aria-required?: Booleanish
+

Indicates that user input is required on the element before a form may be submitted.

+
+
+

Optional aria-roledescription

+
aria-roledescription?: string
+

Defines a human-readable, author-localized description for the role of an element.

+
+
+

Optional aria-rowcount

+
aria-rowcount?: number
+

Defines the total number of rows in a table, grid, or treegrid.

+ +

See

aria-rowindex.

+
+
+

Optional aria-rowindex

+
aria-rowindex?: number
+

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowcount
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-rowspan

+
aria-rowspan?: number
+

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowindex
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-selected

+
aria-selected?: Booleanish
+

Indicates the current "selected" state of various widgets.

+ +

See

    +
  • aria-checked
    • +
  • aria-pressed.
    • +
+
+
+

Optional aria-setsize

+
aria-setsize?: number
+

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-posinset.

+
+
+

Optional aria-sort

+
aria-sort?: "none" | "ascending" | "descending" | "other"
+

Indicates if items in a table or grid are sorted in ascending or descending order.

+
+
+

Optional aria-valuemax

+
aria-valuemax?: number
+

Defines the maximum allowed value for a range widget.

+
+
+

Optional aria-valuemin

+
aria-valuemin?: number
+

Defines the minimum allowed value for a range widget.

+
+
+

Optional aria-valuenow

+
aria-valuenow?: number
+

Defines the current value for a range widget.

+ +

See

aria-valuetext.

+
+
+

Optional aria-valuetext

+
aria-valuetext?: string
+

Defines the human readable text alternative of aria-valuenow for a range widget.

+
+
+

Optional backdropBlur

+
backdropBlur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the backdrop-blur filter value of an element. +Value is assigned to --chakra-backdrop-blur css variable

+
+
+

Optional backdropBrightness

+
backdropBrightness?: ResponsiveValue<Length>
+

Sets the backdrop-brightness filter value of an element. +Value is assigned to --chakra-backdrop-brightness css variable

+
+
+

Optional backdropContrast

+
backdropContrast?: ResponsiveValue<Length>
+

Sets the backdrop-contrast filter value of an element. +Value is assigned to --chakra-backdrop-contrast css variable

+
+
+

Optional backdropFilter

+
backdropFilter?: ResponsiveValue<"auto" | BackdropFilter>
+

The CSS backdrop-filter property. When set to auto, you allow +Chakra UI to define the color based on the backdrop filter style props +(backdropBlur, backdropSaturate, etc.)

+
+
+

Optional backdropHueRotate

+
backdropHueRotate?: ResponsiveValue<Length>
+

Sets the backdrop-hue-rotate filter value of an element. +Value is assigned to --chakra-backdrop-hue-rotate css variable

+
+
+

Optional backdropInvert

+
backdropInvert?: ResponsiveValue<Length>
+

Sets the backdrop-invert filter value of an element. +Value is assigned to --chakra-backdrop-invert css variable

+
+
+

Optional backdropSaturate

+
backdropSaturate?: ResponsiveValue<Length>
+

Sets the backdrop-saturate filter value of an element. +Value is assigned to --chakra-backdrop-saturate css variable

+
+
+

Optional background

+
background?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional backgroundAttachment

+
backgroundAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional backgroundBlendMode

+
backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional backgroundClip

+
backgroundClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional backgroundColor

+
backgroundColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional backgroundImage

+
backgroundImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional backgroundPosition

+
backgroundPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional backgroundRepeat

+
backgroundRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional backgroundSize

+
backgroundSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional bg

+
bg?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional bgAttachment

+
bgAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional bgBlendMode

+
bgBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional bgClip

+
bgClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional bgColor

+
bgColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional bgGradient

+
bgGradient?: ResponsiveValue<string | string & {}>
+

The background-gradient shorthand

+
+
+

Optional bgImage

+
bgImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgImg

+
bgImg?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgPos

+
bgPos?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgPosition

+
bgPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgRepeat

+
bgRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional bgSize

+
bgSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional blendMode

+
blendMode?: ResponsiveValue<MixBlendMode>
+

The blend-mode property

+
+
+

Optional blur

+
blur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the blur filter value of an element. +Value is assigned to --chakra-filter css variable

+
+
+

Optional border

+
border?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border property

+
+
+

Optional borderBottom

+
borderBottom?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-bottom property

+
+
+

Optional borderBottomColor

+
borderBottomColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderBottomColor>
+

The CSS border-bottom-color property

+
+
+

Optional borderBottomLeftRadius

+
borderBottomLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional borderBottomRadius

+
borderBottomRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional borderBottomRightRadius

+
borderBottomRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional borderBottomStyle

+
borderBottomStyle?: ResponsiveValue<BorderBottomStyle>
+

The CSS border-bottom-style property

+
+
+

Optional borderBottomWidth

+
borderBottomWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-bottom-width property

+
+
+

Optional borderColor

+
borderColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-color property

+
+
+

Optional borderEndRadius

+
borderEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineEndRadius

+
borderInlineEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderInlineEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineStartRadius

+
borderInlineStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderInlineStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderLeft

+
borderLeft?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-left property

+
+
+

Optional borderLeftColor

+
borderLeftColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderLeftColor>
+

The CSS border-left-color property

+
+
+

Optional borderLeftRadius

+
borderLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional borderLeftStyle

+
borderLeftStyle?: ResponsiveValue<BorderLeftStyle>
+

The CSS border-left-style property

+
+
+

Optional borderLeftWidth

+
borderLeftWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-left-width property

+
+
+

Optional borderRadius

+
borderRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional borderRight

+
borderRight?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right property

+
+
+

Optional borderRightColor

+
borderRightColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderRightColor>
+

The CSS border-right-color property

+
+
+

Optional borderRightRadius

+
borderRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional borderRightStyle

+
borderRightStyle?: ResponsiveValue<BorderRightStyle>
+

The CSS border-right-styles property

+
+
+

Optional borderRightWidth

+
borderRightWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-right-width property

+
+
+

Optional borderStartRadius

+
borderStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderStyle

+
borderStyle?: ResponsiveValue<BorderStyle>
+

The CSS border-style property

+
+
+

Optional borderTop

+
borderTop?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top property

+
+
+

Optional borderTopColor

+
borderTopColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-top-color property

+
+
+

Optional borderTopLeftRadius

+
borderTopLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional borderTopRadius

+
borderTopRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional borderTopRightRadius

+
borderTopRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional borderTopStyle

+
borderTopStyle?: ResponsiveValue<BorderTopStyle>
+

The CSS border-top-style property

+
+
+

Optional borderTopWidth

+
borderTopWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-top-width property

+
+
+

Optional borderWidth

+
borderWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-width property

+
+
+

Optional borderX

+
borderX?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right and border-left property

+
+
+

Optional borderY

+
borderY?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top and border-bottom property

+
+
+

Optional bottom

+
bottom?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS bottom property

+
+
+

Optional boxDecorationBreak

+
boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>
+

The CSS box-decoration property

+
+
+

Optional boxShadow

+
boxShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional boxSize

+
boxSize?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width and height property

+
+
+

Optional boxSizing

+
boxSizing?: BoxSizing
+

The CSS box-sizing property

+
+
+

Optional brightness

+
brightness?: ResponsiveValue<Length>
+

Sets the brightness filter value of an element. +Value is assigned to --chakra-brightness css variable

+
+
+

children

+
children: ReactNode
+

The ReactNode to be rendered inside Chakra Select component

+
+
+

Optional clipPath

+
clipPath?: ResponsiveValue<ClipPath>
+

The CSS clip-path property.

+

It creates a clipping region that sets what part of an element should be shown.

+
+
+

Optional color

+
color?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional columnGap

+
columnGap?: ResponsiveValue<ColumnGap<Length>>
+

The CSS column-gap property.

+

It sets the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional contrast

+
contrast?: ResponsiveValue<Length>
+

Sets the contrast filter value of an element. +Value is assigned to --chakra-contrast css variable

+
+
+

Optional control

+
control?: Control<any, any>
+

The control passed down from react-hook-form. +Only required if not using FormProvider

+
+
+

Optional css

+
css?: Interpolation<{}>
+

The emotion's css style object

+
+
+

Optional cursor

+
cursor?: ResponsiveValue<Cursor>
+

The CSS cursor property

+
+
+

Optional display

+
display?: ResponsiveValue<Display>
+

The CSS display property

+
+
+

Optional dropShadow

+
dropShadow?: ResponsiveValue<"base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

Sets the drop-shadow filter value of an element. +Value is assigned to --chakra-drop-shadow css variable

+
+
+

Optional errorMessageProps

+
errorMessageProps?: FormErrorMessageProps
+

Chakra FormErrorMessageProps for error message

+
+
+

Optional fill

+
fill?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS fill property for icon svgs and paths

+
+
+

Optional filter

+
filter?: ResponsiveValue<Filter | "auto">
+

The CSS filter property. When set to auto, you allow +Chakra UI to define the color based on the filter style props +(blur, saturate, etc.)

+
+
+

Optional flex

+
flex?: ResponsiveValue<Flex<Length>>
+

The CSS flex property.

+

It defines how a flex item will grow or shrink +to fit the space available in its flex container.

+ +

See

Mozilla Docs

+
+
+

Optional flexBasis

+
flexBasis?: ResponsiveValue<FlexBasis<Length>>
+

The CSS flex-basis property.

+

It defines the initial main size of a flex item.

+ +

See

Mozilla Docs

+
+
+

Optional flexDir

+
flexDir?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexDirection

+
flexDirection?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexFlow

+
flexFlow?: ResponsiveValue<FlexFlow>
+

The CSS flex-flow property.

+

It is a shorthand property for flex-direction and flex-wrap. +It specifies the direction of a flex container, as well as its wrapping behavior.

+ +

See

Mozilla Docs

+
+
+

Optional flexGrow

+
flexGrow?: ResponsiveValue<FlexGrow>
+

The CSS flex-grow property.

+

It defines how much a flexbox item should grow +if there's space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexShrink

+
flexShrink?: ResponsiveValue<FlexShrink>
+

The CSS flex-shrink property.

+

It defines how much a flexbox item should shrink +if there's not enough space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexWrap

+
flexWrap?: ResponsiveValue<FlexWrap>
+

The CSS flex-wrap property.

+

It defines whether flex items are forced onto one line or +can wrap onto multiple lines. If wrapping is allowed, +it sets the direction that lines are stacked.

+ +

See

Mozilla Docs

+
+
+

Optional float

+
float?: ResponsiveValue<Float>
+

The CSS float property

+
+
+

Optional fontFamily

+
fontFamily?: ResponsiveValue<"body" | FontFamily | "heading" | "mono">
+

The CSS font-family property

+
+
+

Optional fontSize

+
fontSize?: ResponsiveValue<number | "small" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl">
+

The CSS font-size property

+
+
+

Optional fontStyle

+
fontStyle?: ResponsiveValue<FontStyle>
+

The CSS font-style property

+
+
+

Optional fontWeight

+
fontWeight?: ResponsiveValue<number | "bold" | string & {} | "black" | "normal" | "hairline" | "thin" | "light" | "medium" | "semibold" | "extrabold">
+

The CSS font-weight property

+
+
+

Optional gap

+
gap?: ResponsiveValue<Gap<Length>>
+

The CSS gap property.

+

It defines the gap between items in both flex and +grid contexts.

+ +

See

Mozilla Docs

+
+
+

Optional gridArea

+
gridArea?: ResponsiveValue<GridArea>
+

The CSS grid-areas property.

+

It specifies a grid item’s size and location within a grid by +contributing a line, a span, or nothing (automatic) +to its grid placement, thereby specifying the edges of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoColumns

+
gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>
+

The CSS grid-auto-columns property.

+

It specifies the size of an implicitly-created grid column track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoFlow

+
gridAutoFlow?: ResponsiveValue<GridAutoFlow>
+

The CSS grid-auto-flow property

+

It controls how the auto-placement algorithm works, +specifying exactly how auto-placed items get flowed into the grid.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoRows

+
gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>
+

The CSS grid-auto-rows property.

+

It specifies the size of an implicitly-created grid row track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumn

+
gridColumn?: ResponsiveValue<GridColumn>
+

The CSS grid-column property.

+

It specifies a grid item's size and location within a grid column +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnEnd

+
gridColumnEnd?: ResponsiveValue<GridColumnEnd>
+

The CSS grid-column property

+

It specifies a grid item’s end position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the block-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnGap

+
gridColumnGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-column-gap property.

+

It defines the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnStart

+
gridColumnStart?: ResponsiveValue<GridColumnStart>
+

The CSS grid-column property.

+

It specifies a grid item’s start position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement

+ +

See

Mozilla Docs

+
+
+

Optional gridGap

+
gridGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-gap property.

+

It defines the gaps (gutters) between rows and columns

+ +

See

Mozilla Docs

+
+
+

Optional gridRow

+
gridRow?: ResponsiveValue<GridRow>
+

The CSS grid-row property

+

It specifies a grid item’s size and location within the grid row +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowEnd

+
gridRowEnd?: ResponsiveValue<GridRowEnd>
+

The CSS grid-row-end property

+

It specifies a grid item’s end position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowGap

+
gridRowGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-row-gap property.

+

It defines the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowStart

+
gridRowStart?: ResponsiveValue<GridRowStart>
+

The CSS grid-row-start property

+

It specifies a grid item’s start position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplate

+
gridTemplate?: ResponsiveValue<GridTemplate>
+

The CSS grid-template property.

+

It is a shorthand property for defining grid columns, rows, and areas.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateAreas

+
gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>
+

The CSS grid-template-areas property.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateColumns

+
gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>
+

The CSS grid-template-columns property

+

It defines the line names and track sizing functions of the grid columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateRows

+
gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>
+

The CSS grid-template-rows property.

+

It defines the line names and track sizing functions of the grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional h

+
h?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional height

+
height?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional helperText

+
helperText?: ReactNode
+

Helper text to show alongside input

+
+
+

Optional helperTextProps

+
helperTextProps?: TextProps
+

Chakra TextProps associated with the helper text

+
+
+

Optional hideBelow

+
hideBelow?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element below the specified breakpoint

+
+
+

Optional hideFrom

+
hideFrom?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element from the specified breakpoint and up

+
+
+

Optional hueRotate

+
hueRotate?: ResponsiveValue<Length>
+

Sets the hue-rotate filter value of an element. +Value is assigned to --chakra-hue-rotate css variable

+
+
+

Optional inputMode

+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
+

Hints at the type of data that might be entered by the user while editing the element or its contents

+ +

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

+
+
+

Optional inset

+
inset?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, right, top, bottom property

+
+
+

Optional insetEnd

+
insetEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetEnd is equivalent to right. +When the direction is rtl, insetEnd is equivalent to left.

+
+
+

Optional insetInlineEnd

+
insetInlineEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetInlineEnd is equivalent to right. +When the direction is rtl, insetInlineEnd is equivalent to left.

+
+
+

Optional insetStart

+
insetStart?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is start, end is equivalent to left. +When the direction is start, end is equivalent to right.

+
+
+

Optional insetX

+
insetX?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, and right property

+
+
+

Optional insetY

+
insetY?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top, and bottom property

+
+
+

Optional invert

+
invert?: ResponsiveValue<Length>
+

Sets the invert filter value of an element. +Value is assigned to --chakra-invert css variable

+
+
+

Optional is

+
is?: string
+

Specify that a standard HTML element should behave like a defined custom built-in element

+ +

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

+
+
+

Optional isDisabled

+
isDisabled?: boolean
+

If true, the form control will be disabled. This has 2 side effects:

+
    +
  • The FormLabel will have data-disabled attribute
    • +
  • The form element (e.g, Input) will be disabled
    • +
+ +

Default

false

+
+
+

Optional isInvalid

+
isInvalid?: boolean
+

If true, the form control will be invalid. This has 2 side effects:

+
    +
  • The FormLabel and FormErrorIcon will have data-invalid set to true
    • +
  • The form element (e.g, Input) will have aria-invalid set to true
    • +
+ +

Default

false

+
+
+

Optional isReadOnly

+
isReadOnly?: boolean
+

If true, the form control will be readonly

+ +

Default

false

+
+
+

Optional isRequired

+
isRequired?: boolean
+

If true, the form control will be required. This has 2 side effects:

+
    +
  • The FormLabel will show a required indicator
    • +
  • The form element (e.g, Input) will have aria-required set to true
    • +
+ +

Default

false

+
+
+

Optional isTruncated

+
isTruncated?: boolean
+

If true, it clamps truncate a text after one line.

+
+
+

Optional isolation

+
isolation?: ResponsiveValue<Isolation>
+

The CSS isolation property

+
+
+

Optional justifyContent

+
justifyContent?: ResponsiveValue<JustifyContent>
+

The CSS justify-content property.

+

It defines how the browser distributes space between and around content items +along the main-axis of a flex container, and the inline axis of a grid container.

+ +

See

Mozilla Docs

+
+
+

Optional justifyItems

+
justifyItems?: ResponsiveValue<JustifyItems>
+

The CSS justify-items property.

+

It defines the default justify-self for all items of the box, +giving them all a default way of justifying each box +along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional justifySelf

+
justifySelf?: ResponsiveValue<JustifySelf>
+

The CSS justify-self property.

+

It defines the way a box is justified inside its +alignment container along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional label

+
label?: ReactNode
+

The label to be associated with the input

+
+
+

Optional labelProps

+
labelProps?: FormLabelProps
+

Chakra FormLabelProps

+
+
+

Optional layerStyle

+
layerStyle?: ResponsiveValue<string & {}>
+

The layer style object to apply. +Note: Styles must be located in theme.layerStyles

+
+
+

Optional left

+
left?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left property

+
+
+

Optional letterSpacing

+
letterSpacing?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "tighter" | "tight" | "wide" | "wider" | "widest">
+

The CSS letter-spacing property

+
+
+

Optional lineHeight

+
lineHeight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "none" | "normal" | number & {} | "shorter" | "short" | "tall" | "taller">
+

The CSS line-height property

+
+
+

Optional listStyleImage

+
listStyleImage?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStyleImg

+
listStyleImg?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStylePos

+
listStylePos?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional listStylePosition

+
listStylePosition?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional m

+
m?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional margin

+
margin?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional marginBottom

+
marginBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional marginEnd

+
marginEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginEnd is equivalent to marginRight. +When direction is rtl, marginEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineEnd

+
marginInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineEnd is equivalent to marginRight. +When direction is rtl, marginInlineEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineStart

+
marginInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineStart is equivalent to marginLeft. +When direction is rtl, marginInlineStart is equivalent to marginRight.

+
+
+

Optional marginLeft

+
marginLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional marginRight

+
marginRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional marginStart

+
marginStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginStart is equivalent to marginLeft. +When direction is rtl, marginStart is equivalent to marginRight.

+
+
+

Optional marginTop

+
marginTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional marginX

+
marginX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional marginY

+
marginY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

Optional maxH

+
maxH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxHeight

+
maxHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxW

+
maxW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional maxWidth

+
maxWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional mb

+
mb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional me

+
me?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, me is equivalent to marginRight. +When direction is rtl, me is equivalent to marginLeft.

+
+
+

Optional minH

+
minH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minHeight

+
minHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minW

+
minW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional minWidth

+
minWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional mixBlendMode

+
mixBlendMode?: ResponsiveValue<MixBlendMode>
+

The mix-blend-mode property

+
+
+

Optional ml

+
ml?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional mr

+
mr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional ms

+
ms?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, ms is equivalent to marginLeft. +When direction is rtl, ms is equivalent to marginRight.

+
+
+

Optional mt

+
mt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional mx

+
mx?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional my

+
my?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

name

+
name: string
+

The name of the input (required)

+
+
+

Optional noOfLines

+
noOfLines?: ResponsiveValue<number>
+

Used to truncate text at a specific number of lines

+
+
+

Optional objectFit

+
objectFit?: ResponsiveValue<ObjectFit>
+

The CSS object-fit property

+
+
+

Optional objectPosition

+
objectPosition?: ResponsiveValue<ObjectPosition<Length>>
+

The CSS object-position property

+
+
+

Optional onKeyPress

+
onKeyPress?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional onKeyPressCapture

+
onKeyPressCapture?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional opacity

+
opacity?: ResponsiveValue<Opacity>
+

The CSS opacity property

+
+
+

Optional order

+
order?: ResponsiveValue<Order>
+

The CSS order property.

+

It defines the order to lay out an item in a flex or grid container.

+ +

See

Mozilla Docs

+
+
+

Optional outline

+
outline?: ResponsiveValue<Outline<Length>>
+

The CSS outline property

+
+
+

Optional outlineColor

+
outlineColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS outline-color property

+
+
+

Optional outlineOffset

+
outlineOffset?: ResponsiveValue<OutlineOffset<Length>>
+

The CSS outline-offset property

+
+
+

Optional overflow

+
overflow?: ResponsiveValue<Overflow>
+

The CSS overflow property

+
+
+

Optional overflowWrap

+
overflowWrap?: ResponsiveValue<OverflowWrap>
+

The CSS overflow-wrap property

+
+
+

Optional overflowX

+
overflowX?: ResponsiveValue<OverflowX>
+

The CSS overflow-x property

+
+
+

Optional overflowY

+
overflowY?: ResponsiveValue<OverflowY>
+

The CSS overflow-y property

+
+
+

Optional overscroll

+
overscroll?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehavior

+
overscrollBehavior?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehaviorX

+
overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollBehaviorY

+
overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional overscrollX

+
overscrollX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollY

+
overscrollY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional p

+
p?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional padding

+
padding?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional paddingBottom

+
paddingBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional paddingEnd

+
paddingEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingEnd is equivalent to paddingRight. +When direction is rtl, paddingEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineEnd

+
paddingInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineEnd is equivalent to paddingRight. +When direction is rtl, paddingInlineEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineStart

+
paddingInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineStart is equivalent to paddingLeft. +When direction is rtl, paddingInlineStart is equivalent to paddingRight.

+
+
+

Optional paddingLeft

+
paddingLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional paddingRight

+
paddingRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional paddingStart

+
paddingStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingStart is equivalent to paddingLeft. +When direction is rtl, paddingStart is equivalent to paddingRight.

+
+
+

Optional paddingTop

+
paddingTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional paddingX

+
paddingX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional paddingY

+
paddingY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional pb

+
pb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional pe

+
pe?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, pe is equivalent to paddingRight. +When direction is rtl, pe is equivalent to paddingLeft.

+
+
+

Optional pl

+
pl?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional placeContent

+
placeContent?: ResponsiveValue<PlaceContent>
+

The CSS place-content property.

+

It allows you to align content along both the block and +inline directions at once (i.e. the align-content and justify-content properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional placeItems

+
placeItems?: ResponsiveValue<PlaceItems>
+

The CSS place-items property.

+

It allows you to align items along both the block and +inline directions at once (i.e. the align-items and justify-items properties) +in a relevant layout system such as Grid or Flex.

+ +

See

Mozilla Docs

+
+
+

Optional placeSelf

+
placeSelf?: ResponsiveValue<PlaceSelf>
+

The CSS place-self property.

+

It allows you to align an individual item in both the block and +inline directions at once (i.e. the align-self and justify-self properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional pointerEvents

+
pointerEvents?: ResponsiveValue<PointerEvents>
+

The CSS pointer-events property

+
+
+

Optional pos

+
pos?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional position

+
position?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional pr

+
pr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional ps

+
ps?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, ps is equivalent to paddingLeft. +When direction is rtl, ps is equivalent to paddingRight.

+
+
+

Optional pt

+
pt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional px

+
px?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional py

+
py?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional resize

+
resize?: ResponsiveValue<Resize>
+

The CSS resize property

+
+
+

Optional right

+
right?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS right property

+
+
+

Optional ring

+
ring?: ResponsiveValue<Length>
+

Creates outline rings with CSS box-shadow property

+
+
+

Optional ringColor

+
ringColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the outline ring

+
+
+

Optional ringInset

+
ringInset?: ResponsiveValue<"inset" | "none">
+

If the outline ring should an inset

+
+
+

Optional ringOffset

+
ringOffset?: ResponsiveValue<Length>
+

The thickness of the offset shadow when using outline rings

+
+
+

Optional ringOffsetColor

+
ringOffsetColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the offset shadow when adding outline rings

+
+
+

Optional rotate

+
rotate?: ResponsiveValue<Length>
+

Sets the rotation value of the element

+
+
+

Optional rounded

+
rounded?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional roundedBottom

+
roundedBottom?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional roundedBottomLeft

+
roundedBottomLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional roundedBottomRight

+
roundedBottomRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional roundedEnd

+
roundedEnd?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedLeft

+
roundedLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional roundedRight

+
roundedRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional roundedStart

+
roundedStart?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedTop

+
roundedTop?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional roundedTopLeft

+
roundedTopLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional roundedTopRight

+
roundedTopRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional rowGap

+
rowGap?: ResponsiveValue<RowGap<Length>>
+

The CSS row-gap property.

+

It sets the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional saturate

+
saturate?: ResponsiveValue<Length>
+

Sets the saturation filter value of an element. +Value is assigned to --chakra-saturate css variable

+
+
+

Optional scale

+
scale?: ResponsiveValue<Length>
+

Sets the scale value of the element

+
+
+

Optional scaleX

+
scaleX?: ResponsiveValue<Length>
+

Scale value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-x
    • +
+
+
+

Optional scaleY

+
scaleY?: ResponsiveValue<Length>
+

Scale value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-y
    • +
+
+
+

Optional selectProps

+
selectProps?: SelectProps
+

Chakra SelectProps

+
+
+

Optional shadow

+
shadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional skewX

+
skewX?: ResponsiveValue<Length>
+

Skew value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-x
    • +
+
+
+

Optional skewY

+
skewY?: ResponsiveValue<Length>
+

Skew value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-y
    • +
+
+
+

Optional srOnly

+
srOnly?: true | "focusable"
+

If true, hide an element visually without hiding it from screen readers.

+

If focusable, the sr-only styles will be undone, making the element visible +to sighted users as well as screen readers.

+
+
+

Optional stroke

+
stroke?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS stroke property for icon svgs and paths

+
+
+

Optional sx

+
sx?: SystemStyleObject
+

Used to pass theme-aware style props. +NB: This is the public API for user-land

+
+
+

Optional textAlign

+
textAlign?: ResponsiveValue<TextAlign>
+

The CSS text-align property

+
+
+

Optional textColor

+
textColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional textDecor

+
textDecor?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecoration

+
textDecoration?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecorationColor

+
textDecorationColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | TextDecorationColor>
+

The CSS text-decoration-color property

+
+
+

Optional textDecorationLine

+
textDecorationLine?: ResponsiveValue<TextDecorationLine>
+

The CSS text-decoration-line property

+
+
+

Optional textDecorationStyle

+
textDecorationStyle?: ResponsiveValue<TextDecorationStyle>
+

The CSS text-decoration-style property

+
+
+

Optional textDecorationThickness

+
textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>
+

The CSS text-decoration-thickness property

+
+
+

Optional textIndent

+
textIndent?: ResponsiveValue<TextIndent<0 | string & {}>>
+

The CSS text-indent property

+
+
+

Optional textOverflow

+
textOverflow?: ResponsiveValue<TextOverflow>
+

The CSS text-overflow property

+
+
+

Optional textShadow

+
textShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "inner" | "dark-lg" | TextShadow>
+

The text-shadow property

+
+
+

Optional textStyle

+
textStyle?: ResponsiveValue<string & {}>
+

The text style object to apply. +Note: Styles must be located in theme.textStyles

+
+
+

Optional textTransform

+
textTransform?: ResponsiveValue<TextTransform>
+

The CSS text-transform property

+
+
+

Optional textUnderlineOffset

+
textUnderlineOffset?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto">
+

The CSS text-underline-offset property

+
+
+

Optional top

+
top?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top property

+
+
+

Optional transform

+
transform?: ResponsiveValue<"auto" | Transform | "auto-gpu">
+

The CSS transform property

+
+
+

Optional transformOrigin

+
transformOrigin?: ResponsiveValue<number | "center" | "px" | "top" | "right" | "bottom" | "left" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS transform-origin property

+
+
+

Optional transition

+
transition?: ResponsiveValue<Transition<string & {}>>
+

The CSS transition property

+
+
+

Optional transitionDelay

+
transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>
+

The CSS transition-delay property

+
+
+

Optional transitionDuration

+
transitionDuration?: ResponsiveValue<string>
+

The CSS transition-duration property

+
+
+

Optional transitionProperty

+
transitionProperty?: ResponsiveValue<TransitionProperty>
+

The CSS transition-property property

+
+
+

Optional transitionTimingFunction

+
transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>
+

The CSS transition-timing-function property

+
+
+

Optional translateX

+
translateX?: ResponsiveValue<Length>
+

Translate value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-x
    • +
+
+
+

Optional translateY

+
translateY?: ResponsiveValue<Length>
+

Translate value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-y
    • +
+
+
+

Optional userSelect

+
userSelect?: ResponsiveValue<UserSelect>
+

The CSS user-select property

+
+
+

Optional verticalAlign

+
verticalAlign?: ResponsiveValue<VerticalAlign<Length>>
+

The CSS vertical-align property

+
+
+

Optional visibility

+
visibility?: ResponsiveValue<Visibility>
+

The CSS visibility property

+
+
+

Optional w

+
w?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional whiteSpace

+
whiteSpace?: ResponsiveValue<WhiteSpace>
+

The CSS white-space property

+
+
+

Optional width

+
width?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional willChange

+
willChange?: ResponsiveValue<WillChange>
+

The CSS will-change property

+
+
+

Optional wordBreak

+
wordBreak?: ResponsiveValue<WordBreak>
+

The CSS word-break property

+
+
+

Optional zIndex

+
zIndex?: ResponsiveValue<"base" | "overlay" | ZIndex | "hide" | "docked" | "dropdown" | "sticky" | "banner" | "modal" | "popover" | "skipLink" | "toast" | "tooltip">
+

The CSS z-index property

+
+
+
+
+

Settings

 +
+
+

Member Visibility

+
    +
    • +
    • +
    • +
    • +
    • +
+
+

Theme

+ +
+
+

Generated using TypeDoc

+
\ No newline at end of file diff --git a/docs/interfaces/SliderControlProps.html b/docs/interfaces/SliderControlProps.html new file mode 100644 index 0000000..8a427fa --- /dev/null +++ b/docs/interfaces/SliderControlProps.html @@ -0,0 +1,4503 @@ +SliderControlProps | react-hook-form-chakra
+
+ +
+
+
+
+ +

Interface SliderControlProps

+
+

The union of ChakraFormControlProps and BaseReactHookFormProps which defines the base properties +for most of react-hook-form-chakra components

+
+
+

Hierarchy

+
+
+
+
+ +
+
+

Properties

+
__css? +_active? +_activeLink? +_activeStep? +_after? +_autofill? +_before? +_checked? +_dark? +_disabled? +_empty? +_even? +_expanded? +_first? +_firstLetter? +_focus? +_focusVisible? +_focusWithin? +_fullScreen? +_grabbed? +_groupActive? +_groupChecked? +_groupDisabled? +_groupFocus? +_groupFocusVisible? +_groupFocusWithin? +_groupHover? +_groupInvalid? +_hidden? +_highlighted? +_hover? +_indeterminate? +_invalid? +_last? +_light? +_loading? +_ltr? +_mediaDark? +_mediaReduceMotion? +_notFirst? +_notLast? +_odd? +_peerActive? +_peerChecked? +_peerDisabled? +_peerFocus? +_peerFocusVisible? +_peerFocusWithin? +_peerHover? +_peerInvalid? +_peerPlaceholderShown? +_placeholder? +_placeholderShown? +_pressed? +_readOnly? +_rtl? +_selected? +_selection? +_valid? +_visited? +alignContent? +alignItems? +alignSelf? +animation? +appearance? +apply? +aria-activedescendant? +aria-atomic? +aria-autocomplete? +aria-busy? +aria-checked? +aria-colcount? +aria-colindex? +aria-colspan? +aria-controls? +aria-current? +aria-describedby? +aria-details? +aria-disabled? +aria-dropeffect? +aria-errormessage? +aria-expanded? +aria-flowto? +aria-grabbed? +aria-haspopup? +aria-hidden? +aria-invalid? +aria-keyshortcuts? +aria-label? +aria-labelledby? +aria-level? +aria-live? +aria-modal? +aria-multiline? +aria-multiselectable? +aria-orientation? +aria-owns? +aria-placeholder? +aria-posinset? +aria-pressed? +aria-readonly? +aria-relevant? +aria-required? +aria-roledescription? +aria-rowcount? +aria-rowindex? +aria-rowspan? +aria-selected? +aria-setsize? +aria-sort? +aria-valuemax? +aria-valuemin? +aria-valuenow? +aria-valuetext? +backdropBlur? +backdropBrightness? +backdropContrast? +backdropFilter? +backdropHueRotate? +backdropInvert? +backdropSaturate? +background? +backgroundAttachment? +backgroundBlendMode? +backgroundClip? +backgroundColor? +backgroundImage? +backgroundPosition? +backgroundRepeat? +backgroundSize? +bg? +bgAttachment? +bgBlendMode? +bgClip? +bgColor? +bgGradient? +bgImage? +bgImg? +bgPos? +bgPosition? +bgRepeat? +bgSize? +blendMode? +blur? +border? +borderBottom? +borderBottomColor? +borderBottomLeftRadius? +borderBottomRadius? +borderBottomRightRadius? +borderBottomStyle? +borderBottomWidth? +borderColor? +borderEndRadius? +borderInlineEndRadius? +borderInlineStartRadius? +borderLeft? +borderLeftColor? +borderLeftRadius? +borderLeftStyle? +borderLeftWidth? +borderRadius? +borderRight? +borderRightColor? +borderRightRadius? +borderRightStyle? +borderRightWidth? +borderStartRadius? +borderStyle? +borderTop? +borderTopColor? +borderTopLeftRadius? +borderTopRadius? +borderTopRightRadius? +borderTopStyle? +borderTopWidth? +borderWidth? +borderX? +borderY? +bottom? +boxDecorationBreak? +boxShadow? +boxSize? +boxSizing? +brightness? +clipPath? +color? +columnGap? +contrast? +control? +css? +cursor? +display? +dropShadow? +errorMessageProps? +fill? +filter? +flex? +flexBasis? +flexDir? +flexDirection? +flexFlow? +flexGrow? +flexShrink? +flexWrap? +float? +fontFamily? +fontSize? +fontStyle? +fontWeight? +gap? +gridArea? +gridAutoColumns? +gridAutoFlow? +gridAutoRows? +gridColumn? +gridColumnEnd? +gridColumnGap? +gridColumnStart? +gridGap? +gridRow? +gridRowEnd? +gridRowGap? +gridRowStart? +gridTemplate? +gridTemplateAreas? +gridTemplateColumns? +gridTemplateRows? +h? +height? +helperText? +helperTextProps? +hideBelow? +hideFrom? +hueRotate? +inputMode? +inset? +insetEnd? +insetInlineEnd? +insetStart? +insetX? +insetY? +invert? +is? +isDisabled? +isInvalid? +isReadOnly? +isRequired? +isTruncated? +isolation? +justifyContent? +justifyItems? +justifySelf? +label? +labelProps? +layerStyle? +left? +letterSpacing? +lineHeight? +listStyleImage? +listStyleImg? +listStylePos? +listStylePosition? +m? +margin? +marginBottom? +marginEnd? +marginInlineEnd? +marginInlineStart? +marginLeft? +marginRight? +marginStart? +marginTop? +marginX? +marginY? +maxH? +maxHeight? +maxW? +maxWidth? +mb? +me? +minH? +minHeight? +minW? +minWidth? +mixBlendMode? +ml? +mr? +ms? +mt? +mx? +my? +name +noOfLines? +objectFit? +objectPosition? +onKeyPress? +onKeyPressCapture? +opacity? +order? +outline? +outlineColor? +outlineOffset? +overflow? +overflowWrap? +overflowX? +overflowY? +overscroll? +overscrollBehavior? +overscrollBehaviorX? +overscrollBehaviorY? +overscrollX? +overscrollY? +p? +padding? +paddingBottom? +paddingEnd? +paddingInlineEnd? +paddingInlineStart? +paddingLeft? +paddingRight? +paddingStart? +paddingTop? +paddingX? +paddingY? +pb? +pe? +pl? +placeContent? +placeItems? +placeSelf? +pointerEvents? +pos? +position? +pr? +ps? +pt? +px? +py? +resize? +right? +ring? +ringColor? +ringInset? +ringOffset? +ringOffsetColor? +rotate? +rounded? +roundedBottom? +roundedBottomLeft? +roundedBottomRight? +roundedEnd? +roundedLeft? +roundedRight? +roundedStart? +roundedTop? +roundedTopLeft? +roundedTopRight? +rowGap? +saturate? +scale? +scaleX? +scaleY? +shadow? +skewX? +skewY? +sliderProps? +sliderThumbProps? +sliderTrackProps? +srOnly? +stroke? +sx? +textAlign? +textColor? +textDecor? +textDecoration? +textDecorationColor? +textDecorationLine? +textDecorationStyle? +textDecorationThickness? +textIndent? +textOverflow? +textShadow? +textStyle? +textTransform? +textUnderlineOffset? +top? +transform? +transformOrigin? +transition? +transitionDelay? +transitionDuration? +transitionProperty? +transitionTimingFunction? +translateX? +translateY? +userSelect? +verticalAlign? +visibility? +w? +whiteSpace? +width? +willChange? +wordBreak? +zIndex? +
+
+

Properties

+
+

Optional Private __css

+
__css?: SystemStyleObject
+

Used for internal css management

+
+
+

Optional _active

+
_active?: SystemStyleObject
+

Styles for CSS Selector &:active

+
+
+

Optional _activeLink

+
_activeLink?: SystemStyleObject
+

Used to style the active link in a navigation +Styles for CSS Selector &[aria-current=page]

+
+
+

Optional _activeStep

+
_activeStep?: SystemStyleObject
+

Used to style the current step within a process +Styles for CSS Selector &[aria-current=step]

+
+
+

Optional _after

+
_after?: SystemStyleObject
+

Styles for CSS selector &::after

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _after={{content:`""` }}/>
+
+
+
+

Optional _autofill

+
_autofill?: SystemStyleObject
+

Styles for CSS Selector &:-webkit-autofill

+
+
+

Optional _before

+
_before?: SystemStyleObject
+

Styles for CSS selector &::before

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _before={{content:`""` }}/>
+
+
+
+

Optional _checked

+
_checked?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is true

+
    +
  • CSS selector &[aria-checked=true]
    • +
+
+
+

Optional _dark

+
_dark?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _disabled

+
_disabled?: SystemStyleObject
+

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

+
    +
  • &[aria-disabled=true]
    • +
  • &:disabled
    • +
  • &[data-disabled]
    • +
  • &[disabled]
    • +
+
+
+

Optional _empty

+
_empty?: SystemStyleObject
+

Styles for CSS selector &:empty

+
+
+

Optional _even

+
_even?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(even)

+
+
+

Optional _expanded

+
_expanded?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-expanded is true

+
    +
  • CSS selector &[aria-expanded=true]
    • +
+
+
+

Optional _first

+
_first?: SystemStyleObject
+

Styles for CSS Selector &:first-of-type

+
+
+

Optional _firstLetter

+
_firstLetter?: SystemStyleObject
+

Styles for CSS selector &::first-letter

+

NOTE: This selector is only applied for block-level elements and not preceded by an image or table.

+ +

Example

<Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
+
+
+
+

Optional _focus

+
_focus?: SystemStyleObject
+

Styles for CSS selector &:focus

+
+
+

Optional _focusVisible

+
_focusVisible?: SystemStyleObject
+

Styles to apply when this element has received focus via tabbing

+
    +
  • CSS Selector &:focus-visible
    • +
+
+
+

Optional _focusWithin

+
_focusWithin?: SystemStyleObject
+

Styles to apply when a child of this element has received focus

+
    +
  • CSS Selector &:focus-within
    • +
+
+
+

Optional _fullScreen

+
_fullScreen?: SystemStyleObject
+

Styles for CSS Selector &:fullscreen.

+
+
+

Optional _grabbed

+
_grabbed?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-grabbed is true

+
    +
  • CSS selector &[aria-grabbed=true]
    • +
+
+
+

Optional _groupActive

+
_groupActive?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is active

+
+
+

Optional _groupChecked

+
_groupChecked?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is checked

+
+
+

Optional _groupDisabled

+
_groupDisabled?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is disabled

+
+
+

Optional _groupFocus

+
_groupFocus?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is focused

+
+
+

Optional _groupFocusVisible

+
_groupFocusVisible?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has visible focus

+
+
+

Optional _groupFocusWithin

+
_groupFocusWithin?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has focus within

+
+
+

Optional _groupHover

+
_groupHover?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is hovered

+
+
+

Optional _groupInvalid

+
_groupInvalid?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is invalid

+
+
+

Optional _hidden

+
_hidden?: SystemStyleObject
+

Styles for CSS Selector [hidden=true]

+
+
+

Optional _highlighted

+
_highlighted?: SystemStyleObject
+

Styles for the highlighted state.

+
+
+

Optional _hover

+
_hover?: SystemStyleObject
+

Styles for CSS selector &:hover

+
+
+

Optional _indeterminate

+
_indeterminate?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is mixed

+
    +
  • CSS selector &[aria-checked=mixed]
    • +
+
+
+

Optional _invalid

+
_invalid?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-invalid is true

+
    +
  • CSS selector &[aria-invalid=true]
    • +
+
+
+

Optional _last

+
_last?: SystemStyleObject
+

Styles for CSS Selector &:last-of-type

+
+
+

Optional _light

+
_light?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _loading

+
_loading?: SystemStyleObject
+

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. +Useful for styling loading states

+
+
+

Optional _ltr

+
_ltr?: SystemStyleObject
+

Styles for CSS Selector [dir=ltr] & +It is applied when a parent element or this element has dir="ltr"

+
+
+

Optional _mediaDark

+
_mediaDark?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-color-scheme: dark) +It is used when the user has requested the system use a light or dark color theme.

+
+
+

Optional _mediaReduceMotion

+
_mediaReduceMotion?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-reduced-motion: reduce) +It is used when the user has requested the system to reduce the amount of animations.

+
+
+

Optional _notFirst

+
_notFirst?: SystemStyleObject
+

Styles for CSS Selector &:not(:first-of-type)

+
+
+

Optional _notLast

+
_notLast?: SystemStyleObject
+

Styles for CSS Selector &:not(:last-of-type)

+
+
+

Optional _odd

+
_odd?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(odd)

+
+
+

Optional _peerActive

+
_peerActive?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is active

+
+
+

Optional _peerChecked

+
_peerChecked?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is checked

+
+
+

Optional _peerDisabled

+
_peerDisabled?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is disabled

+
+
+

Optional _peerFocus

+
_peerFocus?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is focused

+
+
+

Optional _peerFocusVisible

+
_peerFocusVisible?: SystemStyleObject
+

Styles to apply when a sibling element with .peeror data-peer has visible focus

+
+
+

Optional _peerFocusWithin

+
_peerFocusWithin?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has focus within

+
+
+

Optional _peerHover

+
_peerHover?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is hovered

+
+
+

Optional _peerInvalid

+
_peerInvalid?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is invalid

+
+
+

Optional _peerPlaceholderShown

+
_peerPlaceholderShown?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

+
+
+

Optional _placeholder

+
_placeholder?: SystemStyleObject
+

Styles for CSS Selector &::placeholder.

+
+
+

Optional _placeholderShown

+
_placeholderShown?: SystemStyleObject
+

Styles for CSS Selector &:placeholder-shown.

+
+
+

Optional _pressed

+
_pressed?: SystemStyleObject
+

Styles for CSS Selector &[aria-pressed=true] +Typically used to style the current "pressed" state of toggle buttons

+
+
+

Optional _readOnly

+
_readOnly?: SystemStyleObject
+

Styles for CSS Selector &:readonly

+
+
+

Optional _rtl

+
_rtl?: SystemStyleObject
+

Styles for CSS Selector [dir=rtl] & +It is applied when a parent element or this element has dir="rtl"

+
+
+

Optional _selected

+
_selected?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-selected is true

+
    +
  • CSS selector &[aria-selected=true]
    • +
+
+
+

Optional _selection

+
_selection?: SystemStyleObject
+

Styles for CSS Selector &::selection

+
+
+

Optional _valid

+
_valid?: SystemStyleObject
+

Styles for the valid state

+
    +
  • CSS selector &[data-valid], &[data-state=valid]
    • +
+
+
+

Optional _visited

+
_visited?: SystemStyleObject
+

Styles for CSS Selector &:visited

+
+
+

Optional alignContent

+
alignContent?: ResponsiveValue<AlignContent>
+

The CSS align-content property.

+

It defines the distribution of space between and around +content items along a flexbox cross-axis or a grid's block axis.

+ +

See

Mozilla Docs

+
+
+

Optional alignItems

+
alignItems?: ResponsiveValue<AlignItems>
+

The CSS align-items property.

+

It defines the align-self value on all direct children as a group.

+
    +
  • In Flexbox, it controls the alignment of items on the Cross Axis.
    • +
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
    • +
+ +

See

Mozilla Docs

+
+
+

Optional alignSelf

+
alignSelf?: ResponsiveValue<AlignSelf>
+

The CSS align-self property.

+

It works like align-items, but applies only to a +single flexbox item, instead of all of them.

+ +

See

Mozilla Docs

+
+
+

Optional animation

+
animation?: ResponsiveValue<Animation<string & {}>>
+

The CSS animation property

+
+
+

Optional appearance

+
appearance?: ResponsiveValue<Appearance>
+

The CSS appearance property

+
+
+

Optional apply

+
apply?: ResponsiveValue<string>
+

Apply theme-aware style objects in theme

+ +

Example

<Box apply="styles.h3">This is a div</Box>
+
+

This will apply styles defined in theme.styles.h3

+
+
+

Optional aria-activedescendant

+
aria-activedescendant?: string
+

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

+
+
+

Optional aria-atomic

+
aria-atomic?: Booleanish
+

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

+
+
+

Optional aria-autocomplete

+
aria-autocomplete?: "none" | "both" | "inline" | "list"
+

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be +presented if they are made.

+
+
+

Optional aria-busy

+
aria-busy?: Booleanish
+

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

+
+
+

Optional aria-checked

+
aria-checked?: boolean | "true" | "false" | "mixed"
+

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

+ +

See

    +
  • aria-pressed
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-colcount

+
aria-colcount?: number
+

Defines the total number of columns in a table, grid, or treegrid.

+ +

See

aria-colindex.

+
+
+

Optional aria-colindex

+
aria-colindex?: number
+

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

+ +

See

    +
  • aria-colcount
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-colspan

+
aria-colspan?: number
+

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-colindex
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-controls

+
aria-controls?: string
+

Identifies the element (or elements) whose contents or presence are controlled by the current element.

+ +

See

aria-owns.

+
+
+

Optional aria-current

+
aria-current?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"
+

Indicates the element that represents the current item within a container or set of related elements.

+
+
+

Optional aria-describedby

+
aria-describedby?: string
+

Identifies the element (or elements) that describes the object.

+ +

See

aria-labelledby

+
+
+

Optional aria-details

+
aria-details?: string
+

Identifies the element that provides a detailed, extended description for the object.

+ +

See

aria-describedby.

+
+
+

Optional aria-disabled

+
aria-disabled?: Booleanish
+

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

+ +

See

    +
  • aria-hidden
    • +
  • aria-readonly.
    • +
+
+
+

Optional aria-dropeffect

+
aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"
+

Indicates what functions can be performed when a dragged object is released on the drop target.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-errormessage

+
aria-errormessage?: string
+

Identifies the element that provides an error message for the object.

+ +

See

    +
  • aria-invalid
    • +
  • aria-describedby.
    • +
+
+
+

Optional aria-expanded

+
aria-expanded?: Booleanish
+

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

+
+
+

Optional aria-flowto

+
aria-flowto?: string
+

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, +allows assistive technology to override the general default of reading in document source order.

+
+
+

Optional aria-grabbed

+
aria-grabbed?: Booleanish
+

Indicates an element's "grabbed" state in a drag-and-drop operation.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-haspopup

+
aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "true" | "false" | "tree"
+

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

+
+
+

Optional aria-hidden

+
aria-hidden?: Booleanish
+

Indicates whether the element is exposed to an accessibility API.

+ +

See

aria-disabled.

+
+
+

Optional aria-invalid

+
aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"
+

Indicates the entered value does not conform to the format expected by the application.

+ +

See

aria-errormessage.

+
+
+

Optional aria-keyshortcuts

+
aria-keyshortcuts?: string
+

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

+
+
+

Optional aria-label

+
aria-label?: string
+

Defines a string value that labels the current element.

+ +

See

aria-labelledby.

+
+
+

Optional aria-labelledby

+
aria-labelledby?: string
+

Identifies the element (or elements) that labels the current element.

+ +

See

aria-describedby.

+
+
+

Optional aria-level

+
aria-level?: number
+

Defines the hierarchical level of an element within a structure.

+
+
+

Optional aria-live

+
aria-live?: "off" | "assertive" | "polite"
+

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

+
+
+

Optional aria-modal

+
aria-modal?: Booleanish
+

Indicates whether an element is modal when displayed.

+
+
+

Optional aria-multiline

+
aria-multiline?: Booleanish
+

Indicates whether a text box accepts multiple lines of input or only a single line.

+
+
+

Optional aria-multiselectable

+
aria-multiselectable?: Booleanish
+

Indicates that the user may select more than one item from the current selectable descendants.

+
+
+

Optional aria-orientation

+
aria-orientation?: "horizontal" | "vertical"
+

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

+
+
+

Optional aria-owns

+
aria-owns?: string
+

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship +between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

+ +

See

aria-controls.

+
+
+

Optional aria-placeholder

+
aria-placeholder?: string
+

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. +A hint could be a sample value or a brief description of the expected format.

+
+
+

Optional aria-posinset

+
aria-posinset?: number
+

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-setsize.

+
+
+

Optional aria-pressed

+
aria-pressed?: boolean | "true" | "false" | "mixed"
+

Indicates the current "pressed" state of toggle buttons.

+ +

See

    +
  • aria-checked
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-readonly

+
aria-readonly?: Booleanish
+

Indicates that the element is not editable, but is otherwise operable.

+ +

See

aria-disabled.

+
+
+

Optional aria-relevant

+
aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
+

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

+ +

See

aria-atomic.

+
+
+

Optional aria-required

+
aria-required?: Booleanish
+

Indicates that user input is required on the element before a form may be submitted.

+
+
+

Optional aria-roledescription

+
aria-roledescription?: string
+

Defines a human-readable, author-localized description for the role of an element.

+
+
+

Optional aria-rowcount

+
aria-rowcount?: number
+

Defines the total number of rows in a table, grid, or treegrid.

+ +

See

aria-rowindex.

+
+
+

Optional aria-rowindex

+
aria-rowindex?: number
+

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowcount
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-rowspan

+
aria-rowspan?: number
+

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowindex
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-selected

+
aria-selected?: Booleanish
+

Indicates the current "selected" state of various widgets.

+ +

See

    +
  • aria-checked
    • +
  • aria-pressed.
    • +
+
+
+

Optional aria-setsize

+
aria-setsize?: number
+

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-posinset.

+
+
+

Optional aria-sort

+
aria-sort?: "none" | "ascending" | "descending" | "other"
+

Indicates if items in a table or grid are sorted in ascending or descending order.

+
+
+

Optional aria-valuemax

+
aria-valuemax?: number
+

Defines the maximum allowed value for a range widget.

+
+
+

Optional aria-valuemin

+
aria-valuemin?: number
+

Defines the minimum allowed value for a range widget.

+
+
+

Optional aria-valuenow

+
aria-valuenow?: number
+

Defines the current value for a range widget.

+ +

See

aria-valuetext.

+
+
+

Optional aria-valuetext

+
aria-valuetext?: string
+

Defines the human readable text alternative of aria-valuenow for a range widget.

+
+
+

Optional backdropBlur

+
backdropBlur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the backdrop-blur filter value of an element. +Value is assigned to --chakra-backdrop-blur css variable

+
+
+

Optional backdropBrightness

+
backdropBrightness?: ResponsiveValue<Length>
+

Sets the backdrop-brightness filter value of an element. +Value is assigned to --chakra-backdrop-brightness css variable

+
+
+

Optional backdropContrast

+
backdropContrast?: ResponsiveValue<Length>
+

Sets the backdrop-contrast filter value of an element. +Value is assigned to --chakra-backdrop-contrast css variable

+
+
+

Optional backdropFilter

+
backdropFilter?: ResponsiveValue<"auto" | BackdropFilter>
+

The CSS backdrop-filter property. When set to auto, you allow +Chakra UI to define the color based on the backdrop filter style props +(backdropBlur, backdropSaturate, etc.)

+
+
+

Optional backdropHueRotate

+
backdropHueRotate?: ResponsiveValue<Length>
+

Sets the backdrop-hue-rotate filter value of an element. +Value is assigned to --chakra-backdrop-hue-rotate css variable

+
+
+

Optional backdropInvert

+
backdropInvert?: ResponsiveValue<Length>
+

Sets the backdrop-invert filter value of an element. +Value is assigned to --chakra-backdrop-invert css variable

+
+
+

Optional backdropSaturate

+
backdropSaturate?: ResponsiveValue<Length>
+

Sets the backdrop-saturate filter value of an element. +Value is assigned to --chakra-backdrop-saturate css variable

+
+
+

Optional background

+
background?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional backgroundAttachment

+
backgroundAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional backgroundBlendMode

+
backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional backgroundClip

+
backgroundClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional backgroundColor

+
backgroundColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional backgroundImage

+
backgroundImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional backgroundPosition

+
backgroundPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional backgroundRepeat

+
backgroundRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional backgroundSize

+
backgroundSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional bg

+
bg?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional bgAttachment

+
bgAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional bgBlendMode

+
bgBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional bgClip

+
bgClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional bgColor

+
bgColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional bgGradient

+
bgGradient?: ResponsiveValue<string | string & {}>
+

The background-gradient shorthand

+
+
+

Optional bgImage

+
bgImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgImg

+
bgImg?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgPos

+
bgPos?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgPosition

+
bgPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgRepeat

+
bgRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional bgSize

+
bgSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional blendMode

+
blendMode?: ResponsiveValue<MixBlendMode>
+

The blend-mode property

+
+
+

Optional blur

+
blur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the blur filter value of an element. +Value is assigned to --chakra-filter css variable

+
+
+

Optional border

+
border?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border property

+
+
+

Optional borderBottom

+
borderBottom?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-bottom property

+
+
+

Optional borderBottomColor

+
borderBottomColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderBottomColor>
+

The CSS border-bottom-color property

+
+
+

Optional borderBottomLeftRadius

+
borderBottomLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional borderBottomRadius

+
borderBottomRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional borderBottomRightRadius

+
borderBottomRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional borderBottomStyle

+
borderBottomStyle?: ResponsiveValue<BorderBottomStyle>
+

The CSS border-bottom-style property

+
+
+

Optional borderBottomWidth

+
borderBottomWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-bottom-width property

+
+
+

Optional borderColor

+
borderColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-color property

+
+
+

Optional borderEndRadius

+
borderEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineEndRadius

+
borderInlineEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderInlineEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineStartRadius

+
borderInlineStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderInlineStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderLeft

+
borderLeft?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-left property

+
+
+

Optional borderLeftColor

+
borderLeftColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderLeftColor>
+

The CSS border-left-color property

+
+
+

Optional borderLeftRadius

+
borderLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional borderLeftStyle

+
borderLeftStyle?: ResponsiveValue<BorderLeftStyle>
+

The CSS border-left-style property

+
+
+

Optional borderLeftWidth

+
borderLeftWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-left-width property

+
+
+

Optional borderRadius

+
borderRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional borderRight

+
borderRight?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right property

+
+
+

Optional borderRightColor

+
borderRightColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderRightColor>
+

The CSS border-right-color property

+
+
+

Optional borderRightRadius

+
borderRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional borderRightStyle

+
borderRightStyle?: ResponsiveValue<BorderRightStyle>
+

The CSS border-right-styles property

+
+
+

Optional borderRightWidth

+
borderRightWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-right-width property

+
+
+

Optional borderStartRadius

+
borderStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderStyle

+
borderStyle?: ResponsiveValue<BorderStyle>
+

The CSS border-style property

+
+
+

Optional borderTop

+
borderTop?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top property

+
+
+

Optional borderTopColor

+
borderTopColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-top-color property

+
+
+

Optional borderTopLeftRadius

+
borderTopLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional borderTopRadius

+
borderTopRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional borderTopRightRadius

+
borderTopRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional borderTopStyle

+
borderTopStyle?: ResponsiveValue<BorderTopStyle>
+

The CSS border-top-style property

+
+
+

Optional borderTopWidth

+
borderTopWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-top-width property

+
+
+

Optional borderWidth

+
borderWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-width property

+
+
+

Optional borderX

+
borderX?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right and border-left property

+
+
+

Optional borderY

+
borderY?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top and border-bottom property

+
+
+

Optional bottom

+
bottom?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS bottom property

+
+
+

Optional boxDecorationBreak

+
boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>
+

The CSS box-decoration property

+
+
+

Optional boxShadow

+
boxShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional boxSize

+
boxSize?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width and height property

+
+
+

Optional boxSizing

+
boxSizing?: BoxSizing
+

The CSS box-sizing property

+
+
+

Optional brightness

+
brightness?: ResponsiveValue<Length>
+

Sets the brightness filter value of an element. +Value is assigned to --chakra-brightness css variable

+
+
+

Optional clipPath

+
clipPath?: ResponsiveValue<ClipPath>
+

The CSS clip-path property.

+

It creates a clipping region that sets what part of an element should be shown.

+
+
+

Optional color

+
color?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional columnGap

+
columnGap?: ResponsiveValue<ColumnGap<Length>>
+

The CSS column-gap property.

+

It sets the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional contrast

+
contrast?: ResponsiveValue<Length>
+

Sets the contrast filter value of an element. +Value is assigned to --chakra-contrast css variable

+
+
+

Optional control

+
control?: Control<any, any>
+

The control passed down from react-hook-form. +Only required if not using FormProvider

+
+
+

Optional css

+
css?: Interpolation<{}>
+

The emotion's css style object

+
+
+

Optional cursor

+
cursor?: ResponsiveValue<Cursor>
+

The CSS cursor property

+
+
+

Optional display

+
display?: ResponsiveValue<Display>
+

The CSS display property

+
+
+

Optional dropShadow

+
dropShadow?: ResponsiveValue<"base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

Sets the drop-shadow filter value of an element. +Value is assigned to --chakra-drop-shadow css variable

+
+
+

Optional errorMessageProps

+
errorMessageProps?: FormErrorMessageProps
+

Chakra FormErrorMessageProps for error message

+
+
+

Optional fill

+
fill?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS fill property for icon svgs and paths

+
+
+

Optional filter

+
filter?: ResponsiveValue<Filter | "auto">
+

The CSS filter property. When set to auto, you allow +Chakra UI to define the color based on the filter style props +(blur, saturate, etc.)

+
+
+

Optional flex

+
flex?: ResponsiveValue<Flex<Length>>
+

The CSS flex property.

+

It defines how a flex item will grow or shrink +to fit the space available in its flex container.

+ +

See

Mozilla Docs

+
+
+

Optional flexBasis

+
flexBasis?: ResponsiveValue<FlexBasis<Length>>
+

The CSS flex-basis property.

+

It defines the initial main size of a flex item.

+ +

See

Mozilla Docs

+
+
+

Optional flexDir

+
flexDir?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexDirection

+
flexDirection?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexFlow

+
flexFlow?: ResponsiveValue<FlexFlow>
+

The CSS flex-flow property.

+

It is a shorthand property for flex-direction and flex-wrap. +It specifies the direction of a flex container, as well as its wrapping behavior.

+ +

See

Mozilla Docs

+
+
+

Optional flexGrow

+
flexGrow?: ResponsiveValue<FlexGrow>
+

The CSS flex-grow property.

+

It defines how much a flexbox item should grow +if there's space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexShrink

+
flexShrink?: ResponsiveValue<FlexShrink>
+

The CSS flex-shrink property.

+

It defines how much a flexbox item should shrink +if there's not enough space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexWrap

+
flexWrap?: ResponsiveValue<FlexWrap>
+

The CSS flex-wrap property.

+

It defines whether flex items are forced onto one line or +can wrap onto multiple lines. If wrapping is allowed, +it sets the direction that lines are stacked.

+ +

See

Mozilla Docs

+
+
+

Optional float

+
float?: ResponsiveValue<Float>
+

The CSS float property

+
+
+

Optional fontFamily

+
fontFamily?: ResponsiveValue<"body" | FontFamily | "heading" | "mono">
+

The CSS font-family property

+
+
+

Optional fontSize

+
fontSize?: ResponsiveValue<number | "small" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl">
+

The CSS font-size property

+
+
+

Optional fontStyle

+
fontStyle?: ResponsiveValue<FontStyle>
+

The CSS font-style property

+
+
+

Optional fontWeight

+
fontWeight?: ResponsiveValue<number | "bold" | string & {} | "black" | "normal" | "hairline" | "thin" | "light" | "medium" | "semibold" | "extrabold">
+

The CSS font-weight property

+
+
+

Optional gap

+
gap?: ResponsiveValue<Gap<Length>>
+

The CSS gap property.

+

It defines the gap between items in both flex and +grid contexts.

+ +

See

Mozilla Docs

+
+
+

Optional gridArea

+
gridArea?: ResponsiveValue<GridArea>
+

The CSS grid-areas property.

+

It specifies a grid item’s size and location within a grid by +contributing a line, a span, or nothing (automatic) +to its grid placement, thereby specifying the edges of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoColumns

+
gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>
+

The CSS grid-auto-columns property.

+

It specifies the size of an implicitly-created grid column track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoFlow

+
gridAutoFlow?: ResponsiveValue<GridAutoFlow>
+

The CSS grid-auto-flow property

+

It controls how the auto-placement algorithm works, +specifying exactly how auto-placed items get flowed into the grid.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoRows

+
gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>
+

The CSS grid-auto-rows property.

+

It specifies the size of an implicitly-created grid row track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumn

+
gridColumn?: ResponsiveValue<GridColumn>
+

The CSS grid-column property.

+

It specifies a grid item's size and location within a grid column +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnEnd

+
gridColumnEnd?: ResponsiveValue<GridColumnEnd>
+

The CSS grid-column property

+

It specifies a grid item’s end position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the block-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnGap

+
gridColumnGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-column-gap property.

+

It defines the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnStart

+
gridColumnStart?: ResponsiveValue<GridColumnStart>
+

The CSS grid-column property.

+

It specifies a grid item’s start position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement

+ +

See

Mozilla Docs

+
+
+

Optional gridGap

+
gridGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-gap property.

+

It defines the gaps (gutters) between rows and columns

+ +

See

Mozilla Docs

+
+
+

Optional gridRow

+
gridRow?: ResponsiveValue<GridRow>
+

The CSS grid-row property

+

It specifies a grid item’s size and location within the grid row +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowEnd

+
gridRowEnd?: ResponsiveValue<GridRowEnd>
+

The CSS grid-row-end property

+

It specifies a grid item’s end position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowGap

+
gridRowGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-row-gap property.

+

It defines the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowStart

+
gridRowStart?: ResponsiveValue<GridRowStart>
+

The CSS grid-row-start property

+

It specifies a grid item’s start position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplate

+
gridTemplate?: ResponsiveValue<GridTemplate>
+

The CSS grid-template property.

+

It is a shorthand property for defining grid columns, rows, and areas.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateAreas

+
gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>
+

The CSS grid-template-areas property.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateColumns

+
gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>
+

The CSS grid-template-columns property

+

It defines the line names and track sizing functions of the grid columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateRows

+
gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>
+

The CSS grid-template-rows property.

+

It defines the line names and track sizing functions of the grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional h

+
h?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional height

+
height?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional helperText

+
helperText?: ReactNode
+

Helper text to show alongside input

+
+
+

Optional helperTextProps

+
helperTextProps?: TextProps
+

Chakra TextProps associated with the helper text

+
+
+

Optional hideBelow

+
hideBelow?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element below the specified breakpoint

+
+
+

Optional hideFrom

+
hideFrom?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element from the specified breakpoint and up

+
+
+

Optional hueRotate

+
hueRotate?: ResponsiveValue<Length>
+

Sets the hue-rotate filter value of an element. +Value is assigned to --chakra-hue-rotate css variable

+
+
+

Optional inputMode

+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
+

Hints at the type of data that might be entered by the user while editing the element or its contents

+ +

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

+
+
+

Optional inset

+
inset?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, right, top, bottom property

+
+
+

Optional insetEnd

+
insetEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetEnd is equivalent to right. +When the direction is rtl, insetEnd is equivalent to left.

+
+
+

Optional insetInlineEnd

+
insetInlineEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetInlineEnd is equivalent to right. +When the direction is rtl, insetInlineEnd is equivalent to left.

+
+
+

Optional insetStart

+
insetStart?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is start, end is equivalent to left. +When the direction is start, end is equivalent to right.

+
+
+

Optional insetX

+
insetX?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, and right property

+
+
+

Optional insetY

+
insetY?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top, and bottom property

+
+
+

Optional invert

+
invert?: ResponsiveValue<Length>
+

Sets the invert filter value of an element. +Value is assigned to --chakra-invert css variable

+
+
+

Optional is

+
is?: string
+

Specify that a standard HTML element should behave like a defined custom built-in element

+ +

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

+
+
+

Optional isDisabled

+
isDisabled?: boolean
+

If true, the form control will be disabled. This has 2 side effects:

+
    +
  • The FormLabel will have data-disabled attribute
    • +
  • The form element (e.g, Input) will be disabled
    • +
+ +

Default

false

+
+
+

Optional isInvalid

+
isInvalid?: boolean
+

If true, the form control will be invalid. This has 2 side effects:

+
    +
  • The FormLabel and FormErrorIcon will have data-invalid set to true
    • +
  • The form element (e.g, Input) will have aria-invalid set to true
    • +
+ +

Default

false

+
+
+

Optional isReadOnly

+
isReadOnly?: boolean
+

If true, the form control will be readonly

+ +

Default

false

+
+
+

Optional isRequired

+
isRequired?: boolean
+

If true, the form control will be required. This has 2 side effects:

+
    +
  • The FormLabel will show a required indicator
    • +
  • The form element (e.g, Input) will have aria-required set to true
    • +
+ +

Default

false

+
+
+

Optional isTruncated

+
isTruncated?: boolean
+

If true, it clamps truncate a text after one line.

+
+
+

Optional isolation

+
isolation?: ResponsiveValue<Isolation>
+

The CSS isolation property

+
+
+

Optional justifyContent

+
justifyContent?: ResponsiveValue<JustifyContent>
+

The CSS justify-content property.

+

It defines how the browser distributes space between and around content items +along the main-axis of a flex container, and the inline axis of a grid container.

+ +

See

Mozilla Docs

+
+
+

Optional justifyItems

+
justifyItems?: ResponsiveValue<JustifyItems>
+

The CSS justify-items property.

+

It defines the default justify-self for all items of the box, +giving them all a default way of justifying each box +along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional justifySelf

+
justifySelf?: ResponsiveValue<JustifySelf>
+

The CSS justify-self property.

+

It defines the way a box is justified inside its +alignment container along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional label

+
label?: ReactNode
+

The label to be associated with the input

+
+
+

Optional labelProps

+
labelProps?: FormLabelProps
+

Chakra FormLabelProps

+
+
+

Optional layerStyle

+
layerStyle?: ResponsiveValue<string & {}>
+

The layer style object to apply. +Note: Styles must be located in theme.layerStyles

+
+
+

Optional left

+
left?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left property

+
+
+

Optional letterSpacing

+
letterSpacing?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "tighter" | "tight" | "wide" | "wider" | "widest">
+

The CSS letter-spacing property

+
+
+

Optional lineHeight

+
lineHeight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "none" | "normal" | number & {} | "shorter" | "short" | "tall" | "taller">
+

The CSS line-height property

+
+
+

Optional listStyleImage

+
listStyleImage?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStyleImg

+
listStyleImg?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStylePos

+
listStylePos?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional listStylePosition

+
listStylePosition?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional m

+
m?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional margin

+
margin?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional marginBottom

+
marginBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional marginEnd

+
marginEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginEnd is equivalent to marginRight. +When direction is rtl, marginEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineEnd

+
marginInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineEnd is equivalent to marginRight. +When direction is rtl, marginInlineEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineStart

+
marginInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineStart is equivalent to marginLeft. +When direction is rtl, marginInlineStart is equivalent to marginRight.

+
+
+

Optional marginLeft

+
marginLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional marginRight

+
marginRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional marginStart

+
marginStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginStart is equivalent to marginLeft. +When direction is rtl, marginStart is equivalent to marginRight.

+
+
+

Optional marginTop

+
marginTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional marginX

+
marginX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional marginY

+
marginY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

Optional maxH

+
maxH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxHeight

+
maxHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxW

+
maxW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional maxWidth

+
maxWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional mb

+
mb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional me

+
me?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, me is equivalent to marginRight. +When direction is rtl, me is equivalent to marginLeft.

+
+
+

Optional minH

+
minH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minHeight

+
minHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minW

+
minW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional minWidth

+
minWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional mixBlendMode

+
mixBlendMode?: ResponsiveValue<MixBlendMode>
+

The mix-blend-mode property

+
+
+

Optional ml

+
ml?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional mr

+
mr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional ms

+
ms?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, ms is equivalent to marginLeft. +When direction is rtl, ms is equivalent to marginRight.

+
+
+

Optional mt

+
mt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional mx

+
mx?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional my

+
my?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

name

+
name: string
+

The name of the input (required)

+
+
+

Optional noOfLines

+
noOfLines?: ResponsiveValue<number>
+

Used to truncate text at a specific number of lines

+
+
+

Optional objectFit

+
objectFit?: ResponsiveValue<ObjectFit>
+

The CSS object-fit property

+
+
+

Optional objectPosition

+
objectPosition?: ResponsiveValue<ObjectPosition<Length>>
+

The CSS object-position property

+
+
+

Optional onKeyPress

+
onKeyPress?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional onKeyPressCapture

+
onKeyPressCapture?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional opacity

+
opacity?: ResponsiveValue<Opacity>
+

The CSS opacity property

+
+
+

Optional order

+
order?: ResponsiveValue<Order>
+

The CSS order property.

+

It defines the order to lay out an item in a flex or grid container.

+ +

See

Mozilla Docs

+
+
+

Optional outline

+
outline?: ResponsiveValue<Outline<Length>>
+

The CSS outline property

+
+
+

Optional outlineColor

+
outlineColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS outline-color property

+
+
+

Optional outlineOffset

+
outlineOffset?: ResponsiveValue<OutlineOffset<Length>>
+

The CSS outline-offset property

+
+
+

Optional overflow

+
overflow?: ResponsiveValue<Overflow>
+

The CSS overflow property

+
+
+

Optional overflowWrap

+
overflowWrap?: ResponsiveValue<OverflowWrap>
+

The CSS overflow-wrap property

+
+
+

Optional overflowX

+
overflowX?: ResponsiveValue<OverflowX>
+

The CSS overflow-x property

+
+
+

Optional overflowY

+
overflowY?: ResponsiveValue<OverflowY>
+

The CSS overflow-y property

+
+
+

Optional overscroll

+
overscroll?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehavior

+
overscrollBehavior?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehaviorX

+
overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollBehaviorY

+
overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional overscrollX

+
overscrollX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollY

+
overscrollY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional p

+
p?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional padding

+
padding?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional paddingBottom

+
paddingBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional paddingEnd

+
paddingEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingEnd is equivalent to paddingRight. +When direction is rtl, paddingEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineEnd

+
paddingInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineEnd is equivalent to paddingRight. +When direction is rtl, paddingInlineEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineStart

+
paddingInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineStart is equivalent to paddingLeft. +When direction is rtl, paddingInlineStart is equivalent to paddingRight.

+
+
+

Optional paddingLeft

+
paddingLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional paddingRight

+
paddingRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional paddingStart

+
paddingStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingStart is equivalent to paddingLeft. +When direction is rtl, paddingStart is equivalent to paddingRight.

+
+
+

Optional paddingTop

+
paddingTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional paddingX

+
paddingX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional paddingY

+
paddingY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional pb

+
pb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional pe

+
pe?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, pe is equivalent to paddingRight. +When direction is rtl, pe is equivalent to paddingLeft.

+
+
+

Optional pl

+
pl?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional placeContent

+
placeContent?: ResponsiveValue<PlaceContent>
+

The CSS place-content property.

+

It allows you to align content along both the block and +inline directions at once (i.e. the align-content and justify-content properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional placeItems

+
placeItems?: ResponsiveValue<PlaceItems>
+

The CSS place-items property.

+

It allows you to align items along both the block and +inline directions at once (i.e. the align-items and justify-items properties) +in a relevant layout system such as Grid or Flex.

+ +

See

Mozilla Docs

+
+
+

Optional placeSelf

+
placeSelf?: ResponsiveValue<PlaceSelf>
+

The CSS place-self property.

+

It allows you to align an individual item in both the block and +inline directions at once (i.e. the align-self and justify-self properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional pointerEvents

+
pointerEvents?: ResponsiveValue<PointerEvents>
+

The CSS pointer-events property

+
+
+

Optional pos

+
pos?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional position

+
position?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional pr

+
pr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional ps

+
ps?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, ps is equivalent to paddingLeft. +When direction is rtl, ps is equivalent to paddingRight.

+
+
+

Optional pt

+
pt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional px

+
px?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional py

+
py?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional resize

+
resize?: ResponsiveValue<Resize>
+

The CSS resize property

+
+
+

Optional right

+
right?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS right property

+
+
+

Optional ring

+
ring?: ResponsiveValue<Length>
+

Creates outline rings with CSS box-shadow property

+
+
+

Optional ringColor

+
ringColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the outline ring

+
+
+

Optional ringInset

+
ringInset?: ResponsiveValue<"inset" | "none">
+

If the outline ring should an inset

+
+
+

Optional ringOffset

+
ringOffset?: ResponsiveValue<Length>
+

The thickness of the offset shadow when using outline rings

+
+
+

Optional ringOffsetColor

+
ringOffsetColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the offset shadow when adding outline rings

+
+
+

Optional rotate

+
rotate?: ResponsiveValue<Length>
+

Sets the rotation value of the element

+
+
+

Optional rounded

+
rounded?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional roundedBottom

+
roundedBottom?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional roundedBottomLeft

+
roundedBottomLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional roundedBottomRight

+
roundedBottomRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional roundedEnd

+
roundedEnd?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedLeft

+
roundedLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional roundedRight

+
roundedRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional roundedStart

+
roundedStart?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedTop

+
roundedTop?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional roundedTopLeft

+
roundedTopLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional roundedTopRight

+
roundedTopRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional rowGap

+
rowGap?: ResponsiveValue<RowGap<Length>>
+

The CSS row-gap property.

+

It sets the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional saturate

+
saturate?: ResponsiveValue<Length>
+

Sets the saturation filter value of an element. +Value is assigned to --chakra-saturate css variable

+
+
+

Optional scale

+
scale?: ResponsiveValue<Length>
+

Sets the scale value of the element

+
+
+

Optional scaleX

+
scaleX?: ResponsiveValue<Length>
+

Scale value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-x
    • +
+
+
+

Optional scaleY

+
scaleY?: ResponsiveValue<Length>
+

Scale value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-y
    • +
+
+
+

Optional shadow

+
shadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional skewX

+
skewX?: ResponsiveValue<Length>
+

Skew value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-x
    • +
+
+
+

Optional skewY

+
skewY?: ResponsiveValue<Length>
+

Skew value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-y
    • +
+
+
+

Optional sliderProps

+
sliderProps?: SliderProps
+

Chakra SliderProps

+
+
+

Optional sliderThumbProps

+
sliderThumbProps?: SliderThumbProps
+

Chakra SliderThumbProps

+
+
+

Optional sliderTrackProps

+
sliderTrackProps?: SliderTrackProps
+

Chakra SliderTrackProps

+
+
+

Optional srOnly

+
srOnly?: true | "focusable"
+

If true, hide an element visually without hiding it from screen readers.

+

If focusable, the sr-only styles will be undone, making the element visible +to sighted users as well as screen readers.

+
+
+

Optional stroke

+
stroke?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS stroke property for icon svgs and paths

+
+
+

Optional sx

+
sx?: SystemStyleObject
+

Used to pass theme-aware style props. +NB: This is the public API for user-land

+
+
+

Optional textAlign

+
textAlign?: ResponsiveValue<TextAlign>
+

The CSS text-align property

+
+
+

Optional textColor

+
textColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional textDecor

+
textDecor?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecoration

+
textDecoration?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecorationColor

+
textDecorationColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | TextDecorationColor>
+

The CSS text-decoration-color property

+
+
+

Optional textDecorationLine

+
textDecorationLine?: ResponsiveValue<TextDecorationLine>
+

The CSS text-decoration-line property

+
+
+

Optional textDecorationStyle

+
textDecorationStyle?: ResponsiveValue<TextDecorationStyle>
+

The CSS text-decoration-style property

+
+
+

Optional textDecorationThickness

+
textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>
+

The CSS text-decoration-thickness property

+
+
+

Optional textIndent

+
textIndent?: ResponsiveValue<TextIndent<0 | string & {}>>
+

The CSS text-indent property

+
+
+

Optional textOverflow

+
textOverflow?: ResponsiveValue<TextOverflow>
+

The CSS text-overflow property

+
+
+

Optional textShadow

+
textShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "inner" | "dark-lg" | TextShadow>
+

The text-shadow property

+
+
+

Optional textStyle

+
textStyle?: ResponsiveValue<string & {}>
+

The text style object to apply. +Note: Styles must be located in theme.textStyles

+
+
+

Optional textTransform

+
textTransform?: ResponsiveValue<TextTransform>
+

The CSS text-transform property

+
+
+

Optional textUnderlineOffset

+
textUnderlineOffset?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto">
+

The CSS text-underline-offset property

+
+
+

Optional top

+
top?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top property

+
+
+

Optional transform

+
transform?: ResponsiveValue<"auto" | Transform | "auto-gpu">
+

The CSS transform property

+
+
+

Optional transformOrigin

+
transformOrigin?: ResponsiveValue<number | "center" | "px" | "top" | "right" | "bottom" | "left" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS transform-origin property

+
+
+

Optional transition

+
transition?: ResponsiveValue<Transition<string & {}>>
+

The CSS transition property

+
+
+

Optional transitionDelay

+
transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>
+

The CSS transition-delay property

+
+
+

Optional transitionDuration

+
transitionDuration?: ResponsiveValue<string>
+

The CSS transition-duration property

+
+
+

Optional transitionProperty

+
transitionProperty?: ResponsiveValue<TransitionProperty>
+

The CSS transition-property property

+
+
+

Optional transitionTimingFunction

+
transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>
+

The CSS transition-timing-function property

+
+
+

Optional translateX

+
translateX?: ResponsiveValue<Length>
+

Translate value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-x
    • +
+
+
+

Optional translateY

+
translateY?: ResponsiveValue<Length>
+

Translate value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-y
    • +
+
+
+

Optional userSelect

+
userSelect?: ResponsiveValue<UserSelect>
+

The CSS user-select property

+
+
+

Optional verticalAlign

+
verticalAlign?: ResponsiveValue<VerticalAlign<Length>>
+

The CSS vertical-align property

+
+
+

Optional visibility

+
visibility?: ResponsiveValue<Visibility>
+

The CSS visibility property

+
+
+

Optional w

+
w?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional whiteSpace

+
whiteSpace?: ResponsiveValue<WhiteSpace>
+

The CSS white-space property

+
+
+

Optional width

+
width?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional willChange

+
willChange?: ResponsiveValue<WillChange>
+

The CSS will-change property

+
+
+

Optional wordBreak

+
wordBreak?: ResponsiveValue<WordBreak>
+

The CSS word-break property

+
+
+

Optional zIndex

+
zIndex?: ResponsiveValue<"base" | "overlay" | ZIndex | "hide" | "docked" | "dropdown" | "sticky" | "banner" | "modal" | "popover" | "skipLink" | "toast" | "tooltip">
+

The CSS z-index property

+
+
+
+
+

Settings

 +
+
+

Member Visibility

+
    +
    • +
    • +
    • +
    • +
    • +
+
+

Theme

+ +
+
+

Generated using TypeDoc

+
\ No newline at end of file diff --git a/docs/interfaces/SubmitButtonProps.html b/docs/interfaces/SubmitButtonProps.html new file mode 100644 index 0000000..843e750 --- /dev/null +++ b/docs/interfaces/SubmitButtonProps.html @@ -0,0 +1,4450 @@ +SubmitButtonProps | react-hook-form-chakra
+
+ +
+
+
+
+ +

Interface SubmitButtonProps

+
+

Hierarchy

+
    +
  • ButtonProps +
      +
    • SubmitButtonProps
+
+
+
+ +
+
+

Properties

+
__css? +_active? +_activeLink? +_activeStep? +_after? +_autofill? +_before? +_checked? +_dark? +_disabled? +_empty? +_even? +_expanded? +_first? +_firstLetter? +_focus? +_focusVisible? +_focusWithin? +_fullScreen? +_grabbed? +_groupActive? +_groupChecked? +_groupDisabled? +_groupFocus? +_groupFocusVisible? +_groupFocusWithin? +_groupHover? +_groupInvalid? +_hidden? +_highlighted? +_hover? +_indeterminate? +_invalid? +_last? +_light? +_loading? +_ltr? +_mediaDark? +_mediaReduceMotion? +_notFirst? +_notLast? +_odd? +_peerActive? +_peerChecked? +_peerDisabled? +_peerFocus? +_peerFocusVisible? +_peerFocusWithin? +_peerHover? +_peerInvalid? +_peerPlaceholderShown? +_placeholder? +_placeholderShown? +_pressed? +_readOnly? +_rtl? +_selected? +_selection? +_valid? +_visited? +alignContent? +alignItems? +alignSelf? +animation? +appearance? +apply? +aria-activedescendant? +aria-atomic? +aria-autocomplete? +aria-busy? +aria-checked? +aria-colcount? +aria-colindex? +aria-colspan? +aria-controls? +aria-current? +aria-describedby? +aria-details? +aria-disabled? +aria-dropeffect? +aria-errormessage? +aria-expanded? +aria-flowto? +aria-grabbed? +aria-haspopup? +aria-hidden? +aria-invalid? +aria-keyshortcuts? +aria-label? +aria-labelledby? +aria-level? +aria-live? +aria-modal? +aria-multiline? +aria-multiselectable? +aria-orientation? +aria-owns? +aria-placeholder? +aria-posinset? +aria-pressed? +aria-readonly? +aria-relevant? +aria-required? +aria-roledescription? +aria-rowcount? +aria-rowindex? +aria-rowspan? +aria-selected? +aria-setsize? +aria-sort? +aria-valuemax? +aria-valuemin? +aria-valuenow? +aria-valuetext? +backdropBlur? +backdropBrightness? +backdropContrast? +backdropFilter? +backdropHueRotate? +backdropInvert? +backdropSaturate? +background? +backgroundAttachment? +backgroundBlendMode? +backgroundClip? +backgroundColor? +backgroundImage? +backgroundPosition? +backgroundRepeat? +backgroundSize? +bg? +bgAttachment? +bgBlendMode? +bgClip? +bgColor? +bgGradient? +bgImage? +bgImg? +bgPos? +bgPosition? +bgRepeat? +bgSize? +blendMode? +blur? +border? +borderBottom? +borderBottomColor? +borderBottomLeftRadius? +borderBottomRadius? +borderBottomRightRadius? +borderBottomStyle? +borderBottomWidth? +borderColor? +borderEndRadius? +borderInlineEndRadius? +borderInlineStartRadius? +borderLeft? +borderLeftColor? +borderLeftRadius? +borderLeftStyle? +borderLeftWidth? +borderRadius? +borderRight? +borderRightColor? +borderRightRadius? +borderRightStyle? +borderRightWidth? +borderStartRadius? +borderStyle? +borderTop? +borderTopColor? +borderTopLeftRadius? +borderTopRadius? +borderTopRightRadius? +borderTopStyle? +borderTopWidth? +borderWidth? +borderX? +borderY? +bottom? +boxDecorationBreak? +boxShadow? +boxSize? +boxSizing? +brightness? +clipPath? +color? +columnGap? +contrast? +control? +css? +cursor? +display? +dropShadow? +fill? +filter? +flex? +flexBasis? +flexDir? +flexDirection? +flexFlow? +flexGrow? +flexShrink? +flexWrap? +float? +fontFamily? +fontSize? +fontStyle? +fontWeight? +gap? +gridArea? +gridAutoColumns? +gridAutoFlow? +gridAutoRows? +gridColumn? +gridColumnEnd? +gridColumnGap? +gridColumnStart? +gridGap? +gridRow? +gridRowEnd? +gridRowGap? +gridRowStart? +gridTemplate? +gridTemplateAreas? +gridTemplateColumns? +gridTemplateRows? +h? +height? +hideBelow? +hideFrom? +hueRotate? +iconSpacing? +inputMode? +inset? +insetEnd? +insetInlineEnd? +insetStart? +insetX? +insetY? +invert? +is? +isActive? +isDisabled? +isLoading? +isTruncated? +isolation? +justifyContent? +justifyItems? +justifySelf? +layerStyle? +left? +leftIcon? +letterSpacing? +lineHeight? +listStyleImage? +listStyleImg? +listStylePos? +listStylePosition? +loadingText? +m? +margin? +marginBottom? +marginEnd? +marginInlineEnd? +marginInlineStart? +marginLeft? +marginRight? +marginStart? +marginTop? +marginX? +marginY? +maxH? +maxHeight? +maxW? +maxWidth? +mb? +me? +minH? +minHeight? +minW? +minWidth? +mixBlendMode? +ml? +mr? +ms? +mt? +mx? +my? +noOfLines? +objectFit? +objectPosition? +onKeyPress? +onKeyPressCapture? +opacity? +order? +outline? +outlineColor? +outlineOffset? +overflow? +overflowWrap? +overflowX? +overflowY? +overscroll? +overscrollBehavior? +overscrollBehaviorX? +overscrollBehaviorY? +overscrollX? +overscrollY? +p? +padding? +paddingBottom? +paddingEnd? +paddingInlineEnd? +paddingInlineStart? +paddingLeft? +paddingRight? +paddingStart? +paddingTop? +paddingX? +paddingY? +pb? +pe? +pl? +placeContent? +placeItems? +placeSelf? +pointerEvents? +pos? +position? +pr? +ps? +pt? +px? +py? +resize? +right? +rightIcon? +ring? +ringColor? +ringInset? +ringOffset? +ringOffsetColor? +rotate? +rounded? +roundedBottom? +roundedBottomLeft? +roundedBottomRight? +roundedEnd? +roundedLeft? +roundedRight? +roundedStart? +roundedTop? +roundedTopLeft? +roundedTopRight? +rowGap? +saturate? +scale? +scaleX? +scaleY? +shadow? +skewX? +skewY? +spinner? +spinnerPlacement? +srOnly? +stroke? +sx? +textAlign? +textColor? +textDecor? +textDecoration? +textDecorationColor? +textDecorationLine? +textDecorationStyle? +textDecorationThickness? +textIndent? +textOverflow? +textShadow? +textStyle? +textTransform? +textUnderlineOffset? +top? +transform? +transformOrigin? +transition? +transitionDelay? +transitionDuration? +transitionProperty? +transitionTimingFunction? +translateX? +translateY? +userSelect? +verticalAlign? +visibility? +w? +whiteSpace? +width? +willChange? +wordBreak? +zIndex? +
+
+

Properties

+
+

Optional Private __css

+
__css?: SystemStyleObject
+

Used for internal css management

+
+
+

Optional _active

+
_active?: SystemStyleObject
+

Styles for CSS Selector &:active

+
+
+

Optional _activeLink

+
_activeLink?: SystemStyleObject
+

Used to style the active link in a navigation +Styles for CSS Selector &[aria-current=page]

+
+
+

Optional _activeStep

+
_activeStep?: SystemStyleObject
+

Used to style the current step within a process +Styles for CSS Selector &[aria-current=step]

+
+
+

Optional _after

+
_after?: SystemStyleObject
+

Styles for CSS selector &::after

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _after={{content:`""` }}/>
+
+
+
+

Optional _autofill

+
_autofill?: SystemStyleObject
+

Styles for CSS Selector &:-webkit-autofill

+
+
+

Optional _before

+
_before?: SystemStyleObject
+

Styles for CSS selector &::before

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _before={{content:`""` }}/>
+
+
+
+

Optional _checked

+
_checked?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is true

+
    +
  • CSS selector &[aria-checked=true]
    • +
+
+
+

Optional _dark

+
_dark?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _disabled

+
_disabled?: SystemStyleObject
+

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

+
    +
  • &[aria-disabled=true]
    • +
  • &:disabled
    • +
  • &[data-disabled]
    • +
  • &[disabled]
    • +
+
+
+

Optional _empty

+
_empty?: SystemStyleObject
+

Styles for CSS selector &:empty

+
+
+

Optional _even

+
_even?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(even)

+
+
+

Optional _expanded

+
_expanded?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-expanded is true

+
    +
  • CSS selector &[aria-expanded=true]
    • +
+
+
+

Optional _first

+
_first?: SystemStyleObject
+

Styles for CSS Selector &:first-of-type

+
+
+

Optional _firstLetter

+
_firstLetter?: SystemStyleObject
+

Styles for CSS selector &::first-letter

+

NOTE: This selector is only applied for block-level elements and not preceded by an image or table.

+ +

Example

<Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
+
+
+
+

Optional _focus

+
_focus?: SystemStyleObject
+

Styles for CSS selector &:focus

+
+
+

Optional _focusVisible

+
_focusVisible?: SystemStyleObject
+

Styles to apply when this element has received focus via tabbing

+
    +
  • CSS Selector &:focus-visible
    • +
+
+
+

Optional _focusWithin

+
_focusWithin?: SystemStyleObject
+

Styles to apply when a child of this element has received focus

+
    +
  • CSS Selector &:focus-within
    • +
+
+
+

Optional _fullScreen

+
_fullScreen?: SystemStyleObject
+

Styles for CSS Selector &:fullscreen.

+
+
+

Optional _grabbed

+
_grabbed?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-grabbed is true

+
    +
  • CSS selector &[aria-grabbed=true]
    • +
+
+
+

Optional _groupActive

+
_groupActive?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is active

+
+
+

Optional _groupChecked

+
_groupChecked?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is checked

+
+
+

Optional _groupDisabled

+
_groupDisabled?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is disabled

+
+
+

Optional _groupFocus

+
_groupFocus?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is focused

+
+
+

Optional _groupFocusVisible

+
_groupFocusVisible?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has visible focus

+
+
+

Optional _groupFocusWithin

+
_groupFocusWithin?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has focus within

+
+
+

Optional _groupHover

+
_groupHover?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is hovered

+
+
+

Optional _groupInvalid

+
_groupInvalid?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is invalid

+
+
+

Optional _hidden

+
_hidden?: SystemStyleObject
+

Styles for CSS Selector [hidden=true]

+
+
+

Optional _highlighted

+
_highlighted?: SystemStyleObject
+

Styles for the highlighted state.

+
+
+

Optional _hover

+
_hover?: SystemStyleObject
+

Styles for CSS selector &:hover

+
+
+

Optional _indeterminate

+
_indeterminate?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is mixed

+
    +
  • CSS selector &[aria-checked=mixed]
    • +
+
+
+

Optional _invalid

+
_invalid?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-invalid is true

+
    +
  • CSS selector &[aria-invalid=true]
    • +
+
+
+

Optional _last

+
_last?: SystemStyleObject
+

Styles for CSS Selector &:last-of-type

+
+
+

Optional _light

+
_light?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _loading

+
_loading?: SystemStyleObject
+

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. +Useful for styling loading states

+
+
+

Optional _ltr

+
_ltr?: SystemStyleObject
+

Styles for CSS Selector [dir=ltr] & +It is applied when a parent element or this element has dir="ltr"

+
+
+

Optional _mediaDark

+
_mediaDark?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-color-scheme: dark) +It is used when the user has requested the system use a light or dark color theme.

+
+
+

Optional _mediaReduceMotion

+
_mediaReduceMotion?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-reduced-motion: reduce) +It is used when the user has requested the system to reduce the amount of animations.

+
+
+

Optional _notFirst

+
_notFirst?: SystemStyleObject
+

Styles for CSS Selector &:not(:first-of-type)

+
+
+

Optional _notLast

+
_notLast?: SystemStyleObject
+

Styles for CSS Selector &:not(:last-of-type)

+
+
+

Optional _odd

+
_odd?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(odd)

+
+
+

Optional _peerActive

+
_peerActive?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is active

+
+
+

Optional _peerChecked

+
_peerChecked?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is checked

+
+
+

Optional _peerDisabled

+
_peerDisabled?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is disabled

+
+
+

Optional _peerFocus

+
_peerFocus?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is focused

+
+
+

Optional _peerFocusVisible

+
_peerFocusVisible?: SystemStyleObject
+

Styles to apply when a sibling element with .peeror data-peer has visible focus

+
+
+

Optional _peerFocusWithin

+
_peerFocusWithin?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has focus within

+
+
+

Optional _peerHover

+
_peerHover?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is hovered

+
+
+

Optional _peerInvalid

+
_peerInvalid?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is invalid

+
+
+

Optional _peerPlaceholderShown

+
_peerPlaceholderShown?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

+
+
+

Optional _placeholder

+
_placeholder?: SystemStyleObject
+

Styles for CSS Selector &::placeholder.

+
+
+

Optional _placeholderShown

+
_placeholderShown?: SystemStyleObject
+

Styles for CSS Selector &:placeholder-shown.

+
+
+

Optional _pressed

+
_pressed?: SystemStyleObject
+

Styles for CSS Selector &[aria-pressed=true] +Typically used to style the current "pressed" state of toggle buttons

+
+
+

Optional _readOnly

+
_readOnly?: SystemStyleObject
+

Styles for CSS Selector &:readonly

+
+
+

Optional _rtl

+
_rtl?: SystemStyleObject
+

Styles for CSS Selector [dir=rtl] & +It is applied when a parent element or this element has dir="rtl"

+
+
+

Optional _selected

+
_selected?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-selected is true

+
    +
  • CSS selector &[aria-selected=true]
    • +
+
+
+

Optional _selection

+
_selection?: SystemStyleObject
+

Styles for CSS Selector &::selection

+
+
+

Optional _valid

+
_valid?: SystemStyleObject
+

Styles for the valid state

+
    +
  • CSS selector &[data-valid], &[data-state=valid]
    • +
+
+
+

Optional _visited

+
_visited?: SystemStyleObject
+

Styles for CSS Selector &:visited

+
+
+

Optional alignContent

+
alignContent?: ResponsiveValue<AlignContent>
+

The CSS align-content property.

+

It defines the distribution of space between and around +content items along a flexbox cross-axis or a grid's block axis.

+ +

See

Mozilla Docs

+
+
+

Optional alignItems

+
alignItems?: ResponsiveValue<AlignItems>
+

The CSS align-items property.

+

It defines the align-self value on all direct children as a group.

+
    +
  • In Flexbox, it controls the alignment of items on the Cross Axis.
    • +
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
    • +
+ +

See

Mozilla Docs

+
+
+

Optional alignSelf

+
alignSelf?: ResponsiveValue<AlignSelf>
+

The CSS align-self property.

+

It works like align-items, but applies only to a +single flexbox item, instead of all of them.

+ +

See

Mozilla Docs

+
+
+

Optional animation

+
animation?: ResponsiveValue<Animation<string & {}>>
+

The CSS animation property

+
+
+

Optional appearance

+
appearance?: ResponsiveValue<Appearance>
+

The CSS appearance property

+
+
+

Optional apply

+
apply?: ResponsiveValue<string>
+

Apply theme-aware style objects in theme

+ +

Example

<Box apply="styles.h3">This is a div</Box>
+
+

This will apply styles defined in theme.styles.h3

+
+
+

Optional aria-activedescendant

+
aria-activedescendant?: string
+

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

+
+
+

Optional aria-atomic

+
aria-atomic?: Booleanish
+

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

+
+
+

Optional aria-autocomplete

+
aria-autocomplete?: "none" | "both" | "inline" | "list"
+

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be +presented if they are made.

+
+
+

Optional aria-busy

+
aria-busy?: Booleanish
+

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

+
+
+

Optional aria-checked

+
aria-checked?: boolean | "true" | "false" | "mixed"
+

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

+ +

See

    +
  • aria-pressed
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-colcount

+
aria-colcount?: number
+

Defines the total number of columns in a table, grid, or treegrid.

+ +

See

aria-colindex.

+
+
+

Optional aria-colindex

+
aria-colindex?: number
+

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

+ +

See

    +
  • aria-colcount
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-colspan

+
aria-colspan?: number
+

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-colindex
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-controls

+
aria-controls?: string
+

Identifies the element (or elements) whose contents or presence are controlled by the current element.

+ +

See

aria-owns.

+
+
+

Optional aria-current

+
aria-current?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"
+

Indicates the element that represents the current item within a container or set of related elements.

+
+
+

Optional aria-describedby

+
aria-describedby?: string
+

Identifies the element (or elements) that describes the object.

+ +

See

aria-labelledby

+
+
+

Optional aria-details

+
aria-details?: string
+

Identifies the element that provides a detailed, extended description for the object.

+ +

See

aria-describedby.

+
+
+

Optional aria-disabled

+
aria-disabled?: Booleanish
+

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

+ +

See

    +
  • aria-hidden
    • +
  • aria-readonly.
    • +
+
+
+

Optional aria-dropeffect

+
aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"
+

Indicates what functions can be performed when a dragged object is released on the drop target.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-errormessage

+
aria-errormessage?: string
+

Identifies the element that provides an error message for the object.

+ +

See

    +
  • aria-invalid
    • +
  • aria-describedby.
    • +
+
+
+

Optional aria-expanded

+
aria-expanded?: Booleanish
+

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

+
+
+

Optional aria-flowto

+
aria-flowto?: string
+

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, +allows assistive technology to override the general default of reading in document source order.

+
+
+

Optional aria-grabbed

+
aria-grabbed?: Booleanish
+

Indicates an element's "grabbed" state in a drag-and-drop operation.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-haspopup

+
aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "true" | "false" | "tree"
+

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

+
+
+

Optional aria-hidden

+
aria-hidden?: Booleanish
+

Indicates whether the element is exposed to an accessibility API.

+ +

See

aria-disabled.

+
+
+

Optional aria-invalid

+
aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"
+

Indicates the entered value does not conform to the format expected by the application.

+ +

See

aria-errormessage.

+
+
+

Optional aria-keyshortcuts

+
aria-keyshortcuts?: string
+

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

+
+
+

Optional aria-label

+
aria-label?: string
+

Defines a string value that labels the current element.

+ +

See

aria-labelledby.

+
+
+

Optional aria-labelledby

+
aria-labelledby?: string
+

Identifies the element (or elements) that labels the current element.

+ +

See

aria-describedby.

+
+
+

Optional aria-level

+
aria-level?: number
+

Defines the hierarchical level of an element within a structure.

+
+
+

Optional aria-live

+
aria-live?: "off" | "assertive" | "polite"
+

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

+
+
+

Optional aria-modal

+
aria-modal?: Booleanish
+

Indicates whether an element is modal when displayed.

+
+
+

Optional aria-multiline

+
aria-multiline?: Booleanish
+

Indicates whether a text box accepts multiple lines of input or only a single line.

+
+
+

Optional aria-multiselectable

+
aria-multiselectable?: Booleanish
+

Indicates that the user may select more than one item from the current selectable descendants.

+
+
+

Optional aria-orientation

+
aria-orientation?: "horizontal" | "vertical"
+

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

+
+
+

Optional aria-owns

+
aria-owns?: string
+

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship +between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

+ +

See

aria-controls.

+
+
+

Optional aria-placeholder

+
aria-placeholder?: string
+

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. +A hint could be a sample value or a brief description of the expected format.

+
+
+

Optional aria-posinset

+
aria-posinset?: number
+

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-setsize.

+
+
+

Optional aria-pressed

+
aria-pressed?: boolean | "true" | "false" | "mixed"
+

Indicates the current "pressed" state of toggle buttons.

+ +

See

    +
  • aria-checked
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-readonly

+
aria-readonly?: Booleanish
+

Indicates that the element is not editable, but is otherwise operable.

+ +

See

aria-disabled.

+
+
+

Optional aria-relevant

+
aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
+

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

+ +

See

aria-atomic.

+
+
+

Optional aria-required

+
aria-required?: Booleanish
+

Indicates that user input is required on the element before a form may be submitted.

+
+
+

Optional aria-roledescription

+
aria-roledescription?: string
+

Defines a human-readable, author-localized description for the role of an element.

+
+
+

Optional aria-rowcount

+
aria-rowcount?: number
+

Defines the total number of rows in a table, grid, or treegrid.

+ +

See

aria-rowindex.

+
+
+

Optional aria-rowindex

+
aria-rowindex?: number
+

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowcount
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-rowspan

+
aria-rowspan?: number
+

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowindex
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-selected

+
aria-selected?: Booleanish
+

Indicates the current "selected" state of various widgets.

+ +

See

    +
  • aria-checked
    • +
  • aria-pressed.
    • +
+
+
+

Optional aria-setsize

+
aria-setsize?: number
+

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-posinset.

+
+
+

Optional aria-sort

+
aria-sort?: "none" | "ascending" | "descending" | "other"
+

Indicates if items in a table or grid are sorted in ascending or descending order.

+
+
+

Optional aria-valuemax

+
aria-valuemax?: number
+

Defines the maximum allowed value for a range widget.

+
+
+

Optional aria-valuemin

+
aria-valuemin?: number
+

Defines the minimum allowed value for a range widget.

+
+
+

Optional aria-valuenow

+
aria-valuenow?: number
+

Defines the current value for a range widget.

+ +

See

aria-valuetext.

+
+
+

Optional aria-valuetext

+
aria-valuetext?: string
+

Defines the human readable text alternative of aria-valuenow for a range widget.

+
+
+

Optional backdropBlur

+
backdropBlur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the backdrop-blur filter value of an element. +Value is assigned to --chakra-backdrop-blur css variable

+
+
+

Optional backdropBrightness

+
backdropBrightness?: ResponsiveValue<Length>
+

Sets the backdrop-brightness filter value of an element. +Value is assigned to --chakra-backdrop-brightness css variable

+
+
+

Optional backdropContrast

+
backdropContrast?: ResponsiveValue<Length>
+

Sets the backdrop-contrast filter value of an element. +Value is assigned to --chakra-backdrop-contrast css variable

+
+
+

Optional backdropFilter

+
backdropFilter?: ResponsiveValue<"auto" | BackdropFilter>
+

The CSS backdrop-filter property. When set to auto, you allow +Chakra UI to define the color based on the backdrop filter style props +(backdropBlur, backdropSaturate, etc.)

+
+
+

Optional backdropHueRotate

+
backdropHueRotate?: ResponsiveValue<Length>
+

Sets the backdrop-hue-rotate filter value of an element. +Value is assigned to --chakra-backdrop-hue-rotate css variable

+
+
+

Optional backdropInvert

+
backdropInvert?: ResponsiveValue<Length>
+

Sets the backdrop-invert filter value of an element. +Value is assigned to --chakra-backdrop-invert css variable

+
+
+

Optional backdropSaturate

+
backdropSaturate?: ResponsiveValue<Length>
+

Sets the backdrop-saturate filter value of an element. +Value is assigned to --chakra-backdrop-saturate css variable

+
+
+

Optional background

+
background?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional backgroundAttachment

+
backgroundAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional backgroundBlendMode

+
backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional backgroundClip

+
backgroundClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional backgroundColor

+
backgroundColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional backgroundImage

+
backgroundImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional backgroundPosition

+
backgroundPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional backgroundRepeat

+
backgroundRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional backgroundSize

+
backgroundSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional bg

+
bg?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional bgAttachment

+
bgAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional bgBlendMode

+
bgBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional bgClip

+
bgClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional bgColor

+
bgColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional bgGradient

+
bgGradient?: ResponsiveValue<string | string & {}>
+

The background-gradient shorthand

+
+
+

Optional bgImage

+
bgImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgImg

+
bgImg?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgPos

+
bgPos?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgPosition

+
bgPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgRepeat

+
bgRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional bgSize

+
bgSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional blendMode

+
blendMode?: ResponsiveValue<MixBlendMode>
+

The blend-mode property

+
+
+

Optional blur

+
blur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the blur filter value of an element. +Value is assigned to --chakra-filter css variable

+
+
+

Optional border

+
border?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border property

+
+
+

Optional borderBottom

+
borderBottom?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-bottom property

+
+
+

Optional borderBottomColor

+
borderBottomColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderBottomColor>
+

The CSS border-bottom-color property

+
+
+

Optional borderBottomLeftRadius

+
borderBottomLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional borderBottomRadius

+
borderBottomRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional borderBottomRightRadius

+
borderBottomRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional borderBottomStyle

+
borderBottomStyle?: ResponsiveValue<BorderBottomStyle>
+

The CSS border-bottom-style property

+
+
+

Optional borderBottomWidth

+
borderBottomWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-bottom-width property

+
+
+

Optional borderColor

+
borderColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-color property

+
+
+

Optional borderEndRadius

+
borderEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineEndRadius

+
borderInlineEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderInlineEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineStartRadius

+
borderInlineStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderInlineStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderLeft

+
borderLeft?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-left property

+
+
+

Optional borderLeftColor

+
borderLeftColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderLeftColor>
+

The CSS border-left-color property

+
+
+

Optional borderLeftRadius

+
borderLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional borderLeftStyle

+
borderLeftStyle?: ResponsiveValue<BorderLeftStyle>
+

The CSS border-left-style property

+
+
+

Optional borderLeftWidth

+
borderLeftWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-left-width property

+
+
+

Optional borderRadius

+
borderRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional borderRight

+
borderRight?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right property

+
+
+

Optional borderRightColor

+
borderRightColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderRightColor>
+

The CSS border-right-color property

+
+
+

Optional borderRightRadius

+
borderRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional borderRightStyle

+
borderRightStyle?: ResponsiveValue<BorderRightStyle>
+

The CSS border-right-styles property

+
+
+

Optional borderRightWidth

+
borderRightWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-right-width property

+
+
+

Optional borderStartRadius

+
borderStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderStyle

+
borderStyle?: ResponsiveValue<BorderStyle>
+

The CSS border-style property

+
+
+

Optional borderTop

+
borderTop?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top property

+
+
+

Optional borderTopColor

+
borderTopColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-top-color property

+
+
+

Optional borderTopLeftRadius

+
borderTopLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional borderTopRadius

+
borderTopRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional borderTopRightRadius

+
borderTopRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional borderTopStyle

+
borderTopStyle?: ResponsiveValue<BorderTopStyle>
+

The CSS border-top-style property

+
+
+

Optional borderTopWidth

+
borderTopWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-top-width property

+
+
+

Optional borderWidth

+
borderWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-width property

+
+
+

Optional borderX

+
borderX?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right and border-left property

+
+
+

Optional borderY

+
borderY?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top and border-bottom property

+
+
+

Optional bottom

+
bottom?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS bottom property

+
+
+

Optional boxDecorationBreak

+
boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>
+

The CSS box-decoration property

+
+
+

Optional boxShadow

+
boxShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional boxSize

+
boxSize?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width and height property

+
+
+

Optional boxSizing

+
boxSizing?: BoxSizing
+

The CSS box-sizing property

+
+
+

Optional brightness

+
brightness?: ResponsiveValue<Length>
+

Sets the brightness filter value of an element. +Value is assigned to --chakra-brightness css variable

+
+
+

Optional clipPath

+
clipPath?: ResponsiveValue<ClipPath>
+

The CSS clip-path property.

+

It creates a clipping region that sets what part of an element should be shown.

+
+
+

Optional color

+
color?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional columnGap

+
columnGap?: ResponsiveValue<ColumnGap<Length>>
+

The CSS column-gap property.

+

It sets the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional contrast

+
contrast?: ResponsiveValue<Length>
+

Sets the contrast filter value of an element. +Value is assigned to --chakra-contrast css variable

+
+
+

Optional control

+
control?: Control<any, any>
+

The control passed down from react-hook-form. +Only required if not using FormProvider

+
+
+

Optional css

+
css?: Interpolation<{}>
+

The emotion's css style object

+
+
+

Optional cursor

+
cursor?: ResponsiveValue<Cursor>
+

The CSS cursor property

+
+
+

Optional display

+
display?: ResponsiveValue<Display>
+

The CSS display property

+
+
+

Optional dropShadow

+
dropShadow?: ResponsiveValue<"base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

Sets the drop-shadow filter value of an element. +Value is assigned to --chakra-drop-shadow css variable

+
+
+

Optional fill

+
fill?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS fill property for icon svgs and paths

+
+
+

Optional filter

+
filter?: ResponsiveValue<Filter | "auto">
+

The CSS filter property. When set to auto, you allow +Chakra UI to define the color based on the filter style props +(blur, saturate, etc.)

+
+
+

Optional flex

+
flex?: ResponsiveValue<Flex<Length>>
+

The CSS flex property.

+

It defines how a flex item will grow or shrink +to fit the space available in its flex container.

+ +

See

Mozilla Docs

+
+
+

Optional flexBasis

+
flexBasis?: ResponsiveValue<FlexBasis<Length>>
+

The CSS flex-basis property.

+

It defines the initial main size of a flex item.

+ +

See

Mozilla Docs

+
+
+

Optional flexDir

+
flexDir?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexDirection

+
flexDirection?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexFlow

+
flexFlow?: ResponsiveValue<FlexFlow>
+

The CSS flex-flow property.

+

It is a shorthand property for flex-direction and flex-wrap. +It specifies the direction of a flex container, as well as its wrapping behavior.

+ +

See

Mozilla Docs

+
+
+

Optional flexGrow

+
flexGrow?: ResponsiveValue<FlexGrow>
+

The CSS flex-grow property.

+

It defines how much a flexbox item should grow +if there's space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexShrink

+
flexShrink?: ResponsiveValue<FlexShrink>
+

The CSS flex-shrink property.

+

It defines how much a flexbox item should shrink +if there's not enough space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexWrap

+
flexWrap?: ResponsiveValue<FlexWrap>
+

The CSS flex-wrap property.

+

It defines whether flex items are forced onto one line or +can wrap onto multiple lines. If wrapping is allowed, +it sets the direction that lines are stacked.

+ +

See

Mozilla Docs

+
+
+

Optional float

+
float?: ResponsiveValue<Float>
+

The CSS float property

+
+
+

Optional fontFamily

+
fontFamily?: ResponsiveValue<"body" | FontFamily | "heading" | "mono">
+

The CSS font-family property

+
+
+

Optional fontSize

+
fontSize?: ResponsiveValue<number | "small" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl">
+

The CSS font-size property

+
+
+

Optional fontStyle

+
fontStyle?: ResponsiveValue<FontStyle>
+

The CSS font-style property

+
+
+

Optional fontWeight

+
fontWeight?: ResponsiveValue<number | "bold" | string & {} | "black" | "normal" | "hairline" | "thin" | "light" | "medium" | "semibold" | "extrabold">
+

The CSS font-weight property

+
+
+

Optional gap

+
gap?: ResponsiveValue<Gap<Length>>
+

The CSS gap property.

+

It defines the gap between items in both flex and +grid contexts.

+ +

See

Mozilla Docs

+
+
+

Optional gridArea

+
gridArea?: ResponsiveValue<GridArea>
+

The CSS grid-areas property.

+

It specifies a grid item’s size and location within a grid by +contributing a line, a span, or nothing (automatic) +to its grid placement, thereby specifying the edges of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoColumns

+
gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>
+

The CSS grid-auto-columns property.

+

It specifies the size of an implicitly-created grid column track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoFlow

+
gridAutoFlow?: ResponsiveValue<GridAutoFlow>
+

The CSS grid-auto-flow property

+

It controls how the auto-placement algorithm works, +specifying exactly how auto-placed items get flowed into the grid.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoRows

+
gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>
+

The CSS grid-auto-rows property.

+

It specifies the size of an implicitly-created grid row track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumn

+
gridColumn?: ResponsiveValue<GridColumn>
+

The CSS grid-column property.

+

It specifies a grid item's size and location within a grid column +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnEnd

+
gridColumnEnd?: ResponsiveValue<GridColumnEnd>
+

The CSS grid-column property

+

It specifies a grid item’s end position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the block-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnGap

+
gridColumnGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-column-gap property.

+

It defines the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnStart

+
gridColumnStart?: ResponsiveValue<GridColumnStart>
+

The CSS grid-column property.

+

It specifies a grid item’s start position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement

+ +

See

Mozilla Docs

+
+
+

Optional gridGap

+
gridGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-gap property.

+

It defines the gaps (gutters) between rows and columns

+ +

See

Mozilla Docs

+
+
+

Optional gridRow

+
gridRow?: ResponsiveValue<GridRow>
+

The CSS grid-row property

+

It specifies a grid item’s size and location within the grid row +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowEnd

+
gridRowEnd?: ResponsiveValue<GridRowEnd>
+

The CSS grid-row-end property

+

It specifies a grid item’s end position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowGap

+
gridRowGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-row-gap property.

+

It defines the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowStart

+
gridRowStart?: ResponsiveValue<GridRowStart>
+

The CSS grid-row-start property

+

It specifies a grid item’s start position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplate

+
gridTemplate?: ResponsiveValue<GridTemplate>
+

The CSS grid-template property.

+

It is a shorthand property for defining grid columns, rows, and areas.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateAreas

+
gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>
+

The CSS grid-template-areas property.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateColumns

+
gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>
+

The CSS grid-template-columns property

+

It defines the line names and track sizing functions of the grid columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateRows

+
gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>
+

The CSS grid-template-rows property.

+

It defines the line names and track sizing functions of the grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional h

+
h?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional height

+
height?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional hideBelow

+
hideBelow?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element below the specified breakpoint

+
+
+

Optional hideFrom

+
hideFrom?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element from the specified breakpoint and up

+
+
+

Optional hueRotate

+
hueRotate?: ResponsiveValue<Length>
+

Sets the hue-rotate filter value of an element. +Value is assigned to --chakra-hue-rotate css variable

+
+
+

Optional iconSpacing

+
iconSpacing?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

The space between the button icon and label.

+
+
+

Optional inputMode

+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
+

Hints at the type of data that might be entered by the user while editing the element or its contents

+ +

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

+
+
+

Optional inset

+
inset?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, right, top, bottom property

+
+
+

Optional insetEnd

+
insetEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetEnd is equivalent to right. +When the direction is rtl, insetEnd is equivalent to left.

+
+
+

Optional insetInlineEnd

+
insetInlineEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetInlineEnd is equivalent to right. +When the direction is rtl, insetInlineEnd is equivalent to left.

+
+
+

Optional insetStart

+
insetStart?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is start, end is equivalent to left. +When the direction is start, end is equivalent to right.

+
+
+

Optional insetX

+
insetX?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, and right property

+
+
+

Optional insetY

+
insetY?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top, and bottom property

+
+
+

Optional invert

+
invert?: ResponsiveValue<Length>
+

Sets the invert filter value of an element. +Value is assigned to --chakra-invert css variable

+
+
+

Optional is

+
is?: string
+

Specify that a standard HTML element should behave like a defined custom built-in element

+ +

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

+
+
+

Optional isActive

+
isActive?: boolean
+

If true, the button will be styled in its active state.

+ +

Default

false

+
+
+

Optional isDisabled

+
isDisabled?: boolean
+

If true, the button will be disabled.

+ +

Default

false

+
+
+

Optional isLoading

+
isLoading?: boolean
+

If true, the button will show a spinner.

+ +

Default

false

+
+
+

Optional isTruncated

+
isTruncated?: boolean
+

If true, it clamps truncate a text after one line.

+
+
+

Optional isolation

+
isolation?: ResponsiveValue<Isolation>
+

The CSS isolation property

+
+
+

Optional justifyContent

+
justifyContent?: ResponsiveValue<JustifyContent>
+

The CSS justify-content property.

+

It defines how the browser distributes space between and around content items +along the main-axis of a flex container, and the inline axis of a grid container.

+ +

See

Mozilla Docs

+
+
+

Optional justifyItems

+
justifyItems?: ResponsiveValue<JustifyItems>
+

The CSS justify-items property.

+

It defines the default justify-self for all items of the box, +giving them all a default way of justifying each box +along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional justifySelf

+
justifySelf?: ResponsiveValue<JustifySelf>
+

The CSS justify-self property.

+

It defines the way a box is justified inside its +alignment container along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional layerStyle

+
layerStyle?: ResponsiveValue<string & {}>
+

The layer style object to apply. +Note: Styles must be located in theme.layerStyles

+
+
+

Optional left

+
left?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left property

+
+
+

Optional leftIcon

+
leftIcon?: ReactElement<any, string | JSXElementConstructor<any>>
+

If added, the button will show an icon before the button's label.

+
+
+

Optional letterSpacing

+
letterSpacing?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "tighter" | "tight" | "wide" | "wider" | "widest">
+

The CSS letter-spacing property

+
+
+

Optional lineHeight

+
lineHeight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "none" | "normal" | number & {} | "shorter" | "short" | "tall" | "taller">
+

The CSS line-height property

+
+
+

Optional listStyleImage

+
listStyleImage?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStyleImg

+
listStyleImg?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStylePos

+
listStylePos?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional listStylePosition

+
listStylePosition?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional loadingText

+
loadingText?: ReactNode
+

The label to show in the button when isLoading is true +If no text is passed, it only shows the spinner

+
+
+

Optional m

+
m?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional margin

+
margin?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional marginBottom

+
marginBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional marginEnd

+
marginEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginEnd is equivalent to marginRight. +When direction is rtl, marginEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineEnd

+
marginInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineEnd is equivalent to marginRight. +When direction is rtl, marginInlineEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineStart

+
marginInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineStart is equivalent to marginLeft. +When direction is rtl, marginInlineStart is equivalent to marginRight.

+
+
+

Optional marginLeft

+
marginLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional marginRight

+
marginRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional marginStart

+
marginStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginStart is equivalent to marginLeft. +When direction is rtl, marginStart is equivalent to marginRight.

+
+
+

Optional marginTop

+
marginTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional marginX

+
marginX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional marginY

+
marginY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

Optional maxH

+
maxH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxHeight

+
maxHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxW

+
maxW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional maxWidth

+
maxWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional mb

+
mb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional me

+
me?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, me is equivalent to marginRight. +When direction is rtl, me is equivalent to marginLeft.

+
+
+

Optional minH

+
minH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minHeight

+
minHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minW

+
minW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional minWidth

+
minWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional mixBlendMode

+
mixBlendMode?: ResponsiveValue<MixBlendMode>
+

The mix-blend-mode property

+
+
+

Optional ml

+
ml?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional mr

+
mr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional ms

+
ms?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, ms is equivalent to marginLeft. +When direction is rtl, ms is equivalent to marginRight.

+
+
+

Optional mt

+
mt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional mx

+
mx?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional my

+
my?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

Optional noOfLines

+
noOfLines?: ResponsiveValue<number>
+

Used to truncate text at a specific number of lines

+
+
+

Optional objectFit

+
objectFit?: ResponsiveValue<ObjectFit>
+

The CSS object-fit property

+
+
+

Optional objectPosition

+
objectPosition?: ResponsiveValue<ObjectPosition<Length>>
+

The CSS object-position property

+
+
+

Optional onKeyPress

+
onKeyPress?: KeyboardEventHandler<HTMLButtonElement>
+
+

Deprecated

+
+

Optional onKeyPressCapture

+
onKeyPressCapture?: KeyboardEventHandler<HTMLButtonElement>
+
+

Deprecated

+
+

Optional opacity

+
opacity?: ResponsiveValue<Opacity>
+

The CSS opacity property

+
+
+

Optional order

+
order?: ResponsiveValue<Order>
+

The CSS order property.

+

It defines the order to lay out an item in a flex or grid container.

+ +

See

Mozilla Docs

+
+
+

Optional outline

+
outline?: ResponsiveValue<Outline<Length>>
+

The CSS outline property

+
+
+

Optional outlineColor

+
outlineColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS outline-color property

+
+
+

Optional outlineOffset

+
outlineOffset?: ResponsiveValue<OutlineOffset<Length>>
+

The CSS outline-offset property

+
+
+

Optional overflow

+
overflow?: ResponsiveValue<Overflow>
+

The CSS overflow property

+
+
+

Optional overflowWrap

+
overflowWrap?: ResponsiveValue<OverflowWrap>
+

The CSS overflow-wrap property

+
+
+

Optional overflowX

+
overflowX?: ResponsiveValue<OverflowX>
+

The CSS overflow-x property

+
+
+

Optional overflowY

+
overflowY?: ResponsiveValue<OverflowY>
+

The CSS overflow-y property

+
+
+

Optional overscroll

+
overscroll?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehavior

+
overscrollBehavior?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehaviorX

+
overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollBehaviorY

+
overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional overscrollX

+
overscrollX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollY

+
overscrollY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional p

+
p?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional padding

+
padding?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional paddingBottom

+
paddingBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional paddingEnd

+
paddingEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingEnd is equivalent to paddingRight. +When direction is rtl, paddingEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineEnd

+
paddingInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineEnd is equivalent to paddingRight. +When direction is rtl, paddingInlineEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineStart

+
paddingInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineStart is equivalent to paddingLeft. +When direction is rtl, paddingInlineStart is equivalent to paddingRight.

+
+
+

Optional paddingLeft

+
paddingLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional paddingRight

+
paddingRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional paddingStart

+
paddingStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingStart is equivalent to paddingLeft. +When direction is rtl, paddingStart is equivalent to paddingRight.

+
+
+

Optional paddingTop

+
paddingTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional paddingX

+
paddingX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional paddingY

+
paddingY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional pb

+
pb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional pe

+
pe?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, pe is equivalent to paddingRight. +When direction is rtl, pe is equivalent to paddingLeft.

+
+
+

Optional pl

+
pl?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional placeContent

+
placeContent?: ResponsiveValue<PlaceContent>
+

The CSS place-content property.

+

It allows you to align content along both the block and +inline directions at once (i.e. the align-content and justify-content properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional placeItems

+
placeItems?: ResponsiveValue<PlaceItems>
+

The CSS place-items property.

+

It allows you to align items along both the block and +inline directions at once (i.e. the align-items and justify-items properties) +in a relevant layout system such as Grid or Flex.

+ +

See

Mozilla Docs

+
+
+

Optional placeSelf

+
placeSelf?: ResponsiveValue<PlaceSelf>
+

The CSS place-self property.

+

It allows you to align an individual item in both the block and +inline directions at once (i.e. the align-self and justify-self properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional pointerEvents

+
pointerEvents?: ResponsiveValue<PointerEvents>
+

The CSS pointer-events property

+
+
+

Optional pos

+
pos?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional position

+
position?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional pr

+
pr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional ps

+
ps?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, ps is equivalent to paddingLeft. +When direction is rtl, ps is equivalent to paddingRight.

+
+
+

Optional pt

+
pt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional px

+
px?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional py

+
py?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional resize

+
resize?: ResponsiveValue<Resize>
+

The CSS resize property

+
+
+

Optional right

+
right?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS right property

+
+
+

Optional rightIcon

+
rightIcon?: ReactElement<any, string | JSXElementConstructor<any>>
+

If added, the button will show an icon after the button's label.

+
+
+

Optional ring

+
ring?: ResponsiveValue<Length>
+

Creates outline rings with CSS box-shadow property

+
+
+

Optional ringColor

+
ringColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the outline ring

+
+
+

Optional ringInset

+
ringInset?: ResponsiveValue<"inset" | "none">
+

If the outline ring should an inset

+
+
+

Optional ringOffset

+
ringOffset?: ResponsiveValue<Length>
+

The thickness of the offset shadow when using outline rings

+
+
+

Optional ringOffsetColor

+
ringOffsetColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the offset shadow when adding outline rings

+
+
+

Optional rotate

+
rotate?: ResponsiveValue<Length>
+

Sets the rotation value of the element

+
+
+

Optional rounded

+
rounded?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional roundedBottom

+
roundedBottom?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional roundedBottomLeft

+
roundedBottomLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional roundedBottomRight

+
roundedBottomRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional roundedEnd

+
roundedEnd?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedLeft

+
roundedLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional roundedRight

+
roundedRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional roundedStart

+
roundedStart?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedTop

+
roundedTop?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional roundedTopLeft

+
roundedTopLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional roundedTopRight

+
roundedTopRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional rowGap

+
rowGap?: ResponsiveValue<RowGap<Length>>
+

The CSS row-gap property.

+

It sets the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional saturate

+
saturate?: ResponsiveValue<Length>
+

Sets the saturation filter value of an element. +Value is assigned to --chakra-saturate css variable

+
+
+

Optional scale

+
scale?: ResponsiveValue<Length>
+

Sets the scale value of the element

+
+
+

Optional scaleX

+
scaleX?: ResponsiveValue<Length>
+

Scale value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-x
    • +
+
+
+

Optional scaleY

+
scaleY?: ResponsiveValue<Length>
+

Scale value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-y
    • +
+
+
+

Optional shadow

+
shadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional skewX

+
skewX?: ResponsiveValue<Length>
+

Skew value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-x
    • +
+
+
+

Optional skewY

+
skewY?: ResponsiveValue<Length>
+

Skew value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-y
    • +
+
+
+

Optional spinner

+
spinner?: ReactElement<any, string | JSXElementConstructor<any>>
+

Replace the spinner component when isLoading is set to true

+
+
+

Optional spinnerPlacement

+
spinnerPlacement?: "end" | "start"
+

It determines the placement of the spinner when isLoading is true

+ +

Default

"start"

+
+
+

Optional srOnly

+
srOnly?: true | "focusable"
+

If true, hide an element visually without hiding it from screen readers.

+

If focusable, the sr-only styles will be undone, making the element visible +to sighted users as well as screen readers.

+
+
+

Optional stroke

+
stroke?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS stroke property for icon svgs and paths

+
+
+

Optional sx

+
sx?: SystemStyleObject
+

Used to pass theme-aware style props. +NB: This is the public API for user-land

+
+
+

Optional textAlign

+
textAlign?: ResponsiveValue<TextAlign>
+

The CSS text-align property

+
+
+

Optional textColor

+
textColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional textDecor

+
textDecor?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecoration

+
textDecoration?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecorationColor

+
textDecorationColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | TextDecorationColor>
+

The CSS text-decoration-color property

+
+
+

Optional textDecorationLine

+
textDecorationLine?: ResponsiveValue<TextDecorationLine>
+

The CSS text-decoration-line property

+
+
+

Optional textDecorationStyle

+
textDecorationStyle?: ResponsiveValue<TextDecorationStyle>
+

The CSS text-decoration-style property

+
+
+

Optional textDecorationThickness

+
textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>
+

The CSS text-decoration-thickness property

+
+
+

Optional textIndent

+
textIndent?: ResponsiveValue<TextIndent<0 | string & {}>>
+

The CSS text-indent property

+
+
+

Optional textOverflow

+
textOverflow?: ResponsiveValue<TextOverflow>
+

The CSS text-overflow property

+
+
+

Optional textShadow

+
textShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "inner" | "dark-lg" | TextShadow>
+

The text-shadow property

+
+
+

Optional textStyle

+
textStyle?: ResponsiveValue<string & {}>
+

The text style object to apply. +Note: Styles must be located in theme.textStyles

+
+
+

Optional textTransform

+
textTransform?: ResponsiveValue<TextTransform>
+

The CSS text-transform property

+
+
+

Optional textUnderlineOffset

+
textUnderlineOffset?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto">
+

The CSS text-underline-offset property

+
+
+

Optional top

+
top?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top property

+
+
+

Optional transform

+
transform?: ResponsiveValue<"auto" | Transform | "auto-gpu">
+

The CSS transform property

+
+
+

Optional transformOrigin

+
transformOrigin?: ResponsiveValue<number | "center" | "px" | "top" | "right" | "bottom" | "left" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS transform-origin property

+
+
+

Optional transition

+
transition?: ResponsiveValue<Transition<string & {}>>
+

The CSS transition property

+
+
+

Optional transitionDelay

+
transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>
+

The CSS transition-delay property

+
+
+

Optional transitionDuration

+
transitionDuration?: ResponsiveValue<string>
+

The CSS transition-duration property

+
+
+

Optional transitionProperty

+
transitionProperty?: ResponsiveValue<TransitionProperty>
+

The CSS transition-property property

+
+
+

Optional transitionTimingFunction

+
transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>
+

The CSS transition-timing-function property

+
+
+

Optional translateX

+
translateX?: ResponsiveValue<Length>
+

Translate value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-x
    • +
+
+
+

Optional translateY

+
translateY?: ResponsiveValue<Length>
+

Translate value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-y
    • +
+
+
+

Optional userSelect

+
userSelect?: ResponsiveValue<UserSelect>
+

The CSS user-select property

+
+
+

Optional verticalAlign

+
verticalAlign?: ResponsiveValue<VerticalAlign<Length>>
+

The CSS vertical-align property

+
+
+

Optional visibility

+
visibility?: ResponsiveValue<Visibility>
+

The CSS visibility property

+
+
+

Optional w

+
w?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional whiteSpace

+
whiteSpace?: ResponsiveValue<WhiteSpace>
+

The CSS white-space property

+
+
+

Optional width

+
width?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional willChange

+
willChange?: ResponsiveValue<WillChange>
+

The CSS will-change property

+
+
+

Optional wordBreak

+
wordBreak?: ResponsiveValue<WordBreak>
+

The CSS word-break property

+
+
+

Optional zIndex

+
zIndex?: ResponsiveValue<"base" | "overlay" | ZIndex | "hide" | "docked" | "dropdown" | "sticky" | "banner" | "modal" | "popover" | "skipLink" | "toast" | "tooltip">
+

The CSS z-index property

+
+
+
+
+

Settings

 +
+
+

Member Visibility

+
    +
    • +
    • +
    • +
    • +
    • +
+
+

Theme

+ +
+
+

Generated using TypeDoc

+
\ No newline at end of file diff --git a/docs/interfaces/SwitchControlProps.html b/docs/interfaces/SwitchControlProps.html new file mode 100644 index 0000000..4c6353a --- /dev/null +++ b/docs/interfaces/SwitchControlProps.html @@ -0,0 +1,4485 @@ +SwitchControlProps | react-hook-form-chakra
+
+ +
+
+
+
+ +

Interface SwitchControlProps

+
+

The union of ChakraFormControlProps and BaseReactHookFormProps which defines the base properties +for most of react-hook-form-chakra components

+
+
+

Hierarchy

+
+
+
+
+ +
+
+

Properties

+
__css? +_active? +_activeLink? +_activeStep? +_after? +_autofill? +_before? +_checked? +_dark? +_disabled? +_empty? +_even? +_expanded? +_first? +_firstLetter? +_focus? +_focusVisible? +_focusWithin? +_fullScreen? +_grabbed? +_groupActive? +_groupChecked? +_groupDisabled? +_groupFocus? +_groupFocusVisible? +_groupFocusWithin? +_groupHover? +_groupInvalid? +_hidden? +_highlighted? +_hover? +_indeterminate? +_invalid? +_last? +_light? +_loading? +_ltr? +_mediaDark? +_mediaReduceMotion? +_notFirst? +_notLast? +_odd? +_peerActive? +_peerChecked? +_peerDisabled? +_peerFocus? +_peerFocusVisible? +_peerFocusWithin? +_peerHover? +_peerInvalid? +_peerPlaceholderShown? +_placeholder? +_placeholderShown? +_pressed? +_readOnly? +_rtl? +_selected? +_selection? +_valid? +_visited? +alignContent? +alignItems? +alignSelf? +animation? +appearance? +apply? +aria-activedescendant? +aria-atomic? +aria-autocomplete? +aria-busy? +aria-checked? +aria-colcount? +aria-colindex? +aria-colspan? +aria-controls? +aria-current? +aria-describedby? +aria-details? +aria-disabled? +aria-dropeffect? +aria-errormessage? +aria-expanded? +aria-flowto? +aria-grabbed? +aria-haspopup? +aria-hidden? +aria-invalid? +aria-keyshortcuts? +aria-label? +aria-labelledby? +aria-level? +aria-live? +aria-modal? +aria-multiline? +aria-multiselectable? +aria-orientation? +aria-owns? +aria-placeholder? +aria-posinset? +aria-pressed? +aria-readonly? +aria-relevant? +aria-required? +aria-roledescription? +aria-rowcount? +aria-rowindex? +aria-rowspan? +aria-selected? +aria-setsize? +aria-sort? +aria-valuemax? +aria-valuemin? +aria-valuenow? +aria-valuetext? +backdropBlur? +backdropBrightness? +backdropContrast? +backdropFilter? +backdropHueRotate? +backdropInvert? +backdropSaturate? +background? +backgroundAttachment? +backgroundBlendMode? +backgroundClip? +backgroundColor? +backgroundImage? +backgroundPosition? +backgroundRepeat? +backgroundSize? +bg? +bgAttachment? +bgBlendMode? +bgClip? +bgColor? +bgGradient? +bgImage? +bgImg? +bgPos? +bgPosition? +bgRepeat? +bgSize? +blendMode? +blur? +border? +borderBottom? +borderBottomColor? +borderBottomLeftRadius? +borderBottomRadius? +borderBottomRightRadius? +borderBottomStyle? +borderBottomWidth? +borderColor? +borderEndRadius? +borderInlineEndRadius? +borderInlineStartRadius? +borderLeft? +borderLeftColor? +borderLeftRadius? +borderLeftStyle? +borderLeftWidth? +borderRadius? +borderRight? +borderRightColor? +borderRightRadius? +borderRightStyle? +borderRightWidth? +borderStartRadius? +borderStyle? +borderTop? +borderTopColor? +borderTopLeftRadius? +borderTopRadius? +borderTopRightRadius? +borderTopStyle? +borderTopWidth? +borderWidth? +borderX? +borderY? +bottom? +boxDecorationBreak? +boxShadow? +boxSize? +boxSizing? +brightness? +clipPath? +color? +columnGap? +contrast? +control? +css? +cursor? +display? +dropShadow? +errorMessageProps? +fill? +filter? +flex? +flexBasis? +flexDir? +flexDirection? +flexFlow? +flexGrow? +flexShrink? +flexWrap? +float? +fontFamily? +fontSize? +fontStyle? +fontWeight? +gap? +gridArea? +gridAutoColumns? +gridAutoFlow? +gridAutoRows? +gridColumn? +gridColumnEnd? +gridColumnGap? +gridColumnStart? +gridGap? +gridRow? +gridRowEnd? +gridRowGap? +gridRowStart? +gridTemplate? +gridTemplateAreas? +gridTemplateColumns? +gridTemplateRows? +h? +height? +helperText? +helperTextProps? +hideBelow? +hideFrom? +hueRotate? +inputMode? +inset? +insetEnd? +insetInlineEnd? +insetStart? +insetX? +insetY? +invert? +is? +isDisabled? +isInvalid? +isReadOnly? +isRequired? +isTruncated? +isolation? +justifyContent? +justifyItems? +justifySelf? +label? +labelProps? +layerStyle? +left? +letterSpacing? +lineHeight? +listStyleImage? +listStyleImg? +listStylePos? +listStylePosition? +m? +margin? +marginBottom? +marginEnd? +marginInlineEnd? +marginInlineStart? +marginLeft? +marginRight? +marginStart? +marginTop? +marginX? +marginY? +maxH? +maxHeight? +maxW? +maxWidth? +mb? +me? +minH? +minHeight? +minW? +minWidth? +mixBlendMode? +ml? +mr? +ms? +mt? +mx? +my? +name +noOfLines? +objectFit? +objectPosition? +onKeyPress? +onKeyPressCapture? +opacity? +order? +outline? +outlineColor? +outlineOffset? +overflow? +overflowWrap? +overflowX? +overflowY? +overscroll? +overscrollBehavior? +overscrollBehaviorX? +overscrollBehaviorY? +overscrollX? +overscrollY? +p? +padding? +paddingBottom? +paddingEnd? +paddingInlineEnd? +paddingInlineStart? +paddingLeft? +paddingRight? +paddingStart? +paddingTop? +paddingX? +paddingY? +pb? +pe? +pl? +placeContent? +placeItems? +placeSelf? +pointerEvents? +pos? +position? +pr? +ps? +pt? +px? +py? +resize? +right? +ring? +ringColor? +ringInset? +ringOffset? +ringOffsetColor? +rotate? +rounded? +roundedBottom? +roundedBottomLeft? +roundedBottomRight? +roundedEnd? +roundedLeft? +roundedRight? +roundedStart? +roundedTop? +roundedTopLeft? +roundedTopRight? +rowGap? +saturate? +scale? +scaleX? +scaleY? +shadow? +skewX? +skewY? +srOnly? +stroke? +switchProps? +sx? +textAlign? +textColor? +textDecor? +textDecoration? +textDecorationColor? +textDecorationLine? +textDecorationStyle? +textDecorationThickness? +textIndent? +textOverflow? +textShadow? +textStyle? +textTransform? +textUnderlineOffset? +top? +transform? +transformOrigin? +transition? +transitionDelay? +transitionDuration? +transitionProperty? +transitionTimingFunction? +translateX? +translateY? +userSelect? +verticalAlign? +visibility? +w? +whiteSpace? +width? +willChange? +wordBreak? +zIndex? +
+
+

Properties

+
+

Optional Private __css

+
__css?: SystemStyleObject
+

Used for internal css management

+
+
+

Optional _active

+
_active?: SystemStyleObject
+

Styles for CSS Selector &:active

+
+
+

Optional _activeLink

+
_activeLink?: SystemStyleObject
+

Used to style the active link in a navigation +Styles for CSS Selector &[aria-current=page]

+
+
+

Optional _activeStep

+
_activeStep?: SystemStyleObject
+

Used to style the current step within a process +Styles for CSS Selector &[aria-current=step]

+
+
+

Optional _after

+
_after?: SystemStyleObject
+

Styles for CSS selector &::after

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _after={{content:`""` }}/>
+
+
+
+

Optional _autofill

+
_autofill?: SystemStyleObject
+

Styles for CSS Selector &:-webkit-autofill

+
+
+

Optional _before

+
_before?: SystemStyleObject
+

Styles for CSS selector &::before

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _before={{content:`""` }}/>
+
+
+
+

Optional _checked

+
_checked?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is true

+
    +
  • CSS selector &[aria-checked=true]
    • +
+
+
+

Optional _dark

+
_dark?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _disabled

+
_disabled?: SystemStyleObject
+

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

+
    +
  • &[aria-disabled=true]
    • +
  • &:disabled
    • +
  • &[data-disabled]
    • +
  • &[disabled]
    • +
+
+
+

Optional _empty

+
_empty?: SystemStyleObject
+

Styles for CSS selector &:empty

+
+
+

Optional _even

+
_even?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(even)

+
+
+

Optional _expanded

+
_expanded?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-expanded is true

+
    +
  • CSS selector &[aria-expanded=true]
    • +
+
+
+

Optional _first

+
_first?: SystemStyleObject
+

Styles for CSS Selector &:first-of-type

+
+
+

Optional _firstLetter

+
_firstLetter?: SystemStyleObject
+

Styles for CSS selector &::first-letter

+

NOTE: This selector is only applied for block-level elements and not preceded by an image or table.

+ +

Example

<Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
+
+
+
+

Optional _focus

+
_focus?: SystemStyleObject
+

Styles for CSS selector &:focus

+
+
+

Optional _focusVisible

+
_focusVisible?: SystemStyleObject
+

Styles to apply when this element has received focus via tabbing

+
    +
  • CSS Selector &:focus-visible
    • +
+
+
+

Optional _focusWithin

+
_focusWithin?: SystemStyleObject
+

Styles to apply when a child of this element has received focus

+
    +
  • CSS Selector &:focus-within
    • +
+
+
+

Optional _fullScreen

+
_fullScreen?: SystemStyleObject
+

Styles for CSS Selector &:fullscreen.

+
+
+

Optional _grabbed

+
_grabbed?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-grabbed is true

+
    +
  • CSS selector &[aria-grabbed=true]
    • +
+
+
+

Optional _groupActive

+
_groupActive?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is active

+
+
+

Optional _groupChecked

+
_groupChecked?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is checked

+
+
+

Optional _groupDisabled

+
_groupDisabled?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is disabled

+
+
+

Optional _groupFocus

+
_groupFocus?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is focused

+
+
+

Optional _groupFocusVisible

+
_groupFocusVisible?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has visible focus

+
+
+

Optional _groupFocusWithin

+
_groupFocusWithin?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has focus within

+
+
+

Optional _groupHover

+
_groupHover?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is hovered

+
+
+

Optional _groupInvalid

+
_groupInvalid?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is invalid

+
+
+

Optional _hidden

+
_hidden?: SystemStyleObject
+

Styles for CSS Selector [hidden=true]

+
+
+

Optional _highlighted

+
_highlighted?: SystemStyleObject
+

Styles for the highlighted state.

+
+
+

Optional _hover

+
_hover?: SystemStyleObject
+

Styles for CSS selector &:hover

+
+
+

Optional _indeterminate

+
_indeterminate?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is mixed

+
    +
  • CSS selector &[aria-checked=mixed]
    • +
+
+
+

Optional _invalid

+
_invalid?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-invalid is true

+
    +
  • CSS selector &[aria-invalid=true]
    • +
+
+
+

Optional _last

+
_last?: SystemStyleObject
+

Styles for CSS Selector &:last-of-type

+
+
+

Optional _light

+
_light?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _loading

+
_loading?: SystemStyleObject
+

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. +Useful for styling loading states

+
+
+

Optional _ltr

+
_ltr?: SystemStyleObject
+

Styles for CSS Selector [dir=ltr] & +It is applied when a parent element or this element has dir="ltr"

+
+
+

Optional _mediaDark

+
_mediaDark?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-color-scheme: dark) +It is used when the user has requested the system use a light or dark color theme.

+
+
+

Optional _mediaReduceMotion

+
_mediaReduceMotion?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-reduced-motion: reduce) +It is used when the user has requested the system to reduce the amount of animations.

+
+
+

Optional _notFirst

+
_notFirst?: SystemStyleObject
+

Styles for CSS Selector &:not(:first-of-type)

+
+
+

Optional _notLast

+
_notLast?: SystemStyleObject
+

Styles for CSS Selector &:not(:last-of-type)

+
+
+

Optional _odd

+
_odd?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(odd)

+
+
+

Optional _peerActive

+
_peerActive?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is active

+
+
+

Optional _peerChecked

+
_peerChecked?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is checked

+
+
+

Optional _peerDisabled

+
_peerDisabled?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is disabled

+
+
+

Optional _peerFocus

+
_peerFocus?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is focused

+
+
+

Optional _peerFocusVisible

+
_peerFocusVisible?: SystemStyleObject
+

Styles to apply when a sibling element with .peeror data-peer has visible focus

+
+
+

Optional _peerFocusWithin

+
_peerFocusWithin?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has focus within

+
+
+

Optional _peerHover

+
_peerHover?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is hovered

+
+
+

Optional _peerInvalid

+
_peerInvalid?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is invalid

+
+
+

Optional _peerPlaceholderShown

+
_peerPlaceholderShown?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

+
+
+

Optional _placeholder

+
_placeholder?: SystemStyleObject
+

Styles for CSS Selector &::placeholder.

+
+
+

Optional _placeholderShown

+
_placeholderShown?: SystemStyleObject
+

Styles for CSS Selector &:placeholder-shown.

+
+
+

Optional _pressed

+
_pressed?: SystemStyleObject
+

Styles for CSS Selector &[aria-pressed=true] +Typically used to style the current "pressed" state of toggle buttons

+
+
+

Optional _readOnly

+
_readOnly?: SystemStyleObject
+

Styles for CSS Selector &:readonly

+
+
+

Optional _rtl

+
_rtl?: SystemStyleObject
+

Styles for CSS Selector [dir=rtl] & +It is applied when a parent element or this element has dir="rtl"

+
+
+

Optional _selected

+
_selected?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-selected is true

+
    +
  • CSS selector &[aria-selected=true]
    • +
+
+
+

Optional _selection

+
_selection?: SystemStyleObject
+

Styles for CSS Selector &::selection

+
+
+

Optional _valid

+
_valid?: SystemStyleObject
+

Styles for the valid state

+
    +
  • CSS selector &[data-valid], &[data-state=valid]
    • +
+
+
+

Optional _visited

+
_visited?: SystemStyleObject
+

Styles for CSS Selector &:visited

+
+
+

Optional alignContent

+
alignContent?: ResponsiveValue<AlignContent>
+

The CSS align-content property.

+

It defines the distribution of space between and around +content items along a flexbox cross-axis or a grid's block axis.

+ +

See

Mozilla Docs

+
+
+

Optional alignItems

+
alignItems?: ResponsiveValue<AlignItems>
+

The CSS align-items property.

+

It defines the align-self value on all direct children as a group.

+
    +
  • In Flexbox, it controls the alignment of items on the Cross Axis.
    • +
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
    • +
+ +

See

Mozilla Docs

+
+
+

Optional alignSelf

+
alignSelf?: ResponsiveValue<AlignSelf>
+

The CSS align-self property.

+

It works like align-items, but applies only to a +single flexbox item, instead of all of them.

+ +

See

Mozilla Docs

+
+
+

Optional animation

+
animation?: ResponsiveValue<Animation<string & {}>>
+

The CSS animation property

+
+
+

Optional appearance

+
appearance?: ResponsiveValue<Appearance>
+

The CSS appearance property

+
+
+

Optional apply

+
apply?: ResponsiveValue<string>
+

Apply theme-aware style objects in theme

+ +

Example

<Box apply="styles.h3">This is a div</Box>
+
+

This will apply styles defined in theme.styles.h3

+
+
+

Optional aria-activedescendant

+
aria-activedescendant?: string
+

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

+
+
+

Optional aria-atomic

+
aria-atomic?: Booleanish
+

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

+
+
+

Optional aria-autocomplete

+
aria-autocomplete?: "none" | "both" | "inline" | "list"
+

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be +presented if they are made.

+
+
+

Optional aria-busy

+
aria-busy?: Booleanish
+

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

+
+
+

Optional aria-checked

+
aria-checked?: boolean | "true" | "false" | "mixed"
+

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

+ +

See

    +
  • aria-pressed
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-colcount

+
aria-colcount?: number
+

Defines the total number of columns in a table, grid, or treegrid.

+ +

See

aria-colindex.

+
+
+

Optional aria-colindex

+
aria-colindex?: number
+

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

+ +

See

    +
  • aria-colcount
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-colspan

+
aria-colspan?: number
+

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-colindex
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-controls

+
aria-controls?: string
+

Identifies the element (or elements) whose contents or presence are controlled by the current element.

+ +

See

aria-owns.

+
+
+

Optional aria-current

+
aria-current?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"
+

Indicates the element that represents the current item within a container or set of related elements.

+
+
+

Optional aria-describedby

+
aria-describedby?: string
+

Identifies the element (or elements) that describes the object.

+ +

See

aria-labelledby

+
+
+

Optional aria-details

+
aria-details?: string
+

Identifies the element that provides a detailed, extended description for the object.

+ +

See

aria-describedby.

+
+
+

Optional aria-disabled

+
aria-disabled?: Booleanish
+

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

+ +

See

    +
  • aria-hidden
    • +
  • aria-readonly.
    • +
+
+
+

Optional aria-dropeffect

+
aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"
+

Indicates what functions can be performed when a dragged object is released on the drop target.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-errormessage

+
aria-errormessage?: string
+

Identifies the element that provides an error message for the object.

+ +

See

    +
  • aria-invalid
    • +
  • aria-describedby.
    • +
+
+
+

Optional aria-expanded

+
aria-expanded?: Booleanish
+

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

+
+
+

Optional aria-flowto

+
aria-flowto?: string
+

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, +allows assistive technology to override the general default of reading in document source order.

+
+
+

Optional aria-grabbed

+
aria-grabbed?: Booleanish
+

Indicates an element's "grabbed" state in a drag-and-drop operation.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-haspopup

+
aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "true" | "false" | "tree"
+

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

+
+
+

Optional aria-hidden

+
aria-hidden?: Booleanish
+

Indicates whether the element is exposed to an accessibility API.

+ +

See

aria-disabled.

+
+
+

Optional aria-invalid

+
aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"
+

Indicates the entered value does not conform to the format expected by the application.

+ +

See

aria-errormessage.

+
+
+

Optional aria-keyshortcuts

+
aria-keyshortcuts?: string
+

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

+
+
+

Optional aria-label

+
aria-label?: string
+

Defines a string value that labels the current element.

+ +

See

aria-labelledby.

+
+
+

Optional aria-labelledby

+
aria-labelledby?: string
+

Identifies the element (or elements) that labels the current element.

+ +

See

aria-describedby.

+
+
+

Optional aria-level

+
aria-level?: number
+

Defines the hierarchical level of an element within a structure.

+
+
+

Optional aria-live

+
aria-live?: "off" | "assertive" | "polite"
+

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

+
+
+

Optional aria-modal

+
aria-modal?: Booleanish
+

Indicates whether an element is modal when displayed.

+
+
+

Optional aria-multiline

+
aria-multiline?: Booleanish
+

Indicates whether a text box accepts multiple lines of input or only a single line.

+
+
+

Optional aria-multiselectable

+
aria-multiselectable?: Booleanish
+

Indicates that the user may select more than one item from the current selectable descendants.

+
+
+

Optional aria-orientation

+
aria-orientation?: "horizontal" | "vertical"
+

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

+
+
+

Optional aria-owns

+
aria-owns?: string
+

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship +between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

+ +

See

aria-controls.

+
+
+

Optional aria-placeholder

+
aria-placeholder?: string
+

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. +A hint could be a sample value or a brief description of the expected format.

+
+
+

Optional aria-posinset

+
aria-posinset?: number
+

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-setsize.

+
+
+

Optional aria-pressed

+
aria-pressed?: boolean | "true" | "false" | "mixed"
+

Indicates the current "pressed" state of toggle buttons.

+ +

See

    +
  • aria-checked
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-readonly

+
aria-readonly?: Booleanish
+

Indicates that the element is not editable, but is otherwise operable.

+ +

See

aria-disabled.

+
+
+

Optional aria-relevant

+
aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
+

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

+ +

See

aria-atomic.

+
+
+

Optional aria-required

+
aria-required?: Booleanish
+

Indicates that user input is required on the element before a form may be submitted.

+
+
+

Optional aria-roledescription

+
aria-roledescription?: string
+

Defines a human-readable, author-localized description for the role of an element.

+
+
+

Optional aria-rowcount

+
aria-rowcount?: number
+

Defines the total number of rows in a table, grid, or treegrid.

+ +

See

aria-rowindex.

+
+
+

Optional aria-rowindex

+
aria-rowindex?: number
+

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowcount
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-rowspan

+
aria-rowspan?: number
+

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowindex
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-selected

+
aria-selected?: Booleanish
+

Indicates the current "selected" state of various widgets.

+ +

See

    +
  • aria-checked
    • +
  • aria-pressed.
    • +
+
+
+

Optional aria-setsize

+
aria-setsize?: number
+

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-posinset.

+
+
+

Optional aria-sort

+
aria-sort?: "none" | "ascending" | "descending" | "other"
+

Indicates if items in a table or grid are sorted in ascending or descending order.

+
+
+

Optional aria-valuemax

+
aria-valuemax?: number
+

Defines the maximum allowed value for a range widget.

+
+
+

Optional aria-valuemin

+
aria-valuemin?: number
+

Defines the minimum allowed value for a range widget.

+
+
+

Optional aria-valuenow

+
aria-valuenow?: number
+

Defines the current value for a range widget.

+ +

See

aria-valuetext.

+
+
+

Optional aria-valuetext

+
aria-valuetext?: string
+

Defines the human readable text alternative of aria-valuenow for a range widget.

+
+
+

Optional backdropBlur

+
backdropBlur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the backdrop-blur filter value of an element. +Value is assigned to --chakra-backdrop-blur css variable

+
+
+

Optional backdropBrightness

+
backdropBrightness?: ResponsiveValue<Length>
+

Sets the backdrop-brightness filter value of an element. +Value is assigned to --chakra-backdrop-brightness css variable

+
+
+

Optional backdropContrast

+
backdropContrast?: ResponsiveValue<Length>
+

Sets the backdrop-contrast filter value of an element. +Value is assigned to --chakra-backdrop-contrast css variable

+
+
+

Optional backdropFilter

+
backdropFilter?: ResponsiveValue<"auto" | BackdropFilter>
+

The CSS backdrop-filter property. When set to auto, you allow +Chakra UI to define the color based on the backdrop filter style props +(backdropBlur, backdropSaturate, etc.)

+
+
+

Optional backdropHueRotate

+
backdropHueRotate?: ResponsiveValue<Length>
+

Sets the backdrop-hue-rotate filter value of an element. +Value is assigned to --chakra-backdrop-hue-rotate css variable

+
+
+

Optional backdropInvert

+
backdropInvert?: ResponsiveValue<Length>
+

Sets the backdrop-invert filter value of an element. +Value is assigned to --chakra-backdrop-invert css variable

+
+
+

Optional backdropSaturate

+
backdropSaturate?: ResponsiveValue<Length>
+

Sets the backdrop-saturate filter value of an element. +Value is assigned to --chakra-backdrop-saturate css variable

+
+
+

Optional background

+
background?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional backgroundAttachment

+
backgroundAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional backgroundBlendMode

+
backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional backgroundClip

+
backgroundClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional backgroundColor

+
backgroundColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional backgroundImage

+
backgroundImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional backgroundPosition

+
backgroundPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional backgroundRepeat

+
backgroundRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional backgroundSize

+
backgroundSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional bg

+
bg?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional bgAttachment

+
bgAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional bgBlendMode

+
bgBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional bgClip

+
bgClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional bgColor

+
bgColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional bgGradient

+
bgGradient?: ResponsiveValue<string | string & {}>
+

The background-gradient shorthand

+
+
+

Optional bgImage

+
bgImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgImg

+
bgImg?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgPos

+
bgPos?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgPosition

+
bgPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgRepeat

+
bgRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional bgSize

+
bgSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional blendMode

+
blendMode?: ResponsiveValue<MixBlendMode>
+

The blend-mode property

+
+
+

Optional blur

+
blur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the blur filter value of an element. +Value is assigned to --chakra-filter css variable

+
+
+

Optional border

+
border?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border property

+
+
+

Optional borderBottom

+
borderBottom?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-bottom property

+
+
+

Optional borderBottomColor

+
borderBottomColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderBottomColor>
+

The CSS border-bottom-color property

+
+
+

Optional borderBottomLeftRadius

+
borderBottomLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional borderBottomRadius

+
borderBottomRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional borderBottomRightRadius

+
borderBottomRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional borderBottomStyle

+
borderBottomStyle?: ResponsiveValue<BorderBottomStyle>
+

The CSS border-bottom-style property

+
+
+

Optional borderBottomWidth

+
borderBottomWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-bottom-width property

+
+
+

Optional borderColor

+
borderColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-color property

+
+
+

Optional borderEndRadius

+
borderEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineEndRadius

+
borderInlineEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderInlineEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineStartRadius

+
borderInlineStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderInlineStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderLeft

+
borderLeft?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-left property

+
+
+

Optional borderLeftColor

+
borderLeftColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderLeftColor>
+

The CSS border-left-color property

+
+
+

Optional borderLeftRadius

+
borderLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional borderLeftStyle

+
borderLeftStyle?: ResponsiveValue<BorderLeftStyle>
+

The CSS border-left-style property

+
+
+

Optional borderLeftWidth

+
borderLeftWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-left-width property

+
+
+

Optional borderRadius

+
borderRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional borderRight

+
borderRight?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right property

+
+
+

Optional borderRightColor

+
borderRightColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderRightColor>
+

The CSS border-right-color property

+
+
+

Optional borderRightRadius

+
borderRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional borderRightStyle

+
borderRightStyle?: ResponsiveValue<BorderRightStyle>
+

The CSS border-right-styles property

+
+
+

Optional borderRightWidth

+
borderRightWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-right-width property

+
+
+

Optional borderStartRadius

+
borderStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderStyle

+
borderStyle?: ResponsiveValue<BorderStyle>
+

The CSS border-style property

+
+
+

Optional borderTop

+
borderTop?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top property

+
+
+

Optional borderTopColor

+
borderTopColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-top-color property

+
+
+

Optional borderTopLeftRadius

+
borderTopLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional borderTopRadius

+
borderTopRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional borderTopRightRadius

+
borderTopRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional borderTopStyle

+
borderTopStyle?: ResponsiveValue<BorderTopStyle>
+

The CSS border-top-style property

+
+
+

Optional borderTopWidth

+
borderTopWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-top-width property

+
+
+

Optional borderWidth

+
borderWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-width property

+
+
+

Optional borderX

+
borderX?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right and border-left property

+
+
+

Optional borderY

+
borderY?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top and border-bottom property

+
+
+

Optional bottom

+
bottom?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS bottom property

+
+
+

Optional boxDecorationBreak

+
boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>
+

The CSS box-decoration property

+
+
+

Optional boxShadow

+
boxShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional boxSize

+
boxSize?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width and height property

+
+
+

Optional boxSizing

+
boxSizing?: BoxSizing
+

The CSS box-sizing property

+
+
+

Optional brightness

+
brightness?: ResponsiveValue<Length>
+

Sets the brightness filter value of an element. +Value is assigned to --chakra-brightness css variable

+
+
+

Optional clipPath

+
clipPath?: ResponsiveValue<ClipPath>
+

The CSS clip-path property.

+

It creates a clipping region that sets what part of an element should be shown.

+
+
+

Optional color

+
color?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional columnGap

+
columnGap?: ResponsiveValue<ColumnGap<Length>>
+

The CSS column-gap property.

+

It sets the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional contrast

+
contrast?: ResponsiveValue<Length>
+

Sets the contrast filter value of an element. +Value is assigned to --chakra-contrast css variable

+
+
+

Optional control

+
control?: Control<any, any>
+

The control passed down from react-hook-form. +Only required if not using FormProvider

+
+
+

Optional css

+
css?: Interpolation<{}>
+

The emotion's css style object

+
+
+

Optional cursor

+
cursor?: ResponsiveValue<Cursor>
+

The CSS cursor property

+
+
+

Optional display

+
display?: ResponsiveValue<Display>
+

The CSS display property

+
+
+

Optional dropShadow

+
dropShadow?: ResponsiveValue<"base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

Sets the drop-shadow filter value of an element. +Value is assigned to --chakra-drop-shadow css variable

+
+
+

Optional errorMessageProps

+
errorMessageProps?: FormErrorMessageProps
+

Chakra FormErrorMessageProps for error message

+
+
+

Optional fill

+
fill?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS fill property for icon svgs and paths

+
+
+

Optional filter

+
filter?: ResponsiveValue<Filter | "auto">
+

The CSS filter property. When set to auto, you allow +Chakra UI to define the color based on the filter style props +(blur, saturate, etc.)

+
+
+

Optional flex

+
flex?: ResponsiveValue<Flex<Length>>
+

The CSS flex property.

+

It defines how a flex item will grow or shrink +to fit the space available in its flex container.

+ +

See

Mozilla Docs

+
+
+

Optional flexBasis

+
flexBasis?: ResponsiveValue<FlexBasis<Length>>
+

The CSS flex-basis property.

+

It defines the initial main size of a flex item.

+ +

See

Mozilla Docs

+
+
+

Optional flexDir

+
flexDir?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexDirection

+
flexDirection?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexFlow

+
flexFlow?: ResponsiveValue<FlexFlow>
+

The CSS flex-flow property.

+

It is a shorthand property for flex-direction and flex-wrap. +It specifies the direction of a flex container, as well as its wrapping behavior.

+ +

See

Mozilla Docs

+
+
+

Optional flexGrow

+
flexGrow?: ResponsiveValue<FlexGrow>
+

The CSS flex-grow property.

+

It defines how much a flexbox item should grow +if there's space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexShrink

+
flexShrink?: ResponsiveValue<FlexShrink>
+

The CSS flex-shrink property.

+

It defines how much a flexbox item should shrink +if there's not enough space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexWrap

+
flexWrap?: ResponsiveValue<FlexWrap>
+

The CSS flex-wrap property.

+

It defines whether flex items are forced onto one line or +can wrap onto multiple lines. If wrapping is allowed, +it sets the direction that lines are stacked.

+ +

See

Mozilla Docs

+
+
+

Optional float

+
float?: ResponsiveValue<Float>
+

The CSS float property

+
+
+

Optional fontFamily

+
fontFamily?: ResponsiveValue<"body" | FontFamily | "heading" | "mono">
+

The CSS font-family property

+
+
+

Optional fontSize

+
fontSize?: ResponsiveValue<number | "small" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl">
+

The CSS font-size property

+
+
+

Optional fontStyle

+
fontStyle?: ResponsiveValue<FontStyle>
+

The CSS font-style property

+
+
+

Optional fontWeight

+
fontWeight?: ResponsiveValue<number | "bold" | string & {} | "black" | "normal" | "hairline" | "thin" | "light" | "medium" | "semibold" | "extrabold">
+

The CSS font-weight property

+
+
+

Optional gap

+
gap?: ResponsiveValue<Gap<Length>>
+

The CSS gap property.

+

It defines the gap between items in both flex and +grid contexts.

+ +

See

Mozilla Docs

+
+
+

Optional gridArea

+
gridArea?: ResponsiveValue<GridArea>
+

The CSS grid-areas property.

+

It specifies a grid item’s size and location within a grid by +contributing a line, a span, or nothing (automatic) +to its grid placement, thereby specifying the edges of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoColumns

+
gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>
+

The CSS grid-auto-columns property.

+

It specifies the size of an implicitly-created grid column track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoFlow

+
gridAutoFlow?: ResponsiveValue<GridAutoFlow>
+

The CSS grid-auto-flow property

+

It controls how the auto-placement algorithm works, +specifying exactly how auto-placed items get flowed into the grid.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoRows

+
gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>
+

The CSS grid-auto-rows property.

+

It specifies the size of an implicitly-created grid row track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumn

+
gridColumn?: ResponsiveValue<GridColumn>
+

The CSS grid-column property.

+

It specifies a grid item's size and location within a grid column +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnEnd

+
gridColumnEnd?: ResponsiveValue<GridColumnEnd>
+

The CSS grid-column property

+

It specifies a grid item’s end position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the block-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnGap

+
gridColumnGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-column-gap property.

+

It defines the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnStart

+
gridColumnStart?: ResponsiveValue<GridColumnStart>
+

The CSS grid-column property.

+

It specifies a grid item’s start position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement

+ +

See

Mozilla Docs

+
+
+

Optional gridGap

+
gridGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-gap property.

+

It defines the gaps (gutters) between rows and columns

+ +

See

Mozilla Docs

+
+
+

Optional gridRow

+
gridRow?: ResponsiveValue<GridRow>
+

The CSS grid-row property

+

It specifies a grid item’s size and location within the grid row +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowEnd

+
gridRowEnd?: ResponsiveValue<GridRowEnd>
+

The CSS grid-row-end property

+

It specifies a grid item’s end position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowGap

+
gridRowGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-row-gap property.

+

It defines the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowStart

+
gridRowStart?: ResponsiveValue<GridRowStart>
+

The CSS grid-row-start property

+

It specifies a grid item’s start position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplate

+
gridTemplate?: ResponsiveValue<GridTemplate>
+

The CSS grid-template property.

+

It is a shorthand property for defining grid columns, rows, and areas.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateAreas

+
gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>
+

The CSS grid-template-areas property.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateColumns

+
gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>
+

The CSS grid-template-columns property

+

It defines the line names and track sizing functions of the grid columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateRows

+
gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>
+

The CSS grid-template-rows property.

+

It defines the line names and track sizing functions of the grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional h

+
h?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional height

+
height?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional helperText

+
helperText?: ReactNode
+

Helper text to show alongside input

+
+
+

Optional helperTextProps

+
helperTextProps?: TextProps
+

Chakra TextProps associated with the helper text

+
+
+

Optional hideBelow

+
hideBelow?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element below the specified breakpoint

+
+
+

Optional hideFrom

+
hideFrom?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element from the specified breakpoint and up

+
+
+

Optional hueRotate

+
hueRotate?: ResponsiveValue<Length>
+

Sets the hue-rotate filter value of an element. +Value is assigned to --chakra-hue-rotate css variable

+
+
+

Optional inputMode

+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
+

Hints at the type of data that might be entered by the user while editing the element or its contents

+ +

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

+
+
+

Optional inset

+
inset?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, right, top, bottom property

+
+
+

Optional insetEnd

+
insetEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetEnd is equivalent to right. +When the direction is rtl, insetEnd is equivalent to left.

+
+
+

Optional insetInlineEnd

+
insetInlineEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetInlineEnd is equivalent to right. +When the direction is rtl, insetInlineEnd is equivalent to left.

+
+
+

Optional insetStart

+
insetStart?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is start, end is equivalent to left. +When the direction is start, end is equivalent to right.

+
+
+

Optional insetX

+
insetX?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, and right property

+
+
+

Optional insetY

+
insetY?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top, and bottom property

+
+
+

Optional invert

+
invert?: ResponsiveValue<Length>
+

Sets the invert filter value of an element. +Value is assigned to --chakra-invert css variable

+
+
+

Optional is

+
is?: string
+

Specify that a standard HTML element should behave like a defined custom built-in element

+ +

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

+
+
+

Optional isDisabled

+
isDisabled?: boolean
+

If true, the form control will be disabled. This has 2 side effects:

+
    +
  • The FormLabel will have data-disabled attribute
    • +
  • The form element (e.g, Input) will be disabled
    • +
+ +

Default

false

+
+
+

Optional isInvalid

+
isInvalid?: boolean
+

If true, the form control will be invalid. This has 2 side effects:

+
    +
  • The FormLabel and FormErrorIcon will have data-invalid set to true
    • +
  • The form element (e.g, Input) will have aria-invalid set to true
    • +
+ +

Default

false

+
+
+

Optional isReadOnly

+
isReadOnly?: boolean
+

If true, the form control will be readonly

+ +

Default

false

+
+
+

Optional isRequired

+
isRequired?: boolean
+

If true, the form control will be required. This has 2 side effects:

+
    +
  • The FormLabel will show a required indicator
    • +
  • The form element (e.g, Input) will have aria-required set to true
    • +
+ +

Default

false

+
+
+

Optional isTruncated

+
isTruncated?: boolean
+

If true, it clamps truncate a text after one line.

+
+
+

Optional isolation

+
isolation?: ResponsiveValue<Isolation>
+

The CSS isolation property

+
+
+

Optional justifyContent

+
justifyContent?: ResponsiveValue<JustifyContent>
+

The CSS justify-content property.

+

It defines how the browser distributes space between and around content items +along the main-axis of a flex container, and the inline axis of a grid container.

+ +

See

Mozilla Docs

+
+
+

Optional justifyItems

+
justifyItems?: ResponsiveValue<JustifyItems>
+

The CSS justify-items property.

+

It defines the default justify-self for all items of the box, +giving them all a default way of justifying each box +along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional justifySelf

+
justifySelf?: ResponsiveValue<JustifySelf>
+

The CSS justify-self property.

+

It defines the way a box is justified inside its +alignment container along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional label

+
label?: ReactNode
+

The label to be associated with the input

+
+
+

Optional labelProps

+
labelProps?: FormLabelProps
+

Chakra FormLabelProps

+
+
+

Optional layerStyle

+
layerStyle?: ResponsiveValue<string & {}>
+

The layer style object to apply. +Note: Styles must be located in theme.layerStyles

+
+
+

Optional left

+
left?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left property

+
+
+

Optional letterSpacing

+
letterSpacing?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "tighter" | "tight" | "wide" | "wider" | "widest">
+

The CSS letter-spacing property

+
+
+

Optional lineHeight

+
lineHeight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "none" | "normal" | number & {} | "shorter" | "short" | "tall" | "taller">
+

The CSS line-height property

+
+
+

Optional listStyleImage

+
listStyleImage?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStyleImg

+
listStyleImg?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStylePos

+
listStylePos?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional listStylePosition

+
listStylePosition?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional m

+
m?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional margin

+
margin?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional marginBottom

+
marginBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional marginEnd

+
marginEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginEnd is equivalent to marginRight. +When direction is rtl, marginEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineEnd

+
marginInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineEnd is equivalent to marginRight. +When direction is rtl, marginInlineEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineStart

+
marginInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineStart is equivalent to marginLeft. +When direction is rtl, marginInlineStart is equivalent to marginRight.

+
+
+

Optional marginLeft

+
marginLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional marginRight

+
marginRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional marginStart

+
marginStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginStart is equivalent to marginLeft. +When direction is rtl, marginStart is equivalent to marginRight.

+
+
+

Optional marginTop

+
marginTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional marginX

+
marginX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional marginY

+
marginY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

Optional maxH

+
maxH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxHeight

+
maxHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxW

+
maxW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional maxWidth

+
maxWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional mb

+
mb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional me

+
me?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, me is equivalent to marginRight. +When direction is rtl, me is equivalent to marginLeft.

+
+
+

Optional minH

+
minH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minHeight

+
minHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minW

+
minW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional minWidth

+
minWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional mixBlendMode

+
mixBlendMode?: ResponsiveValue<MixBlendMode>
+

The mix-blend-mode property

+
+
+

Optional ml

+
ml?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional mr

+
mr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional ms

+
ms?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, ms is equivalent to marginLeft. +When direction is rtl, ms is equivalent to marginRight.

+
+
+

Optional mt

+
mt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional mx

+
mx?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional my

+
my?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

name

+
name: string
+

The name of the input (required)

+
+
+

Optional noOfLines

+
noOfLines?: ResponsiveValue<number>
+

Used to truncate text at a specific number of lines

+
+
+

Optional objectFit

+
objectFit?: ResponsiveValue<ObjectFit>
+

The CSS object-fit property

+
+
+

Optional objectPosition

+
objectPosition?: ResponsiveValue<ObjectPosition<Length>>
+

The CSS object-position property

+
+
+

Optional onKeyPress

+
onKeyPress?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional onKeyPressCapture

+
onKeyPressCapture?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional opacity

+
opacity?: ResponsiveValue<Opacity>
+

The CSS opacity property

+
+
+

Optional order

+
order?: ResponsiveValue<Order>
+

The CSS order property.

+

It defines the order to lay out an item in a flex or grid container.

+ +

See

Mozilla Docs

+
+
+

Optional outline

+
outline?: ResponsiveValue<Outline<Length>>
+

The CSS outline property

+
+
+

Optional outlineColor

+
outlineColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS outline-color property

+
+
+

Optional outlineOffset

+
outlineOffset?: ResponsiveValue<OutlineOffset<Length>>
+

The CSS outline-offset property

+
+
+

Optional overflow

+
overflow?: ResponsiveValue<Overflow>
+

The CSS overflow property

+
+
+

Optional overflowWrap

+
overflowWrap?: ResponsiveValue<OverflowWrap>
+

The CSS overflow-wrap property

+
+
+

Optional overflowX

+
overflowX?: ResponsiveValue<OverflowX>
+

The CSS overflow-x property

+
+
+

Optional overflowY

+
overflowY?: ResponsiveValue<OverflowY>
+

The CSS overflow-y property

+
+
+

Optional overscroll

+
overscroll?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehavior

+
overscrollBehavior?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehaviorX

+
overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollBehaviorY

+
overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional overscrollX

+
overscrollX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollY

+
overscrollY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional p

+
p?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional padding

+
padding?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional paddingBottom

+
paddingBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional paddingEnd

+
paddingEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingEnd is equivalent to paddingRight. +When direction is rtl, paddingEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineEnd

+
paddingInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineEnd is equivalent to paddingRight. +When direction is rtl, paddingInlineEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineStart

+
paddingInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineStart is equivalent to paddingLeft. +When direction is rtl, paddingInlineStart is equivalent to paddingRight.

+
+
+

Optional paddingLeft

+
paddingLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional paddingRight

+
paddingRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional paddingStart

+
paddingStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingStart is equivalent to paddingLeft. +When direction is rtl, paddingStart is equivalent to paddingRight.

+
+
+

Optional paddingTop

+
paddingTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional paddingX

+
paddingX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional paddingY

+
paddingY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional pb

+
pb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional pe

+
pe?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, pe is equivalent to paddingRight. +When direction is rtl, pe is equivalent to paddingLeft.

+
+
+

Optional pl

+
pl?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional placeContent

+
placeContent?: ResponsiveValue<PlaceContent>
+

The CSS place-content property.

+

It allows you to align content along both the block and +inline directions at once (i.e. the align-content and justify-content properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional placeItems

+
placeItems?: ResponsiveValue<PlaceItems>
+

The CSS place-items property.

+

It allows you to align items along both the block and +inline directions at once (i.e. the align-items and justify-items properties) +in a relevant layout system such as Grid or Flex.

+ +

See

Mozilla Docs

+
+
+

Optional placeSelf

+
placeSelf?: ResponsiveValue<PlaceSelf>
+

The CSS place-self property.

+

It allows you to align an individual item in both the block and +inline directions at once (i.e. the align-self and justify-self properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional pointerEvents

+
pointerEvents?: ResponsiveValue<PointerEvents>
+

The CSS pointer-events property

+
+
+

Optional pos

+
pos?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional position

+
position?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional pr

+
pr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional ps

+
ps?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, ps is equivalent to paddingLeft. +When direction is rtl, ps is equivalent to paddingRight.

+
+
+

Optional pt

+
pt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional px

+
px?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional py

+
py?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional resize

+
resize?: ResponsiveValue<Resize>
+

The CSS resize property

+
+
+

Optional right

+
right?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS right property

+
+
+

Optional ring

+
ring?: ResponsiveValue<Length>
+

Creates outline rings with CSS box-shadow property

+
+
+

Optional ringColor

+
ringColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the outline ring

+
+
+

Optional ringInset

+
ringInset?: ResponsiveValue<"inset" | "none">
+

If the outline ring should an inset

+
+
+

Optional ringOffset

+
ringOffset?: ResponsiveValue<Length>
+

The thickness of the offset shadow when using outline rings

+
+
+

Optional ringOffsetColor

+
ringOffsetColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the offset shadow when adding outline rings

+
+
+

Optional rotate

+
rotate?: ResponsiveValue<Length>
+

Sets the rotation value of the element

+
+
+

Optional rounded

+
rounded?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional roundedBottom

+
roundedBottom?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional roundedBottomLeft

+
roundedBottomLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional roundedBottomRight

+
roundedBottomRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional roundedEnd

+
roundedEnd?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedLeft

+
roundedLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional roundedRight

+
roundedRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional roundedStart

+
roundedStart?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedTop

+
roundedTop?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional roundedTopLeft

+
roundedTopLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional roundedTopRight

+
roundedTopRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional rowGap

+
rowGap?: ResponsiveValue<RowGap<Length>>
+

The CSS row-gap property.

+

It sets the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional saturate

+
saturate?: ResponsiveValue<Length>
+

Sets the saturation filter value of an element. +Value is assigned to --chakra-saturate css variable

+
+
+

Optional scale

+
scale?: ResponsiveValue<Length>
+

Sets the scale value of the element

+
+
+

Optional scaleX

+
scaleX?: ResponsiveValue<Length>
+

Scale value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-x
    • +
+
+
+

Optional scaleY

+
scaleY?: ResponsiveValue<Length>
+

Scale value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-y
    • +
+
+
+

Optional shadow

+
shadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional skewX

+
skewX?: ResponsiveValue<Length>
+

Skew value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-x
    • +
+
+
+

Optional skewY

+
skewY?: ResponsiveValue<Length>
+

Skew value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-y
    • +
+
+
+

Optional srOnly

+
srOnly?: true | "focusable"
+

If true, hide an element visually without hiding it from screen readers.

+

If focusable, the sr-only styles will be undone, making the element visible +to sighted users as well as screen readers.

+
+
+

Optional stroke

+
stroke?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS stroke property for icon svgs and paths

+
+
+

Optional switchProps

+
switchProps?: SwitchProps
+

Chakra SwitchProps

+
+
+

Optional sx

+
sx?: SystemStyleObject
+

Used to pass theme-aware style props. +NB: This is the public API for user-land

+
+
+

Optional textAlign

+
textAlign?: ResponsiveValue<TextAlign>
+

The CSS text-align property

+
+
+

Optional textColor

+
textColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional textDecor

+
textDecor?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecoration

+
textDecoration?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecorationColor

+
textDecorationColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | TextDecorationColor>
+

The CSS text-decoration-color property

+
+
+

Optional textDecorationLine

+
textDecorationLine?: ResponsiveValue<TextDecorationLine>
+

The CSS text-decoration-line property

+
+
+

Optional textDecorationStyle

+
textDecorationStyle?: ResponsiveValue<TextDecorationStyle>
+

The CSS text-decoration-style property

+
+
+

Optional textDecorationThickness

+
textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>
+

The CSS text-decoration-thickness property

+
+
+

Optional textIndent

+
textIndent?: ResponsiveValue<TextIndent<0 | string & {}>>
+

The CSS text-indent property

+
+
+

Optional textOverflow

+
textOverflow?: ResponsiveValue<TextOverflow>
+

The CSS text-overflow property

+
+
+

Optional textShadow

+
textShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "inner" | "dark-lg" | TextShadow>
+

The text-shadow property

+
+
+

Optional textStyle

+
textStyle?: ResponsiveValue<string & {}>
+

The text style object to apply. +Note: Styles must be located in theme.textStyles

+
+
+

Optional textTransform

+
textTransform?: ResponsiveValue<TextTransform>
+

The CSS text-transform property

+
+
+

Optional textUnderlineOffset

+
textUnderlineOffset?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto">
+

The CSS text-underline-offset property

+
+
+

Optional top

+
top?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top property

+
+
+

Optional transform

+
transform?: ResponsiveValue<"auto" | Transform | "auto-gpu">
+

The CSS transform property

+
+
+

Optional transformOrigin

+
transformOrigin?: ResponsiveValue<number | "center" | "px" | "top" | "right" | "bottom" | "left" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS transform-origin property

+
+
+

Optional transition

+
transition?: ResponsiveValue<Transition<string & {}>>
+

The CSS transition property

+
+
+

Optional transitionDelay

+
transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>
+

The CSS transition-delay property

+
+
+

Optional transitionDuration

+
transitionDuration?: ResponsiveValue<string>
+

The CSS transition-duration property

+
+
+

Optional transitionProperty

+
transitionProperty?: ResponsiveValue<TransitionProperty>
+

The CSS transition-property property

+
+
+

Optional transitionTimingFunction

+
transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>
+

The CSS transition-timing-function property

+
+
+

Optional translateX

+
translateX?: ResponsiveValue<Length>
+

Translate value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-x
    • +
+
+
+

Optional translateY

+
translateY?: ResponsiveValue<Length>
+

Translate value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-y
    • +
+
+
+

Optional userSelect

+
userSelect?: ResponsiveValue<UserSelect>
+

The CSS user-select property

+
+
+

Optional verticalAlign

+
verticalAlign?: ResponsiveValue<VerticalAlign<Length>>
+

The CSS vertical-align property

+
+
+

Optional visibility

+
visibility?: ResponsiveValue<Visibility>
+

The CSS visibility property

+
+
+

Optional w

+
w?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional whiteSpace

+
whiteSpace?: ResponsiveValue<WhiteSpace>
+

The CSS white-space property

+
+
+

Optional width

+
width?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional willChange

+
willChange?: ResponsiveValue<WillChange>
+

The CSS will-change property

+
+
+

Optional wordBreak

+
wordBreak?: ResponsiveValue<WordBreak>
+

The CSS word-break property

+
+
+

Optional zIndex

+
zIndex?: ResponsiveValue<"base" | "overlay" | ZIndex | "hide" | "docked" | "dropdown" | "sticky" | "banner" | "modal" | "popover" | "skipLink" | "toast" | "tooltip">
+

The CSS z-index property

+
+
+
+
+

Settings

 +
+
+

Member Visibility

+
    +
    • +
    • +
    • +
    • +
    • +
+
+

Theme

+ +
+
+

Generated using TypeDoc

+
\ No newline at end of file diff --git a/docs/interfaces/TextareaControlProps.html b/docs/interfaces/TextareaControlProps.html new file mode 100644 index 0000000..37a0390 --- /dev/null +++ b/docs/interfaces/TextareaControlProps.html @@ -0,0 +1,4485 @@ +TextareaControlProps | react-hook-form-chakra
+
+ +
+
+
+
+ +

Interface TextareaControlProps

+
+

The union of ChakraFormControlProps and BaseReactHookFormProps which defines the base properties +for most of react-hook-form-chakra components

+
+
+

Hierarchy

+
+
+
+
+ +
+
+

Properties

+
__css? +_active? +_activeLink? +_activeStep? +_after? +_autofill? +_before? +_checked? +_dark? +_disabled? +_empty? +_even? +_expanded? +_first? +_firstLetter? +_focus? +_focusVisible? +_focusWithin? +_fullScreen? +_grabbed? +_groupActive? +_groupChecked? +_groupDisabled? +_groupFocus? +_groupFocusVisible? +_groupFocusWithin? +_groupHover? +_groupInvalid? +_hidden? +_highlighted? +_hover? +_indeterminate? +_invalid? +_last? +_light? +_loading? +_ltr? +_mediaDark? +_mediaReduceMotion? +_notFirst? +_notLast? +_odd? +_peerActive? +_peerChecked? +_peerDisabled? +_peerFocus? +_peerFocusVisible? +_peerFocusWithin? +_peerHover? +_peerInvalid? +_peerPlaceholderShown? +_placeholder? +_placeholderShown? +_pressed? +_readOnly? +_rtl? +_selected? +_selection? +_valid? +_visited? +alignContent? +alignItems? +alignSelf? +animation? +appearance? +apply? +aria-activedescendant? +aria-atomic? +aria-autocomplete? +aria-busy? +aria-checked? +aria-colcount? +aria-colindex? +aria-colspan? +aria-controls? +aria-current? +aria-describedby? +aria-details? +aria-disabled? +aria-dropeffect? +aria-errormessage? +aria-expanded? +aria-flowto? +aria-grabbed? +aria-haspopup? +aria-hidden? +aria-invalid? +aria-keyshortcuts? +aria-label? +aria-labelledby? +aria-level? +aria-live? +aria-modal? +aria-multiline? +aria-multiselectable? +aria-orientation? +aria-owns? +aria-placeholder? +aria-posinset? +aria-pressed? +aria-readonly? +aria-relevant? +aria-required? +aria-roledescription? +aria-rowcount? +aria-rowindex? +aria-rowspan? +aria-selected? +aria-setsize? +aria-sort? +aria-valuemax? +aria-valuemin? +aria-valuenow? +aria-valuetext? +backdropBlur? +backdropBrightness? +backdropContrast? +backdropFilter? +backdropHueRotate? +backdropInvert? +backdropSaturate? +background? +backgroundAttachment? +backgroundBlendMode? +backgroundClip? +backgroundColor? +backgroundImage? +backgroundPosition? +backgroundRepeat? +backgroundSize? +bg? +bgAttachment? +bgBlendMode? +bgClip? +bgColor? +bgGradient? +bgImage? +bgImg? +bgPos? +bgPosition? +bgRepeat? +bgSize? +blendMode? +blur? +border? +borderBottom? +borderBottomColor? +borderBottomLeftRadius? +borderBottomRadius? +borderBottomRightRadius? +borderBottomStyle? +borderBottomWidth? +borderColor? +borderEndRadius? +borderInlineEndRadius? +borderInlineStartRadius? +borderLeft? +borderLeftColor? +borderLeftRadius? +borderLeftStyle? +borderLeftWidth? +borderRadius? +borderRight? +borderRightColor? +borderRightRadius? +borderRightStyle? +borderRightWidth? +borderStartRadius? +borderStyle? +borderTop? +borderTopColor? +borderTopLeftRadius? +borderTopRadius? +borderTopRightRadius? +borderTopStyle? +borderTopWidth? +borderWidth? +borderX? +borderY? +bottom? +boxDecorationBreak? +boxShadow? +boxSize? +boxSizing? +brightness? +clipPath? +color? +columnGap? +contrast? +control? +css? +cursor? +display? +dropShadow? +errorMessageProps? +fill? +filter? +flex? +flexBasis? +flexDir? +flexDirection? +flexFlow? +flexGrow? +flexShrink? +flexWrap? +float? +fontFamily? +fontSize? +fontStyle? +fontWeight? +gap? +gridArea? +gridAutoColumns? +gridAutoFlow? +gridAutoRows? +gridColumn? +gridColumnEnd? +gridColumnGap? +gridColumnStart? +gridGap? +gridRow? +gridRowEnd? +gridRowGap? +gridRowStart? +gridTemplate? +gridTemplateAreas? +gridTemplateColumns? +gridTemplateRows? +h? +height? +helperText? +helperTextProps? +hideBelow? +hideFrom? +hueRotate? +inputMode? +inset? +insetEnd? +insetInlineEnd? +insetStart? +insetX? +insetY? +invert? +is? +isDisabled? +isInvalid? +isReadOnly? +isRequired? +isTruncated? +isolation? +justifyContent? +justifyItems? +justifySelf? +label? +labelProps? +layerStyle? +left? +letterSpacing? +lineHeight? +listStyleImage? +listStyleImg? +listStylePos? +listStylePosition? +m? +margin? +marginBottom? +marginEnd? +marginInlineEnd? +marginInlineStart? +marginLeft? +marginRight? +marginStart? +marginTop? +marginX? +marginY? +maxH? +maxHeight? +maxW? +maxWidth? +mb? +me? +minH? +minHeight? +minW? +minWidth? +mixBlendMode? +ml? +mr? +ms? +mt? +mx? +my? +name +noOfLines? +objectFit? +objectPosition? +onKeyPress? +onKeyPressCapture? +opacity? +order? +outline? +outlineColor? +outlineOffset? +overflow? +overflowWrap? +overflowX? +overflowY? +overscroll? +overscrollBehavior? +overscrollBehaviorX? +overscrollBehaviorY? +overscrollX? +overscrollY? +p? +padding? +paddingBottom? +paddingEnd? +paddingInlineEnd? +paddingInlineStart? +paddingLeft? +paddingRight? +paddingStart? +paddingTop? +paddingX? +paddingY? +pb? +pe? +pl? +placeContent? +placeItems? +placeSelf? +pointerEvents? +pos? +position? +pr? +ps? +pt? +px? +py? +resize? +right? +ring? +ringColor? +ringInset? +ringOffset? +ringOffsetColor? +rotate? +rounded? +roundedBottom? +roundedBottomLeft? +roundedBottomRight? +roundedEnd? +roundedLeft? +roundedRight? +roundedStart? +roundedTop? +roundedTopLeft? +roundedTopRight? +rowGap? +saturate? +scale? +scaleX? +scaleY? +shadow? +skewX? +skewY? +srOnly? +stroke? +sx? +textAlign? +textColor? +textDecor? +textDecoration? +textDecorationColor? +textDecorationLine? +textDecorationStyle? +textDecorationThickness? +textIndent? +textOverflow? +textShadow? +textStyle? +textTransform? +textUnderlineOffset? +textareaProps? +top? +transform? +transformOrigin? +transition? +transitionDelay? +transitionDuration? +transitionProperty? +transitionTimingFunction? +translateX? +translateY? +userSelect? +verticalAlign? +visibility? +w? +whiteSpace? +width? +willChange? +wordBreak? +zIndex? +
+
+

Properties

+
+

Optional Private __css

+
__css?: SystemStyleObject
+

Used for internal css management

+
+
+

Optional _active

+
_active?: SystemStyleObject
+

Styles for CSS Selector &:active

+
+
+

Optional _activeLink

+
_activeLink?: SystemStyleObject
+

Used to style the active link in a navigation +Styles for CSS Selector &[aria-current=page]

+
+
+

Optional _activeStep

+
_activeStep?: SystemStyleObject
+

Used to style the current step within a process +Styles for CSS Selector &[aria-current=step]

+
+
+

Optional _after

+
_after?: SystemStyleObject
+

Styles for CSS selector &::after

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _after={{content:`""` }}/>
+
+
+
+

Optional _autofill

+
_autofill?: SystemStyleObject
+

Styles for CSS Selector &:-webkit-autofill

+
+
+

Optional _before

+
_before?: SystemStyleObject
+

Styles for CSS selector &::before

+

NOTE:When using this, ensure the content is wrapped in a backtick.

+ +

Example

<Box _before={{content:`""` }}/>
+
+
+
+

Optional _checked

+
_checked?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is true

+
    +
  • CSS selector &[aria-checked=true]
    • +
+
+
+

Optional _dark

+
_dark?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _disabled

+
_disabled?: SystemStyleObject
+

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

+
    +
  • &[aria-disabled=true]
    • +
  • &:disabled
    • +
  • &[data-disabled]
    • +
  • &[disabled]
    • +
+
+
+

Optional _empty

+
_empty?: SystemStyleObject
+

Styles for CSS selector &:empty

+
+
+

Optional _even

+
_even?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(even)

+
+
+

Optional _expanded

+
_expanded?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-expanded is true

+
    +
  • CSS selector &[aria-expanded=true]
    • +
+
+
+

Optional _first

+
_first?: SystemStyleObject
+

Styles for CSS Selector &:first-of-type

+
+
+

Optional _firstLetter

+
_firstLetter?: SystemStyleObject
+

Styles for CSS selector &::first-letter

+

NOTE: This selector is only applied for block-level elements and not preceded by an image or table.

+ +

Example

<Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
+
+
+
+

Optional _focus

+
_focus?: SystemStyleObject
+

Styles for CSS selector &:focus

+
+
+

Optional _focusVisible

+
_focusVisible?: SystemStyleObject
+

Styles to apply when this element has received focus via tabbing

+
    +
  • CSS Selector &:focus-visible
    • +
+
+
+

Optional _focusWithin

+
_focusWithin?: SystemStyleObject
+

Styles to apply when a child of this element has received focus

+
    +
  • CSS Selector &:focus-within
    • +
+
+
+

Optional _fullScreen

+
_fullScreen?: SystemStyleObject
+

Styles for CSS Selector &:fullscreen.

+
+
+

Optional _grabbed

+
_grabbed?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-grabbed is true

+
    +
  • CSS selector &[aria-grabbed=true]
    • +
+
+
+

Optional _groupActive

+
_groupActive?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is active

+
+
+

Optional _groupChecked

+
_groupChecked?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is checked

+
+
+

Optional _groupDisabled

+
_groupDisabled?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is disabled

+
+
+

Optional _groupFocus

+
_groupFocus?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is focused

+
+
+

Optional _groupFocusVisible

+
_groupFocusVisible?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has visible focus

+
+
+

Optional _groupFocusWithin

+
_groupFocusWithin?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group has focus within

+
+
+

Optional _groupHover

+
_groupHover?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is hovered

+
+
+

Optional _groupInvalid

+
_groupInvalid?: SystemStyleObject
+

Styles to apply when a parent element with .group, data-group or role=group is invalid

+
+
+

Optional _hidden

+
_hidden?: SystemStyleObject
+

Styles for CSS Selector [hidden=true]

+
+
+

Optional _highlighted

+
_highlighted?: SystemStyleObject
+

Styles for the highlighted state.

+
+
+

Optional _hover

+
_hover?: SystemStyleObject
+

Styles for CSS selector &:hover

+
+
+

Optional _indeterminate

+
_indeterminate?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-checked is mixed

+
    +
  • CSS selector &[aria-checked=mixed]
    • +
+
+
+

Optional _invalid

+
_invalid?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-invalid is true

+
    +
  • CSS selector &[aria-invalid=true]
    • +
+
+
+

Optional _last

+
_last?: SystemStyleObject
+

Styles for CSS Selector &:last-of-type

+
+
+

Optional _light

+
_light?: SystemStyleObject
+

Styles for when data-theme is applied to any parent of +this component or element.

+
+
+

Optional _loading

+
_loading?: SystemStyleObject
+

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. +Useful for styling loading states

+
+
+

Optional _ltr

+
_ltr?: SystemStyleObject
+

Styles for CSS Selector [dir=ltr] & +It is applied when a parent element or this element has dir="ltr"

+
+
+

Optional _mediaDark

+
_mediaDark?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-color-scheme: dark) +It is used when the user has requested the system use a light or dark color theme.

+
+
+

Optional _mediaReduceMotion

+
_mediaReduceMotion?: SystemStyleObject
+

Styles for CSS Selector @media (prefers-reduced-motion: reduce) +It is used when the user has requested the system to reduce the amount of animations.

+
+
+

Optional _notFirst

+
_notFirst?: SystemStyleObject
+

Styles for CSS Selector &:not(:first-of-type)

+
+
+

Optional _notLast

+
_notLast?: SystemStyleObject
+

Styles for CSS Selector &:not(:last-of-type)

+
+
+

Optional _odd

+
_odd?: SystemStyleObject
+

Styles for CSS Selector &:nth-child(odd)

+
+
+

Optional _peerActive

+
_peerActive?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is active

+
+
+

Optional _peerChecked

+
_peerChecked?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is checked

+
+
+

Optional _peerDisabled

+
_peerDisabled?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is disabled

+
+
+

Optional _peerFocus

+
_peerFocus?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is focused

+
+
+

Optional _peerFocusVisible

+
_peerFocusVisible?: SystemStyleObject
+

Styles to apply when a sibling element with .peeror data-peer has visible focus

+
+
+

Optional _peerFocusWithin

+
_peerFocusWithin?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has focus within

+
+
+

Optional _peerHover

+
_peerHover?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is hovered

+
+
+

Optional _peerInvalid

+
_peerInvalid?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer is invalid

+
+
+

Optional _peerPlaceholderShown

+
_peerPlaceholderShown?: SystemStyleObject
+

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

+
+
+

Optional _placeholder

+
_placeholder?: SystemStyleObject
+

Styles for CSS Selector &::placeholder.

+
+
+

Optional _placeholderShown

+
_placeholderShown?: SystemStyleObject
+

Styles for CSS Selector &:placeholder-shown.

+
+
+

Optional _pressed

+
_pressed?: SystemStyleObject
+

Styles for CSS Selector &[aria-pressed=true] +Typically used to style the current "pressed" state of toggle buttons

+
+
+

Optional _readOnly

+
_readOnly?: SystemStyleObject
+

Styles for CSS Selector &:readonly

+
+
+

Optional _rtl

+
_rtl?: SystemStyleObject
+

Styles for CSS Selector [dir=rtl] & +It is applied when a parent element or this element has dir="rtl"

+
+
+

Optional _selected

+
_selected?: SystemStyleObject
+

Styles to apply when the ARIA attribute aria-selected is true

+
    +
  • CSS selector &[aria-selected=true]
    • +
+
+
+

Optional _selection

+
_selection?: SystemStyleObject
+

Styles for CSS Selector &::selection

+
+
+

Optional _valid

+
_valid?: SystemStyleObject
+

Styles for the valid state

+
    +
  • CSS selector &[data-valid], &[data-state=valid]
    • +
+
+
+

Optional _visited

+
_visited?: SystemStyleObject
+

Styles for CSS Selector &:visited

+
+
+

Optional alignContent

+
alignContent?: ResponsiveValue<AlignContent>
+

The CSS align-content property.

+

It defines the distribution of space between and around +content items along a flexbox cross-axis or a grid's block axis.

+ +

See

Mozilla Docs

+
+
+

Optional alignItems

+
alignItems?: ResponsiveValue<AlignItems>
+

The CSS align-items property.

+

It defines the align-self value on all direct children as a group.

+
    +
  • In Flexbox, it controls the alignment of items on the Cross Axis.
    • +
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
    • +
+ +

See

Mozilla Docs

+
+
+

Optional alignSelf

+
alignSelf?: ResponsiveValue<AlignSelf>
+

The CSS align-self property.

+

It works like align-items, but applies only to a +single flexbox item, instead of all of them.

+ +

See

Mozilla Docs

+
+
+

Optional animation

+
animation?: ResponsiveValue<Animation<string & {}>>
+

The CSS animation property

+
+
+

Optional appearance

+
appearance?: ResponsiveValue<Appearance>
+

The CSS appearance property

+
+
+

Optional apply

+
apply?: ResponsiveValue<string>
+

Apply theme-aware style objects in theme

+ +

Example

<Box apply="styles.h3">This is a div</Box>
+
+

This will apply styles defined in theme.styles.h3

+
+
+

Optional aria-activedescendant

+
aria-activedescendant?: string
+

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

+
+
+

Optional aria-atomic

+
aria-atomic?: Booleanish
+

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

+
+
+

Optional aria-autocomplete

+
aria-autocomplete?: "none" | "both" | "inline" | "list"
+

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be +presented if they are made.

+
+
+

Optional aria-busy

+
aria-busy?: Booleanish
+

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

+
+
+

Optional aria-checked

+
aria-checked?: boolean | "true" | "false" | "mixed"
+

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

+ +

See

    +
  • aria-pressed
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-colcount

+
aria-colcount?: number
+

Defines the total number of columns in a table, grid, or treegrid.

+ +

See

aria-colindex.

+
+
+

Optional aria-colindex

+
aria-colindex?: number
+

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

+ +

See

    +
  • aria-colcount
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-colspan

+
aria-colspan?: number
+

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-colindex
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-controls

+
aria-controls?: string
+

Identifies the element (or elements) whose contents or presence are controlled by the current element.

+ +

See

aria-owns.

+
+
+

Optional aria-current

+
aria-current?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"
+

Indicates the element that represents the current item within a container or set of related elements.

+
+
+

Optional aria-describedby

+
aria-describedby?: string
+

Identifies the element (or elements) that describes the object.

+ +

See

aria-labelledby

+
+
+

Optional aria-details

+
aria-details?: string
+

Identifies the element that provides a detailed, extended description for the object.

+ +

See

aria-describedby.

+
+
+

Optional aria-disabled

+
aria-disabled?: Booleanish
+

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

+ +

See

    +
  • aria-hidden
    • +
  • aria-readonly.
    • +
+
+
+

Optional aria-dropeffect

+
aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"
+

Indicates what functions can be performed when a dragged object is released on the drop target.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-errormessage

+
aria-errormessage?: string
+

Identifies the element that provides an error message for the object.

+ +

See

    +
  • aria-invalid
    • +
  • aria-describedby.
    • +
+
+
+

Optional aria-expanded

+
aria-expanded?: Booleanish
+

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

+
+
+

Optional aria-flowto

+
aria-flowto?: string
+

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, +allows assistive technology to override the general default of reading in document source order.

+
+
+

Optional aria-grabbed

+
aria-grabbed?: Booleanish
+

Indicates an element's "grabbed" state in a drag-and-drop operation.

+ +

Deprecated

in ARIA 1.1

+
+
+

Optional aria-haspopup

+
aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "true" | "false" | "tree"
+

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

+
+
+

Optional aria-hidden

+
aria-hidden?: Booleanish
+

Indicates whether the element is exposed to an accessibility API.

+ +

See

aria-disabled.

+
+
+

Optional aria-invalid

+
aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"
+

Indicates the entered value does not conform to the format expected by the application.

+ +

See

aria-errormessage.

+
+
+

Optional aria-keyshortcuts

+
aria-keyshortcuts?: string
+

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

+
+
+

Optional aria-label

+
aria-label?: string
+

Defines a string value that labels the current element.

+ +

See

aria-labelledby.

+
+
+

Optional aria-labelledby

+
aria-labelledby?: string
+

Identifies the element (or elements) that labels the current element.

+ +

See

aria-describedby.

+
+
+

Optional aria-level

+
aria-level?: number
+

Defines the hierarchical level of an element within a structure.

+
+
+

Optional aria-live

+
aria-live?: "off" | "assertive" | "polite"
+

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

+
+
+

Optional aria-modal

+
aria-modal?: Booleanish
+

Indicates whether an element is modal when displayed.

+
+
+

Optional aria-multiline

+
aria-multiline?: Booleanish
+

Indicates whether a text box accepts multiple lines of input or only a single line.

+
+
+

Optional aria-multiselectable

+
aria-multiselectable?: Booleanish
+

Indicates that the user may select more than one item from the current selectable descendants.

+
+
+

Optional aria-orientation

+
aria-orientation?: "horizontal" | "vertical"
+

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

+
+
+

Optional aria-owns

+
aria-owns?: string
+

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship +between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

+ +

See

aria-controls.

+
+
+

Optional aria-placeholder

+
aria-placeholder?: string
+

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. +A hint could be a sample value or a brief description of the expected format.

+
+
+

Optional aria-posinset

+
aria-posinset?: number
+

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-setsize.

+
+
+

Optional aria-pressed

+
aria-pressed?: boolean | "true" | "false" | "mixed"
+

Indicates the current "pressed" state of toggle buttons.

+ +

See

    +
  • aria-checked
    • +
  • aria-selected.
    • +
+
+
+

Optional aria-readonly

+
aria-readonly?: Booleanish
+

Indicates that the element is not editable, but is otherwise operable.

+ +

See

aria-disabled.

+
+
+

Optional aria-relevant

+
aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
+

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

+ +

See

aria-atomic.

+
+
+

Optional aria-required

+
aria-required?: Booleanish
+

Indicates that user input is required on the element before a form may be submitted.

+
+
+

Optional aria-roledescription

+
aria-roledescription?: string
+

Defines a human-readable, author-localized description for the role of an element.

+
+
+

Optional aria-rowcount

+
aria-rowcount?: number
+

Defines the total number of rows in a table, grid, or treegrid.

+ +

See

aria-rowindex.

+
+
+

Optional aria-rowindex

+
aria-rowindex?: number
+

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowcount
    • +
  • aria-rowspan.
    • +
+
+
+

Optional aria-rowspan

+
aria-rowspan?: number
+

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

+ +

See

    +
  • aria-rowindex
    • +
  • aria-colspan.
    • +
+
+
+

Optional aria-selected

+
aria-selected?: Booleanish
+

Indicates the current "selected" state of various widgets.

+ +

See

    +
  • aria-checked
    • +
  • aria-pressed.
    • +
+
+
+

Optional aria-setsize

+
aria-setsize?: number
+

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+ +

See

aria-posinset.

+
+
+

Optional aria-sort

+
aria-sort?: "none" | "ascending" | "descending" | "other"
+

Indicates if items in a table or grid are sorted in ascending or descending order.

+
+
+

Optional aria-valuemax

+
aria-valuemax?: number
+

Defines the maximum allowed value for a range widget.

+
+
+

Optional aria-valuemin

+
aria-valuemin?: number
+

Defines the minimum allowed value for a range widget.

+
+
+

Optional aria-valuenow

+
aria-valuenow?: number
+

Defines the current value for a range widget.

+ +

See

aria-valuetext.

+
+
+

Optional aria-valuetext

+
aria-valuetext?: string
+

Defines the human readable text alternative of aria-valuenow for a range widget.

+
+
+

Optional backdropBlur

+
backdropBlur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the backdrop-blur filter value of an element. +Value is assigned to --chakra-backdrop-blur css variable

+
+
+

Optional backdropBrightness

+
backdropBrightness?: ResponsiveValue<Length>
+

Sets the backdrop-brightness filter value of an element. +Value is assigned to --chakra-backdrop-brightness css variable

+
+
+

Optional backdropContrast

+
backdropContrast?: ResponsiveValue<Length>
+

Sets the backdrop-contrast filter value of an element. +Value is assigned to --chakra-backdrop-contrast css variable

+
+
+

Optional backdropFilter

+
backdropFilter?: ResponsiveValue<"auto" | BackdropFilter>
+

The CSS backdrop-filter property. When set to auto, you allow +Chakra UI to define the color based on the backdrop filter style props +(backdropBlur, backdropSaturate, etc.)

+
+
+

Optional backdropHueRotate

+
backdropHueRotate?: ResponsiveValue<Length>
+

Sets the backdrop-hue-rotate filter value of an element. +Value is assigned to --chakra-backdrop-hue-rotate css variable

+
+
+

Optional backdropInvert

+
backdropInvert?: ResponsiveValue<Length>
+

Sets the backdrop-invert filter value of an element. +Value is assigned to --chakra-backdrop-invert css variable

+
+
+

Optional backdropSaturate

+
backdropSaturate?: ResponsiveValue<Length>
+

Sets the backdrop-saturate filter value of an element. +Value is assigned to --chakra-backdrop-saturate css variable

+
+
+

Optional background

+
background?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional backgroundAttachment

+
backgroundAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional backgroundBlendMode

+
backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional backgroundClip

+
backgroundClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional backgroundColor

+
backgroundColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional backgroundImage

+
backgroundImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional backgroundPosition

+
backgroundPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional backgroundRepeat

+
backgroundRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional backgroundSize

+
backgroundSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional bg

+
bg?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background property

+
+
+

Optional bgAttachment

+
bgAttachment?: ResponsiveValue<BackgroundAttachment>
+

The CSS background-attachment property

+
+
+

Optional bgBlendMode

+
bgBlendMode?: ResponsiveValue<BackgroundBlendMode>
+

The CSS background-blend-mode property

+
+
+

Optional bgClip

+
bgClip?: ResponsiveValue<"text" | BackgroundClip>
+

The CSS background-clip property

+
+
+

Optional bgColor

+
bgColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS background-color property

+
+
+

Optional bgGradient

+
bgGradient?: ResponsiveValue<string | string & {}>
+

The background-gradient shorthand

+
+
+

Optional bgImage

+
bgImage?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgImg

+
bgImg?: ResponsiveValue<string | string & {}>
+

The CSS background-image property

+
+
+

Optional bgPos

+
bgPos?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgPosition

+
bgPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">
+

The CSS background-position property

+
+
+

Optional bgRepeat

+
bgRepeat?: ResponsiveValue<BackgroundRepeat>
+

The CSS background-repeat property

+
+
+

Optional bgSize

+
bgSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">
+

The CSS background-size property

+
+
+

Optional blendMode

+
blendMode?: ResponsiveValue<MixBlendMode>
+

The blend-mode property

+
+
+

Optional blur

+
blur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">
+

Sets the blur filter value of an element. +Value is assigned to --chakra-filter css variable

+
+
+

Optional border

+
border?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border property

+
+
+

Optional borderBottom

+
borderBottom?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-bottom property

+
+
+

Optional borderBottomColor

+
borderBottomColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderBottomColor>
+

The CSS border-bottom-color property

+
+
+

Optional borderBottomLeftRadius

+
borderBottomLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional borderBottomRadius

+
borderBottomRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional borderBottomRightRadius

+
borderBottomRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional borderBottomStyle

+
borderBottomStyle?: ResponsiveValue<BorderBottomStyle>
+

The CSS border-bottom-style property

+
+
+

Optional borderBottomWidth

+
borderBottomWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-bottom-width property

+
+
+

Optional borderColor

+
borderColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-color property

+
+
+

Optional borderEndRadius

+
borderEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineEndRadius

+
borderInlineEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineEndRadius is equivalent to borderRightRadius. +When direction is rtl, borderInlineEndRadius is equivalent to borderLeftRadius.

+
+
+

Optional borderInlineStartRadius

+
borderInlineStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderInlineStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderInlineStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderLeft

+
borderLeft?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-left property

+
+
+

Optional borderLeftColor

+
borderLeftColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderLeftColor>
+

The CSS border-left-color property

+
+
+

Optional borderLeftRadius

+
borderLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional borderLeftStyle

+
borderLeftStyle?: ResponsiveValue<BorderLeftStyle>
+

The CSS border-left-style property

+
+
+

Optional borderLeftWidth

+
borderLeftWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-left-width property

+
+
+

Optional borderRadius

+
borderRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional borderRight

+
borderRight?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right property

+
+
+

Optional borderRightColor

+
borderRightColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderRightColor>
+

The CSS border-right-color property

+
+
+

Optional borderRightRadius

+
borderRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional borderRightStyle

+
borderRightStyle?: ResponsiveValue<BorderRightStyle>
+

The CSS border-right-styles property

+
+
+

Optional borderRightWidth

+
borderRightWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-right-width property

+
+
+

Optional borderStartRadius

+
borderStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, borderStartRadius is equivalent to borderLeftRadius. +When direction is rtl, borderStartRadius is equivalent to borderRightRadius.

+
+
+

Optional borderStyle

+
borderStyle?: ResponsiveValue<BorderStyle>
+

The CSS border-style property

+
+
+

Optional borderTop

+
borderTop?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top property

+
+
+

Optional borderTopColor

+
borderTopColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>
+

The CSS border-top-color property

+
+
+

Optional borderTopLeftRadius

+
borderTopLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional borderTopRadius

+
borderTopRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional borderTopRightRadius

+
borderTopRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional borderTopStyle

+
borderTopStyle?: ResponsiveValue<BorderTopStyle>
+

The CSS border-top-style property

+
+
+

Optional borderTopWidth

+
borderTopWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-top-width property

+
+
+

Optional borderWidth

+
borderWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">
+

The CSS border-width property

+
+
+

Optional borderX

+
borderX?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-right and border-left property

+
+
+

Optional borderY

+
borderY?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">
+

The CSS border-top and border-bottom property

+
+
+

Optional bottom

+
bottom?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS bottom property

+
+
+

Optional boxDecorationBreak

+
boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>
+

The CSS box-decoration property

+
+
+

Optional boxShadow

+
boxShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional boxSize

+
boxSize?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width and height property

+
+
+

Optional boxSizing

+
boxSizing?: BoxSizing
+

The CSS box-sizing property

+
+
+

Optional brightness

+
brightness?: ResponsiveValue<Length>
+

Sets the brightness filter value of an element. +Value is assigned to --chakra-brightness css variable

+
+
+

Optional clipPath

+
clipPath?: ResponsiveValue<ClipPath>
+

The CSS clip-path property.

+

It creates a clipping region that sets what part of an element should be shown.

+
+
+

Optional color

+
color?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional columnGap

+
columnGap?: ResponsiveValue<ColumnGap<Length>>
+

The CSS column-gap property.

+

It sets the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional contrast

+
contrast?: ResponsiveValue<Length>
+

Sets the contrast filter value of an element. +Value is assigned to --chakra-contrast css variable

+
+
+

Optional control

+
control?: Control<any, any>
+

The control passed down from react-hook-form. +Only required if not using FormProvider

+
+
+

Optional css

+
css?: Interpolation<{}>
+

The emotion's css style object

+
+
+

Optional cursor

+
cursor?: ResponsiveValue<Cursor>
+

The CSS cursor property

+
+
+

Optional display

+
display?: ResponsiveValue<Display>
+

The CSS display property

+
+
+

Optional dropShadow

+
dropShadow?: ResponsiveValue<"base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

Sets the drop-shadow filter value of an element. +Value is assigned to --chakra-drop-shadow css variable

+
+
+

Optional errorMessageProps

+
errorMessageProps?: FormErrorMessageProps
+

Chakra FormErrorMessageProps for error message

+
+
+

Optional fill

+
fill?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS fill property for icon svgs and paths

+
+
+

Optional filter

+
filter?: ResponsiveValue<Filter | "auto">
+

The CSS filter property. When set to auto, you allow +Chakra UI to define the color based on the filter style props +(blur, saturate, etc.)

+
+
+

Optional flex

+
flex?: ResponsiveValue<Flex<Length>>
+

The CSS flex property.

+

It defines how a flex item will grow or shrink +to fit the space available in its flex container.

+ +

See

Mozilla Docs

+
+
+

Optional flexBasis

+
flexBasis?: ResponsiveValue<FlexBasis<Length>>
+

The CSS flex-basis property.

+

It defines the initial main size of a flex item.

+ +

See

Mozilla Docs

+
+
+

Optional flexDir

+
flexDir?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexDirection

+
flexDirection?: ResponsiveValue<FlexDirection>
+

The CSS flex-direction property.

+

It defines how flex items are placed in the flex container +defining the main axis and the direction (normal or reversed).

+ +

See

Mozilla Docs

+
+
+

Optional flexFlow

+
flexFlow?: ResponsiveValue<FlexFlow>
+

The CSS flex-flow property.

+

It is a shorthand property for flex-direction and flex-wrap. +It specifies the direction of a flex container, as well as its wrapping behavior.

+ +

See

Mozilla Docs

+
+
+

Optional flexGrow

+
flexGrow?: ResponsiveValue<FlexGrow>
+

The CSS flex-grow property.

+

It defines how much a flexbox item should grow +if there's space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexShrink

+
flexShrink?: ResponsiveValue<FlexShrink>
+

The CSS flex-shrink property.

+

It defines how much a flexbox item should shrink +if there's not enough space available.

+ +

See

Mozilla Docs

+
+
+

Optional flexWrap

+
flexWrap?: ResponsiveValue<FlexWrap>
+

The CSS flex-wrap property.

+

It defines whether flex items are forced onto one line or +can wrap onto multiple lines. If wrapping is allowed, +it sets the direction that lines are stacked.

+ +

See

Mozilla Docs

+
+
+

Optional float

+
float?: ResponsiveValue<Float>
+

The CSS float property

+
+
+

Optional fontFamily

+
fontFamily?: ResponsiveValue<"body" | FontFamily | "heading" | "mono">
+

The CSS font-family property

+
+
+

Optional fontSize

+
fontSize?: ResponsiveValue<number | "small" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl">
+

The CSS font-size property

+
+
+

Optional fontStyle

+
fontStyle?: ResponsiveValue<FontStyle>
+

The CSS font-style property

+
+
+

Optional fontWeight

+
fontWeight?: ResponsiveValue<number | "bold" | string & {} | "black" | "normal" | "hairline" | "thin" | "light" | "medium" | "semibold" | "extrabold">
+

The CSS font-weight property

+
+
+

Optional gap

+
gap?: ResponsiveValue<Gap<Length>>
+

The CSS gap property.

+

It defines the gap between items in both flex and +grid contexts.

+ +

See

Mozilla Docs

+
+
+

Optional gridArea

+
gridArea?: ResponsiveValue<GridArea>
+

The CSS grid-areas property.

+

It specifies a grid item’s size and location within a grid by +contributing a line, a span, or nothing (automatic) +to its grid placement, thereby specifying the edges of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoColumns

+
gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>
+

The CSS grid-auto-columns property.

+

It specifies the size of an implicitly-created grid column track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoFlow

+
gridAutoFlow?: ResponsiveValue<GridAutoFlow>
+

The CSS grid-auto-flow property

+

It controls how the auto-placement algorithm works, +specifying exactly how auto-placed items get flowed into the grid.

+ +

See

Mozilla Docs

+
+
+

Optional gridAutoRows

+
gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>
+

The CSS grid-auto-rows property.

+

It specifies the size of an implicitly-created grid row track or pattern of tracks.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumn

+
gridColumn?: ResponsiveValue<GridColumn>
+

The CSS grid-column property.

+

It specifies a grid item's size and location within a grid column +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnEnd

+
gridColumnEnd?: ResponsiveValue<GridColumnEnd>
+

The CSS grid-column property

+

It specifies a grid item’s end position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the block-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnGap

+
gridColumnGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-column-gap property.

+

It defines the size of the gap (gutter) between an element's columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridColumnStart

+
gridColumnStart?: ResponsiveValue<GridColumnStart>
+

The CSS grid-column property.

+

It specifies a grid item’s start position within the grid column by +contributing a line, a span, or nothing (automatic) to its grid placement

+ +

See

Mozilla Docs

+
+
+

Optional gridGap

+
gridGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-gap property.

+

It defines the gaps (gutters) between rows and columns

+ +

See

Mozilla Docs

+
+
+

Optional gridRow

+
gridRow?: ResponsiveValue<GridRow>
+

The CSS grid-row property

+

It specifies a grid item’s size and location within the grid row +by contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start and inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowEnd

+
gridRowEnd?: ResponsiveValue<GridRowEnd>
+

The CSS grid-row-end property

+

It specifies a grid item’s end position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-end edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowGap

+
gridRowGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

The CSS grid-row-gap property.

+

It defines the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional gridRowStart

+
gridRowStart?: ResponsiveValue<GridRowStart>
+

The CSS grid-row-start property

+

It specifies a grid item’s start position within the grid row by +contributing a line, a span, or nothing (automatic) to its grid placement, +thereby specifying the inline-start edge of its grid area.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplate

+
gridTemplate?: ResponsiveValue<GridTemplate>
+

The CSS grid-template property.

+

It is a shorthand property for defining grid columns, rows, and areas.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateAreas

+
gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>
+

The CSS grid-template-areas property.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateColumns

+
gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>
+

The CSS grid-template-columns property

+

It defines the line names and track sizing functions of the grid columns.

+ +

See

Mozilla Docs

+
+
+

Optional gridTemplateRows

+
gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>
+

The CSS grid-template-rows property.

+

It defines the line names and track sizing functions of the grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional h

+
h?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional height

+
height?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">
+

The CSS height property

+
+
+

Optional helperText

+
helperText?: ReactNode
+

Helper text to show alongside input

+
+
+

Optional helperTextProps

+
helperTextProps?: TextProps
+

Chakra TextProps associated with the helper text

+
+
+

Optional hideBelow

+
hideBelow?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element below the specified breakpoint

+
+
+

Optional hideFrom

+
hideFrom?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">
+

Hides an element from the specified breakpoint and up

+
+
+

Optional hueRotate

+
hueRotate?: ResponsiveValue<Length>
+

Sets the hue-rotate filter value of an element. +Value is assigned to --chakra-hue-rotate css variable

+
+
+

Optional inputMode

+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
+

Hints at the type of data that might be entered by the user while editing the element or its contents

+ +

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

+
+
+

Optional inset

+
inset?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, right, top, bottom property

+
+
+

Optional insetEnd

+
insetEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetEnd is equivalent to right. +When the direction is rtl, insetEnd is equivalent to left.

+
+
+

Optional insetInlineEnd

+
insetInlineEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is ltr, insetInlineEnd is equivalent to right. +When the direction is rtl, insetInlineEnd is equivalent to left.

+
+
+

Optional insetStart

+
insetStart?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

When the direction is start, end is equivalent to left. +When the direction is start, end is equivalent to right.

+
+
+

Optional insetX

+
insetX?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left, and right property

+
+
+

Optional insetY

+
insetY?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top, and bottom property

+
+
+

Optional invert

+
invert?: ResponsiveValue<Length>
+

Sets the invert filter value of an element. +Value is assigned to --chakra-invert css variable

+
+
+

Optional is

+
is?: string
+

Specify that a standard HTML element should behave like a defined custom built-in element

+ +

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

+
+
+

Optional isDisabled

+
isDisabled?: boolean
+

If true, the form control will be disabled. This has 2 side effects:

+
    +
  • The FormLabel will have data-disabled attribute
    • +
  • The form element (e.g, Input) will be disabled
    • +
+ +

Default

false

+
+
+

Optional isInvalid

+
isInvalid?: boolean
+

If true, the form control will be invalid. This has 2 side effects:

+
    +
  • The FormLabel and FormErrorIcon will have data-invalid set to true
    • +
  • The form element (e.g, Input) will have aria-invalid set to true
    • +
+ +

Default

false

+
+
+

Optional isReadOnly

+
isReadOnly?: boolean
+

If true, the form control will be readonly

+ +

Default

false

+
+
+

Optional isRequired

+
isRequired?: boolean
+

If true, the form control will be required. This has 2 side effects:

+
    +
  • The FormLabel will show a required indicator
    • +
  • The form element (e.g, Input) will have aria-required set to true
    • +
+ +

Default

false

+
+
+

Optional isTruncated

+
isTruncated?: boolean
+

If true, it clamps truncate a text after one line.

+
+
+

Optional isolation

+
isolation?: ResponsiveValue<Isolation>
+

The CSS isolation property

+
+
+

Optional justifyContent

+
justifyContent?: ResponsiveValue<JustifyContent>
+

The CSS justify-content property.

+

It defines how the browser distributes space between and around content items +along the main-axis of a flex container, and the inline axis of a grid container.

+ +

See

Mozilla Docs

+
+
+

Optional justifyItems

+
justifyItems?: ResponsiveValue<JustifyItems>
+

The CSS justify-items property.

+

It defines the default justify-self for all items of the box, +giving them all a default way of justifying each box +along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional justifySelf

+
justifySelf?: ResponsiveValue<JustifySelf>
+

The CSS justify-self property.

+

It defines the way a box is justified inside its +alignment container along the appropriate axis.

+ +

See

Mozilla Docs

+
+
+

Optional label

+
label?: ReactNode
+

The label to be associated with the input

+
+
+

Optional labelProps

+
labelProps?: FormLabelProps
+

Chakra FormLabelProps

+
+
+

Optional layerStyle

+
layerStyle?: ResponsiveValue<string & {}>
+

The layer style object to apply. +Note: Styles must be located in theme.layerStyles

+
+
+

Optional left

+
left?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS left property

+
+
+

Optional letterSpacing

+
letterSpacing?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "tighter" | "tight" | "wide" | "wider" | "widest">
+

The CSS letter-spacing property

+
+
+

Optional lineHeight

+
lineHeight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "none" | "normal" | number & {} | "shorter" | "short" | "tall" | "taller">
+

The CSS line-height property

+
+
+

Optional listStyleImage

+
listStyleImage?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStyleImg

+
listStyleImg?: ResponsiveValue<ListStyleImage>
+

The CSS list-style-image property

+
+
+

Optional listStylePos

+
listStylePos?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional listStylePosition

+
listStylePosition?: ResponsiveValue<ListStylePosition>
+

The CSS list-style-position property

+
+
+

Optional m

+
m?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional margin

+
margin?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top, left, bottom and right

+
+
+

Optional marginBottom

+
marginBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional marginEnd

+
marginEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginEnd is equivalent to marginRight. +When direction is rtl, marginEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineEnd

+
marginInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineEnd is equivalent to marginRight. +When direction is rtl, marginInlineEnd is equivalent to marginLeft.

+
+
+

Optional marginInlineStart

+
marginInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginInlineStart is equivalent to marginLeft. +When direction is rtl, marginInlineStart is equivalent to marginRight.

+
+
+

Optional marginLeft

+
marginLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional marginRight

+
marginRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional marginStart

+
marginStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, marginStart is equivalent to marginLeft. +When direction is rtl, marginStart is equivalent to marginRight.

+
+
+

Optional marginTop

+
marginTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional marginX

+
marginX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional marginY

+
marginY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

Optional maxH

+
maxH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxHeight

+
maxHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-height property

+
+
+

Optional maxW

+
maxW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional maxWidth

+
maxWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS max-width property

+
+
+

Optional mb

+
mb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on bottom

+
+
+

Optional me

+
me?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, me is equivalent to marginRight. +When direction is rtl, me is equivalent to marginLeft.

+
+
+

Optional minH

+
minH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minHeight

+
minHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">
+

The CSS min-height property

+
+
+

Optional minW

+
minW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional minWidth

+
minWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">
+

The CSS min-width property

+
+
+

Optional mixBlendMode

+
mixBlendMode?: ResponsiveValue<MixBlendMode>
+

The mix-blend-mode property

+
+
+

Optional ml

+
ml?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left

+
+
+

Optional mr

+
mr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on right

+
+
+

Optional ms

+
ms?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

When direction is ltr, ms is equivalent to marginLeft. +When direction is rtl, ms is equivalent to marginRight.

+
+
+

Optional mt

+
mt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top

+
+
+

Optional mx

+
mx?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on left and right

+
+
+

Optional my

+
my?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">
+

Margin on top and bottom

+
+
+

name

+
name: string
+

The name of the input (required)

+
+
+

Optional noOfLines

+
noOfLines?: ResponsiveValue<number>
+

Used to truncate text at a specific number of lines

+
+
+

Optional objectFit

+
objectFit?: ResponsiveValue<ObjectFit>
+

The CSS object-fit property

+
+
+

Optional objectPosition

+
objectPosition?: ResponsiveValue<ObjectPosition<Length>>
+

The CSS object-position property

+
+
+

Optional onKeyPress

+
onKeyPress?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional onKeyPressCapture

+
onKeyPressCapture?: KeyboardEventHandler<HTMLDivElement>
+
+

Deprecated

+
+

Optional opacity

+
opacity?: ResponsiveValue<Opacity>
+

The CSS opacity property

+
+
+

Optional order

+
order?: ResponsiveValue<Order>
+

The CSS order property.

+

It defines the order to lay out an item in a flex or grid container.

+ +

See

Mozilla Docs

+
+
+

Optional outline

+
outline?: ResponsiveValue<Outline<Length>>
+

The CSS outline property

+
+
+

Optional outlineColor

+
outlineColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS outline-color property

+
+
+

Optional outlineOffset

+
outlineOffset?: ResponsiveValue<OutlineOffset<Length>>
+

The CSS outline-offset property

+
+
+

Optional overflow

+
overflow?: ResponsiveValue<Overflow>
+

The CSS overflow property

+
+
+

Optional overflowWrap

+
overflowWrap?: ResponsiveValue<OverflowWrap>
+

The CSS overflow-wrap property

+
+
+

Optional overflowX

+
overflowX?: ResponsiveValue<OverflowX>
+

The CSS overflow-x property

+
+
+

Optional overflowY

+
overflowY?: ResponsiveValue<OverflowY>
+

The CSS overflow-y property

+
+
+

Optional overscroll

+
overscroll?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehavior

+
overscrollBehavior?: ResponsiveValue<OverscrollBehavior>
+

The CSS overscroll-behavior property

+
+
+

Optional overscrollBehaviorX

+
overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollBehaviorY

+
overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional overscrollX

+
overscrollX?: ResponsiveValue<OverscrollBehaviorX>
+

The CSS overscroll-behavior-x property

+
+
+

Optional overscrollY

+
overscrollY?: ResponsiveValue<OverscrollBehaviorY>
+

The CSS overscroll-behavior-y property

+
+
+

Optional p

+
p?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional padding

+
padding?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top, left, bottom and right

+
+
+

Optional paddingBottom

+
paddingBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional paddingEnd

+
paddingEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingEnd is equivalent to paddingRight. +When direction is rtl, paddingEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineEnd

+
paddingInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineEnd is equivalent to paddingRight. +When direction is rtl, paddingInlineEnd is equivalent to paddingLeft.

+
+
+

Optional paddingInlineStart

+
paddingInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingInlineStart is equivalent to paddingLeft. +When direction is rtl, paddingInlineStart is equivalent to paddingRight.

+
+
+

Optional paddingLeft

+
paddingLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional paddingRight

+
paddingRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional paddingStart

+
paddingStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, paddingStart is equivalent to paddingLeft. +When direction is rtl, paddingStart is equivalent to paddingRight.

+
+
+

Optional paddingTop

+
paddingTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional paddingX

+
paddingX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional paddingY

+
paddingY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional pb

+
pb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on bottom

+
+
+

Optional pe

+
pe?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, pe is equivalent to paddingRight. +When direction is rtl, pe is equivalent to paddingLeft.

+
+
+

Optional pl

+
pl?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left

+
+
+

Optional placeContent

+
placeContent?: ResponsiveValue<PlaceContent>
+

The CSS place-content property.

+

It allows you to align content along both the block and +inline directions at once (i.e. the align-content and justify-content properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional placeItems

+
placeItems?: ResponsiveValue<PlaceItems>
+

The CSS place-items property.

+

It allows you to align items along both the block and +inline directions at once (i.e. the align-items and justify-items properties) +in a relevant layout system such as Grid or Flex.

+ +

See

Mozilla Docs

+
+
+

Optional placeSelf

+
placeSelf?: ResponsiveValue<PlaceSelf>
+

The CSS place-self property.

+

It allows you to align an individual item in both the block and +inline directions at once (i.e. the align-self and justify-self properties) +in a relevant layout system such as Grid or Flexbox.

+ +

See

Mozilla Docs

+
+
+

Optional pointerEvents

+
pointerEvents?: ResponsiveValue<PointerEvents>
+

The CSS pointer-events property

+
+
+

Optional pos

+
pos?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional position

+
position?: ResponsiveValue<Position>
+

The CSS position property

+
+
+

Optional pr

+
pr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on right

+
+
+

Optional ps

+
ps?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

When direction is ltr, ps is equivalent to paddingLeft. +When direction is rtl, ps is equivalent to paddingRight.

+
+
+

Optional pt

+
pt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top

+
+
+

Optional px

+
px?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on left and right

+
+
+

Optional py

+
py?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">
+

Padding on top and bottom

+
+
+

Optional resize

+
resize?: ResponsiveValue<Resize>
+

The CSS resize property

+
+
+

Optional right

+
right?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS right property

+
+
+

Optional ring

+
ring?: ResponsiveValue<Length>
+

Creates outline rings with CSS box-shadow property

+
+
+

Optional ringColor

+
ringColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the outline ring

+
+
+

Optional ringInset

+
ringInset?: ResponsiveValue<"inset" | "none">
+

If the outline ring should an inset

+
+
+

Optional ringOffset

+
ringOffset?: ResponsiveValue<Length>
+

The thickness of the offset shadow when using outline rings

+
+
+

Optional ringOffsetColor

+
ringOffsetColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The color of the offset shadow when adding outline rings

+
+
+

Optional rotate

+
rotate?: ResponsiveValue<Length>
+

Sets the rotation value of the element

+
+
+

Optional rounded

+
rounded?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-radius property

+
+
+

Optional roundedBottom

+
roundedBottom?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-radius property

+
+
+

Optional roundedBottomLeft

+
roundedBottomLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-left-radius property

+
+
+

Optional roundedBottomRight

+
roundedBottomRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-bottom-right-radius property

+
+
+

Optional roundedEnd

+
roundedEnd?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedLeft

+
roundedLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-left-radius property

+
+
+

Optional roundedRight

+
roundedRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-right-radius property

+
+
+

Optional roundedStart

+
roundedStart?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

When direction is ltr, roundedEnd is equivalent to borderRightRadius. +When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

+
+
+

Optional roundedTop

+
roundedTop?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-radius property

+
+
+

Optional roundedTopLeft

+
roundedTopLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-left-radius property

+
+
+

Optional roundedTopRight

+
roundedTopRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">
+

The CSS border-top-right-radius property

+
+
+

Optional rowGap

+
rowGap?: ResponsiveValue<RowGap<Length>>
+

The CSS row-gap property.

+

It sets the size of the gap (gutter) between an element's grid rows.

+ +

See

Mozilla Docs

+
+
+

Optional saturate

+
saturate?: ResponsiveValue<Length>
+

Sets the saturation filter value of an element. +Value is assigned to --chakra-saturate css variable

+
+
+

Optional scale

+
scale?: ResponsiveValue<Length>
+

Sets the scale value of the element

+
+
+

Optional scaleX

+
scaleX?: ResponsiveValue<Length>
+

Scale value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-x
    • +
+
+
+

Optional scaleY

+
scaleY?: ResponsiveValue<Length>
+

Scale value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-scale-y
    • +
+
+
+

Optional shadow

+
shadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">
+

The box-shadow property

+
+
+

Optional skewX

+
skewX?: ResponsiveValue<Length>
+

Skew value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-x
    • +
+
+
+

Optional skewY

+
skewY?: ResponsiveValue<Length>
+

Skew value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-skew-y
    • +
+
+
+

Optional srOnly

+
srOnly?: true | "focusable"
+

If true, hide an element visually without hiding it from screen readers.

+

If focusable, the sr-only styles will be undone, making the element visible +to sighted users as well as screen readers.

+
+
+

Optional stroke

+
stroke?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS stroke property for icon svgs and paths

+
+
+

Optional sx

+
sx?: SystemStyleObject
+

Used to pass theme-aware style props. +NB: This is the public API for user-land

+
+
+

Optional textAlign

+
textAlign?: ResponsiveValue<TextAlign>
+

The CSS text-align property

+
+
+

Optional textColor

+
textColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">
+

The CSS color property

+
+
+

Optional textDecor

+
textDecor?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecoration

+
textDecoration?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">
+

The CSS text-decoration property

+
+
+

Optional textDecorationColor

+
textDecorationColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | TextDecorationColor>
+

The CSS text-decoration-color property

+
+
+

Optional textDecorationLine

+
textDecorationLine?: ResponsiveValue<TextDecorationLine>
+

The CSS text-decoration-line property

+
+
+

Optional textDecorationStyle

+
textDecorationStyle?: ResponsiveValue<TextDecorationStyle>
+

The CSS text-decoration-style property

+
+
+

Optional textDecorationThickness

+
textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>
+

The CSS text-decoration-thickness property

+
+
+

Optional textIndent

+
textIndent?: ResponsiveValue<TextIndent<0 | string & {}>>
+

The CSS text-indent property

+
+
+

Optional textOverflow

+
textOverflow?: ResponsiveValue<TextOverflow>
+

The CSS text-overflow property

+
+
+

Optional textShadow

+
textShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "inner" | "dark-lg" | TextShadow>
+

The text-shadow property

+
+
+

Optional textStyle

+
textStyle?: ResponsiveValue<string & {}>
+

The text style object to apply. +Note: Styles must be located in theme.textStyles

+
+
+

Optional textTransform

+
textTransform?: ResponsiveValue<TextTransform>
+

The CSS text-transform property

+
+
+

Optional textUnderlineOffset

+
textUnderlineOffset?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto">
+

The CSS text-underline-offset property

+
+
+

Optional textareaProps

+
textareaProps?: TextareaProps
+

Chakra TextareaProps

+
+
+

Optional top

+
top?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS top property

+
+
+

Optional transform

+
transform?: ResponsiveValue<"auto" | Transform | "auto-gpu">
+

The CSS transform property

+
+
+

Optional transformOrigin

+
transformOrigin?: ResponsiveValue<number | "center" | "px" | "top" | "right" | "bottom" | "left" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">
+

The CSS transform-origin property

+
+
+

Optional transition

+
transition?: ResponsiveValue<Transition<string & {}>>
+

The CSS transition property

+
+
+

Optional transitionDelay

+
transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>
+

The CSS transition-delay property

+
+
+

Optional transitionDuration

+
transitionDuration?: ResponsiveValue<string>
+

The CSS transition-duration property

+
+
+

Optional transitionProperty

+
transitionProperty?: ResponsiveValue<TransitionProperty>
+

The CSS transition-property property

+
+
+

Optional transitionTimingFunction

+
transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>
+

The CSS transition-timing-function property

+
+
+

Optional translateX

+
translateX?: ResponsiveValue<Length>
+

Translate value of an elements in the x-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-x
    • +
+
+
+

Optional translateY

+
translateY?: ResponsiveValue<Length>
+

Translate value of an elements in the y-direction.

+
    +
  • Only works if transform=auto
    • +
  • It sets the value of --chakra-translate-y
    • +
+
+
+

Optional userSelect

+
userSelect?: ResponsiveValue<UserSelect>
+

The CSS user-select property

+
+
+

Optional verticalAlign

+
verticalAlign?: ResponsiveValue<VerticalAlign<Length>>
+

The CSS vertical-align property

+
+
+

Optional visibility

+
visibility?: ResponsiveValue<Visibility>
+

The CSS visibility property

+
+
+

Optional w

+
w?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional whiteSpace

+
whiteSpace?: ResponsiveValue<WhiteSpace>
+

The CSS white-space property

+
+
+

Optional width

+
width?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">
+

The CSS width property

+
+
+

Optional willChange

+
willChange?: ResponsiveValue<WillChange>
+

The CSS will-change property

+
+
+

Optional wordBreak

+
wordBreak?: ResponsiveValue<WordBreak>
+

The CSS word-break property

+
+
+

Optional zIndex

+
zIndex?: ResponsiveValue<"base" | "overlay" | ZIndex | "hide" | "docked" | "dropdown" | "sticky" | "banner" | "modal" | "popover" | "skipLink" | "toast" | "tooltip">
+

The CSS z-index property

+
+
+
+
+

Settings

 +
+
+

Member Visibility

+
    +
    • +
    • +
    • +
    • +
    • +
+
+

Theme

+ +
+
+

Generated using TypeDoc

+
\ No newline at end of file diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..76ce040 Binary files /dev/null and b/images/logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a19365b --- /dev/null +++ b/index.html @@ -0,0 +1,15 @@ + + + + + + + Demo + + + +
+ + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..3370576 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,3338 @@ +{ + "name": "react-hook-form-chakra", + "version": "1.0.0-alpha.1", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "react-hook-form-chakra", + "version": "1.0.0-alpha.1", + "license": "MIT", + "devDependencies": { + "@chakra-ui/icons": "^2.0.17", + "@chakra-ui/react": "^2.5.4", + "@hookform/resolvers": "^3.0.0", + "@rollup/plugin-typescript": "^11.0.0", + "@types/node": "^18.15.10", + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", + "@vitejs/plugin-react-swc": "^3.0.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "tslib": "^2.5.0", + "typedoc": "^0.23.28", + "typescript": "^4.9.3", + "vite": "^4.2.0", + "yup": "^1.0.2" + }, + "peerDependencies": { + "@chakra-ui/react": "^2", + "react": ">=17", + "react-hook-form": "^7" + } + }, + "node_modules/@babel/code-frame": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", + "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/highlight": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-imports": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz", + "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/types": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.19.4", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", + "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.19.1", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz", + "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz", + "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/helper-validator-identifier": "^7.18.6", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/runtime": { + "version": "7.21.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", + "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==", + "dev": true, + "dependencies": { + "regenerator-runtime": "^0.13.11" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/types": { + "version": "7.21.3", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.3.tgz", + "integrity": "sha512-sBGdETxC+/M4o/zKC0sl6sjWv62WFR/uzxrJ6uYyMLZOUlPnwzw0tKgVHOXxaAd5l2g8pEDM5RZ495GPQI77kg==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/helper-string-parser": "^7.19.4", + "@babel/helper-validator-identifier": "^7.19.1", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@chakra-ui/accordion": { + "version": "2.1.10", + "resolved": "https://registry.npmjs.org/@chakra-ui/accordion/-/accordion-2.1.10.tgz", + "integrity": "sha512-o2S7ft5aQlnPjpLM+C3n/QJLaVdyxkH5IBMEbId/J/T+ZB9L16Q8n3Tqwq5xhcaglsOKyA8+bCraHfnpQyaYfA==", + "dev": true, + "dependencies": { + "@chakra-ui/descendant": "3.0.14", + "@chakra-ui/icon": "3.0.16", + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/react-use-controllable-state": "2.0.8", + "@chakra-ui/react-use-merge-refs": "2.0.7", + "@chakra-ui/shared-utils": "2.0.5", + "@chakra-ui/transition": "2.0.15" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "framer-motion": ">=4.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/alert": { + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/@chakra-ui/alert/-/alert-2.0.18.tgz", + "integrity": "sha512-8jTtua9Yx4PoF50z6eZm/BB8ZCNt/BiCxS0dZeeelp6zlI5G/NwIMlkBfCu4WmL/VLWYj7AxM9aUUdh2ogh5QQ==", + "dev": true, + "dependencies": { + "@chakra-ui/icon": "3.0.16", + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/shared-utils": "2.0.5", + "@chakra-ui/spinner": "2.0.13" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/anatomy": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@chakra-ui/anatomy/-/anatomy-2.1.2.tgz", + "integrity": "sha512-pKfOS/mztc4sUXHNc8ypJ1gPWSolWT770jrgVRfolVbYlki8y5Y+As996zMF6k5lewTu6j9DQequ7Cc9a69IVQ==", + "dev": true + }, + "node_modules/@chakra-ui/avatar": { + "version": "2.2.7", + "resolved": "https://registry.npmjs.org/@chakra-ui/avatar/-/avatar-2.2.7.tgz", + "integrity": "sha512-oydqUEWqgDjAZ5+KPXwthb5qcASlICytGNSAZz9JgE90ab+0SkBKGY2KhJ2epII1EPs46eJUjpoknCal9DBI7g==", + "dev": true, + "dependencies": { + "@chakra-ui/image": "2.0.15", + "@chakra-ui/react-children-utils": "2.0.6", + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/breadcrumb": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@chakra-ui/breadcrumb/-/breadcrumb-2.1.5.tgz", + "integrity": "sha512-p3eQQrHQBkRB69xOmNyBJqEdfCrMt+e0eOH+Pm/DjFWfIVIbnIaFbmDCeWClqlLa21Ypc6h1hR9jEmvg8kmOog==", + "dev": true, + "dependencies": { + "@chakra-ui/react-children-utils": "2.0.6", + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/breakpoint-utils": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@chakra-ui/breakpoint-utils/-/breakpoint-utils-2.0.8.tgz", + "integrity": "sha512-Pq32MlEX9fwb5j5xx8s18zJMARNHlQZH2VH1RZgfgRDpp7DcEgtRW5AInfN5CfqdHLO1dGxA7I3MqEuL5JnIsA==", + "dev": true, + "dependencies": { + "@chakra-ui/shared-utils": "2.0.5" + } + }, + "node_modules/@chakra-ui/button": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@chakra-ui/button/-/button-2.0.17.tgz", + "integrity": "sha512-ZVDK5fQlnNMckxrhWtywdthWPz/QIJGYhN0t8Xgk77DaZVQ9fX6gTjPtR4YH6C77dMCamSVOVPh7u4dA3HgbGg==", + "dev": true, + "dependencies": { + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/react-use-merge-refs": "2.0.7", + "@chakra-ui/shared-utils": "2.0.5", + "@chakra-ui/spinner": "2.0.13" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/card": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@chakra-ui/card/-/card-2.1.6.tgz", + "integrity": "sha512-fFd/WAdRNVY/WOSQv4skpy0WeVhhI0f7dTY1Sm0jVl0KLmuP/GnpsWtKtqWjNcV00K963EXDyhlk6+9oxbP4gw==", + "dev": true, + "dependencies": { + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/checkbox": { + "version": "2.2.13", + "resolved": "https://registry.npmjs.org/@chakra-ui/checkbox/-/checkbox-2.2.13.tgz", + "integrity": "sha512-qSiemTVX1B8FUwo0YxMu1zd5WvW96lFh637W8TbCfsMg5QpRfTBTvs7Mmf/rWEwLReLKwLTG16ZEi69Km7YZ+Q==", + "dev": true, + "dependencies": { + "@chakra-ui/form-control": "2.0.18", + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/react-types": "2.0.7", + "@chakra-ui/react-use-callback-ref": "2.0.7", + "@chakra-ui/react-use-controllable-state": "2.0.8", + "@chakra-ui/react-use-merge-refs": "2.0.7", + "@chakra-ui/react-use-safe-layout-effect": "2.0.5", + "@chakra-ui/react-use-update-effect": "2.0.7", + "@chakra-ui/shared-utils": "2.0.5", + "@chakra-ui/visually-hidden": "2.0.15", + "@zag-js/focus-visible": "0.2.2" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/clickable": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/@chakra-ui/clickable/-/clickable-2.0.14.tgz", + "integrity": "sha512-jfsM1qaD74ZykLHmvmsKRhDyokLUxEfL8Il1VoZMNX5RBI0xW/56vKpLTFF/v/+vLPLS+Te2cZdD4+2O+G6ulA==", + "dev": true, + "dependencies": { + "@chakra-ui/react-use-merge-refs": "2.0.7", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/close-button": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@chakra-ui/close-button/-/close-button-2.0.17.tgz", + "integrity": "sha512-05YPXk456t1Xa3KpqTrvm+7smx+95dmaPiwjiBN3p7LHUQVHJd8ZXSDB0V+WKi419k3cVQeJUdU/azDO2f40sw==", + "dev": true, + "dependencies": { + "@chakra-ui/icon": "3.0.16" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/color-mode": { + "version": "2.1.12", + "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-2.1.12.tgz", + "integrity": "sha512-sYyfJGDoJSLYO+V2hxV9r033qhte5Nw/wAn5yRGGZnEEN1dKPEdWQ3XZvglWSDTNd0w9zkoH2w6vP4FBBYb/iw==", + "dev": true, + "dependencies": { + "@chakra-ui/react-use-safe-layout-effect": "2.0.5" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/control-box": { + "version": "2.0.13", + "resolved": "https://registry.npmjs.org/@chakra-ui/control-box/-/control-box-2.0.13.tgz", + "integrity": "sha512-FEyrU4crxati80KUF/+1Z1CU3eZK6Sa0Yv7Z/ydtz9/tvGblXW9NFanoomXAOvcIFLbaLQPPATm9Gmpr7VG05A==", + "dev": true, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/counter": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/@chakra-ui/counter/-/counter-2.0.14.tgz", + "integrity": "sha512-KxcSRfUbb94dP77xTip2myoE7P2HQQN4V5fRJmNAGbzcyLciJ+aDylUU/UxgNcEjawUp6Q242NbWb1TSbKoqog==", + "dev": true, + "dependencies": { + "@chakra-ui/number-utils": "2.0.7", + "@chakra-ui/react-use-callback-ref": "2.0.7", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/css-reset": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@chakra-ui/css-reset/-/css-reset-2.1.0.tgz", + "integrity": "sha512-7vNNCZnidCv+ciifoMpBmh1swqHJFujWc0YmPCx02Ah+rami+fFeBhCMVXH6o6buvxy28EgPE9ubcJ+FsPnJYw==", + "dev": true, + "peerDependencies": { + "@emotion/react": ">=10.0.35", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/descendant": { + "version": "3.0.14", + "resolved": "https://registry.npmjs.org/@chakra-ui/descendant/-/descendant-3.0.14.tgz", + "integrity": "sha512-+Ahvp9H4HMpfScIv9w1vaecGz7qWAaK1YFHHolz/SIsGLaLGlbdp+5UNabQC7L6TUnzzJDQDxzwif78rTD7ang==", + "dev": true, + "dependencies": { + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/react-use-merge-refs": "2.0.7" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/dom-utils": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@chakra-ui/dom-utils/-/dom-utils-2.0.6.tgz", + "integrity": "sha512-PVtDkPrDD5b8aoL6Atg7SLjkwhWb7BwMcLOF1L449L3nZN+DAO3nyAh6iUhZVJyunELj9d0r65CDlnMREyJZmA==", + "dev": true + }, + "node_modules/@chakra-ui/editable": { + "version": "2.0.21", + "resolved": "https://registry.npmjs.org/@chakra-ui/editable/-/editable-2.0.21.tgz", + "integrity": "sha512-oYuXbHnggxSYJN7P9Pn0Scs9tPC91no4z1y58Oe+ILoJKZ+bFAEHtL7FEISDNJxw++MEukeFu7GU1hVqmdLsKQ==", + "dev": true, + "dependencies": { + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/react-types": "2.0.7", + "@chakra-ui/react-use-callback-ref": "2.0.7", + "@chakra-ui/react-use-controllable-state": "2.0.8", + "@chakra-ui/react-use-focus-on-pointer-down": "2.0.6", + "@chakra-ui/react-use-merge-refs": "2.0.7", + "@chakra-ui/react-use-safe-layout-effect": "2.0.5", + "@chakra-ui/react-use-update-effect": "2.0.7", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/event-utils": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@chakra-ui/event-utils/-/event-utils-2.0.8.tgz", + "integrity": "sha512-IGM/yGUHS+8TOQrZGpAKOJl/xGBrmRYJrmbHfUE7zrG3PpQyXvbLDP1M+RggkCFVgHlJi2wpYIf0QtQlU0XZfw==", + "dev": true + }, + "node_modules/@chakra-ui/focus-lock": { + "version": "2.0.16", + "resolved": "https://registry.npmjs.org/@chakra-ui/focus-lock/-/focus-lock-2.0.16.tgz", + "integrity": "sha512-UuAdGCPVrCa1lecoAvpOQD7JFT7a9RdmhKWhFt5ioIcekSLJcerdLHuuL3w0qz//8kd1/SOt7oP0aJqdAJQrCw==", + "dev": true, + "dependencies": { + "@chakra-ui/dom-utils": "2.0.6", + "react-focus-lock": "^2.9.2" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/form-control": { + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-2.0.18.tgz", + "integrity": "sha512-I0a0jG01IAtRPccOXSNugyRdUAe8Dy40ctqedZvznMweOXzbMCF1m+sHPLdWeWC/VI13VoAispdPY0/zHOdjsQ==", + "dev": true, + "dependencies": { + "@chakra-ui/icon": "3.0.16", + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/react-types": "2.0.7", + "@chakra-ui/react-use-merge-refs": "2.0.7", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/hooks": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@chakra-ui/hooks/-/hooks-2.1.6.tgz", + "integrity": "sha512-oMSOeoOF6/UpwTVlDFHSROAA4hPY8WgJ0erdHs1ZkuwAwHv7UzjDkvrb6xYzAAH9qHoFzc5RIBm6jVoh3LCc+Q==", + "dev": true, + "dependencies": { + "@chakra-ui/react-utils": "2.0.12", + "@chakra-ui/utils": "2.0.15", + "compute-scroll-into-view": "1.0.20", + "copy-to-clipboard": "3.3.3" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/icon": { + "version": "3.0.16", + "resolved": "https://registry.npmjs.org/@chakra-ui/icon/-/icon-3.0.16.tgz", + "integrity": "sha512-RpA1X5Ptz8Mt39HSyEIW1wxAz2AXyf9H0JJ5HVx/dBdMZaGMDJ0HyyPBVci0m4RCoJuyG1HHG/DXJaVfUTVAeg==", + "dev": true, + "dependencies": { + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/icons": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-2.0.17.tgz", + "integrity": "sha512-HMJP0WrJgAmFR9+Xh/CBH0nVnGMsJ4ZC8MK6tMgxPKd9/muvn0I4hsicHqdPlLpmB0TlxlhkBAKaVMtOdz6F0w==", + "dev": true, + "dependencies": { + "@chakra-ui/icon": "3.0.16" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/image": { + "version": "2.0.15", + "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-2.0.15.tgz", + "integrity": "sha512-w2rElXtI3FHXuGpMCsSklus+pO1Pl2LWDwsCGdpBQUvGFbnHfl7MftQgTlaGHeD5OS95Pxva39hKrA2VklKHiQ==", + "dev": true, + "dependencies": { + "@chakra-ui/react-use-safe-layout-effect": "2.0.5", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/input": { + "version": "2.0.21", + "resolved": "https://registry.npmjs.org/@chakra-ui/input/-/input-2.0.21.tgz", + "integrity": "sha512-AIWjjg6MgcOtlvKmVoZfPPfgF+sBSWL3Zq2HSCAMvS6h7jfxz/Xv0UTFGPk5F4Wt0YHT7qMySg0Jsm0b78HZJg==", + "dev": true, + "dependencies": { + "@chakra-ui/form-control": "2.0.18", + "@chakra-ui/object-utils": "2.0.8", + "@chakra-ui/react-children-utils": "2.0.6", + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/layout": { + "version": "2.1.17", + "resolved": "https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.17.tgz", + "integrity": "sha512-IOUReBf0e+q4YN1jqWByeXEnZ7cJIl+3qU1pIvfEEsOvUlSWqrmTmsb7HO3uwMAbmGTGEOgwAUmfSiwO0wBwxg==", + "dev": true, + "dependencies": { + "@chakra-ui/breakpoint-utils": "2.0.8", + "@chakra-ui/icon": "3.0.16", + "@chakra-ui/object-utils": "2.0.8", + "@chakra-ui/react-children-utils": "2.0.6", + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/lazy-utils": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@chakra-ui/lazy-utils/-/lazy-utils-2.0.5.tgz", + "integrity": "sha512-UULqw7FBvcckQk2n3iPO56TMJvDsNv0FKZI6PlUNJVaGsPbsYxK/8IQ60vZgaTVPtVcjY6BE+y6zg8u9HOqpyg==", + "dev": true + }, + "node_modules/@chakra-ui/live-region": { + "version": "2.0.13", + "resolved": "https://registry.npmjs.org/@chakra-ui/live-region/-/live-region-2.0.13.tgz", + "integrity": "sha512-Ja+Slk6ZkxSA5oJzU2VuGU7TpZpbMb/4P4OUhIf2D30ctmIeXkxTWw1Bs1nGJAVtAPcGS5sKA+zb89i8g+0cTQ==", + "dev": true, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/media-query": { + "version": "3.2.12", + "resolved": "https://registry.npmjs.org/@chakra-ui/media-query/-/media-query-3.2.12.tgz", + "integrity": "sha512-8pSLDf3oxxhFrhd40rs7vSeIBfvOmIKHA7DJlGUC/y+9irD24ZwgmCtFnn+y3gI47hTJsopbSX+wb8nr7XPswA==", + "dev": true, + "dependencies": { + "@chakra-ui/breakpoint-utils": "2.0.8", + "@chakra-ui/react-env": "3.0.0", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/menu": { + "version": "2.1.11", + "resolved": "https://registry.npmjs.org/@chakra-ui/menu/-/menu-2.1.11.tgz", + "integrity": "sha512-my6eWTHG9aWLUZdipghLFfoQbfXtAb+5yI8GdnsGcPXpOI6HowVNTdXpj3ytXiBfaKQabprrUNBIy/d6xeYzmQ==", + "dev": true, + "dependencies": { + "@chakra-ui/clickable": "2.0.14", + "@chakra-ui/descendant": "3.0.14", + "@chakra-ui/lazy-utils": "2.0.5", + "@chakra-ui/popper": "3.0.13", + "@chakra-ui/react-children-utils": "2.0.6", + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/react-use-animation-state": "2.0.8", + "@chakra-ui/react-use-controllable-state": "2.0.8", + "@chakra-ui/react-use-disclosure": "2.0.8", + "@chakra-ui/react-use-focus-effect": "2.0.9", + "@chakra-ui/react-use-merge-refs": "2.0.7", + "@chakra-ui/react-use-outside-click": "2.0.7", + "@chakra-ui/react-use-update-effect": "2.0.7", + "@chakra-ui/shared-utils": "2.0.5", + "@chakra-ui/transition": "2.0.15" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "framer-motion": ">=4.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/modal": { + "version": "2.2.10", + "resolved": "https://registry.npmjs.org/@chakra-ui/modal/-/modal-2.2.10.tgz", + "integrity": "sha512-QWnztzClSluH78j65aCQk9BFjMTVwGnrv4UNhoaBHQoj5eB7JYvSOR6Yg6l1/ZZSPcIKNqJ/34zbAKfayMzPUw==", + "dev": true, + "dependencies": { + "@chakra-ui/close-button": "2.0.17", + "@chakra-ui/focus-lock": "2.0.16", + "@chakra-ui/portal": "2.0.16", + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/react-types": "2.0.7", + "@chakra-ui/react-use-merge-refs": "2.0.7", + "@chakra-ui/shared-utils": "2.0.5", + "@chakra-ui/transition": "2.0.15", + "aria-hidden": "^1.2.2", + "react-remove-scroll": "^2.5.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "framer-motion": ">=4.0.0", + "react": ">=18", + "react-dom": ">=18" + } + }, + "node_modules/@chakra-ui/number-input": { + "version": "2.0.19", + "resolved": "https://registry.npmjs.org/@chakra-ui/number-input/-/number-input-2.0.19.tgz", + "integrity": "sha512-HDaITvtMEqOauOrCPsARDxKD9PSHmhWywpcyCSOX0lMe4xx2aaGhU0QQFhsJsykj8Er6pytMv6t0KZksdDv3YA==", + "dev": true, + "dependencies": { + "@chakra-ui/counter": "2.0.14", + "@chakra-ui/form-control": "2.0.18", + "@chakra-ui/icon": "3.0.16", + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/react-types": "2.0.7", + "@chakra-ui/react-use-callback-ref": "2.0.7", + "@chakra-ui/react-use-event-listener": "2.0.7", + "@chakra-ui/react-use-interval": "2.0.5", + "@chakra-ui/react-use-merge-refs": "2.0.7", + "@chakra-ui/react-use-safe-layout-effect": "2.0.5", + "@chakra-ui/react-use-update-effect": "2.0.7", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/number-utils": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@chakra-ui/number-utils/-/number-utils-2.0.7.tgz", + "integrity": "sha512-yOGxBjXNvLTBvQyhMDqGU0Oj26s91mbAlqKHiuw737AXHt0aPllOthVUqQMeaYLwLCjGMg0jtI7JReRzyi94Dg==", + "dev": true + }, + "node_modules/@chakra-ui/object-utils": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@chakra-ui/object-utils/-/object-utils-2.0.8.tgz", + "integrity": "sha512-2upjT2JgRuiupdrtBWklKBS6tqeGMA77Nh6Q0JaoQuH/8yq+15CGckqn3IUWkWoGI0Fg3bK9LDlbbD+9DLw95Q==", + "dev": true + }, + "node_modules/@chakra-ui/pin-input": { + "version": "2.0.20", + "resolved": "https://registry.npmjs.org/@chakra-ui/pin-input/-/pin-input-2.0.20.tgz", + "integrity": "sha512-IHVmerrtHN8F+jRB3W1HnMir1S1TUCWhI7qDInxqPtoRffHt6mzZgLZ0izx8p1fD4HkW4c1d4/ZLEz9uH9bBRg==", + "dev": true, + "dependencies": { + "@chakra-ui/descendant": "3.0.14", + "@chakra-ui/react-children-utils": "2.0.6", + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/react-use-controllable-state": "2.0.8", + "@chakra-ui/react-use-merge-refs": "2.0.7", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/popover": { + "version": "2.1.9", + "resolved": "https://registry.npmjs.org/@chakra-ui/popover/-/popover-2.1.9.tgz", + "integrity": "sha512-OMJ12VVs9N32tFaZSOqikkKPtwAVwXYsES/D1pff/amBrE3ngCrpxJSIp4uvTdORfIYDojJqrR52ZplDKS9hRQ==", + "dev": true, + "dependencies": { + "@chakra-ui/close-button": "2.0.17", + "@chakra-ui/lazy-utils": "2.0.5", + "@chakra-ui/popper": "3.0.13", + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/react-types": "2.0.7", + "@chakra-ui/react-use-animation-state": "2.0.8", + "@chakra-ui/react-use-disclosure": "2.0.8", + "@chakra-ui/react-use-focus-effect": "2.0.9", + "@chakra-ui/react-use-focus-on-pointer-down": "2.0.6", + "@chakra-ui/react-use-merge-refs": "2.0.7", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "framer-motion": ">=4.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/popper": { + "version": "3.0.13", + "resolved": "https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.13.tgz", + "integrity": "sha512-FwtmYz80Ju8oK3Z1HQfisUE7JIMmDsCQsRBu6XuJ3TFQnBHit73yjZmxKjuRJ4JgyT4WBnZoTF3ATbRKSagBeg==", + "dev": true, + "dependencies": { + "@chakra-ui/react-types": "2.0.7", + "@chakra-ui/react-use-merge-refs": "2.0.7", + "@popperjs/core": "^2.9.3" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/portal": { + "version": "2.0.16", + "resolved": "https://registry.npmjs.org/@chakra-ui/portal/-/portal-2.0.16.tgz", + "integrity": "sha512-bVID0qbQ0l4xq38LdqAN4EKD4/uFkDnXzFwOlviC9sl0dNhzICDb1ltuH/Adl1d2HTMqyN60O3GO58eHy7plnQ==", + "dev": true, + "dependencies": { + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/react-use-safe-layout-effect": "2.0.5" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, + "node_modules/@chakra-ui/progress": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@chakra-ui/progress/-/progress-2.1.6.tgz", + "integrity": "sha512-hHh5Ysv4z6bK+j2GJbi/FT9CVyto2PtNUNwBmr3oNMVsoOUMoRjczfXvvYqp0EHr9PCpxqrq7sRwgQXUzhbDSw==", + "dev": true, + "dependencies": { + "@chakra-ui/react-context": "2.0.8" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/provider": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/provider/-/provider-2.2.1.tgz", + "integrity": "sha512-GBfEuAtcV0607CKfz0W4U1Lh2ygh90ZeFnrXfKoX/UJxx3kj2XdB2r9WxMj69n5+q1AsWL+LwVd/JZuJdlC/Bg==", + "dev": true, + "dependencies": { + "@chakra-ui/css-reset": "2.1.0", + "@chakra-ui/portal": "2.0.16", + "@chakra-ui/react-env": "3.0.0", + "@chakra-ui/system": "2.5.4", + "@chakra-ui/utils": "2.0.15" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0", + "@emotion/styled": "^11.0.0", + "react": ">=18", + "react-dom": ">=18" + } + }, + "node_modules/@chakra-ui/radio": { + "version": "2.0.22", + "resolved": "https://registry.npmjs.org/@chakra-ui/radio/-/radio-2.0.22.tgz", + "integrity": "sha512-GsQ5WAnLwivWl6gPk8P1x+tCcpVakCt5R5T0HumF7DGPXKdJbjS+RaFySrbETmyTJsKY4QrfXn+g8CWVrMjPjw==", + "dev": true, + "dependencies": { + "@chakra-ui/form-control": "2.0.18", + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/react-types": "2.0.7", + "@chakra-ui/react-use-merge-refs": "2.0.7", + "@chakra-ui/shared-utils": "2.0.5", + "@zag-js/focus-visible": "0.2.2" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react": { + "version": "2.5.4", + "resolved": "https://registry.npmjs.org/@chakra-ui/react/-/react-2.5.4.tgz", + "integrity": "sha512-HSRyCOqfwl+SjNSysFPe02JTiev4YgUjY67rRONyBD0a2G/i24EcAZxgIsMkl23tWPwgEdga3ANszPH6PurpCg==", + "dev": true, + "dependencies": { + "@chakra-ui/accordion": "2.1.10", + "@chakra-ui/alert": "2.0.18", + "@chakra-ui/avatar": "2.2.7", + "@chakra-ui/breadcrumb": "2.1.5", + "@chakra-ui/button": "2.0.17", + "@chakra-ui/card": "2.1.6", + "@chakra-ui/checkbox": "2.2.13", + "@chakra-ui/close-button": "2.0.17", + "@chakra-ui/control-box": "2.0.13", + "@chakra-ui/counter": "2.0.14", + "@chakra-ui/css-reset": "2.1.0", + "@chakra-ui/editable": "2.0.21", + "@chakra-ui/focus-lock": "2.0.16", + "@chakra-ui/form-control": "2.0.18", + "@chakra-ui/hooks": "2.1.6", + "@chakra-ui/icon": "3.0.16", + "@chakra-ui/image": "2.0.15", + "@chakra-ui/input": "2.0.21", + "@chakra-ui/layout": "2.1.17", + "@chakra-ui/live-region": "2.0.13", + "@chakra-ui/media-query": "3.2.12", + "@chakra-ui/menu": "2.1.11", + "@chakra-ui/modal": "2.2.10", + "@chakra-ui/number-input": "2.0.19", + "@chakra-ui/pin-input": "2.0.20", + "@chakra-ui/popover": "2.1.9", + "@chakra-ui/popper": "3.0.13", + "@chakra-ui/portal": "2.0.16", + "@chakra-ui/progress": "2.1.6", + "@chakra-ui/provider": "2.2.1", + "@chakra-ui/radio": "2.0.22", + "@chakra-ui/react-env": "3.0.0", + "@chakra-ui/select": "2.0.19", + "@chakra-ui/skeleton": "2.0.24", + "@chakra-ui/slider": "2.0.23", + "@chakra-ui/spinner": "2.0.13", + "@chakra-ui/stat": "2.0.18", + "@chakra-ui/styled-system": "2.7.0", + "@chakra-ui/switch": "2.0.25", + "@chakra-ui/system": "2.5.4", + "@chakra-ui/table": "2.0.17", + "@chakra-ui/tabs": "2.1.9", + "@chakra-ui/tag": "3.0.0", + "@chakra-ui/textarea": "2.0.19", + "@chakra-ui/theme": "3.0.0", + "@chakra-ui/theme-utils": "2.0.14", + "@chakra-ui/toast": "6.1.0", + "@chakra-ui/tooltip": "2.2.7", + "@chakra-ui/transition": "2.0.15", + "@chakra-ui/utils": "2.0.15", + "@chakra-ui/visually-hidden": "2.0.15" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0", + "@emotion/styled": "^11.0.0", + "framer-motion": ">=4.0.0", + "react": ">=18", + "react-dom": ">=18" + } + }, + "node_modules/@chakra-ui/react-children-utils": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-children-utils/-/react-children-utils-2.0.6.tgz", + "integrity": "sha512-QVR2RC7QsOsbWwEnq9YduhpqSFnZGvjjGREV8ygKi8ADhXh93C8azLECCUVgRJF2Wc+So1fgxmjLcbZfY2VmBA==", + "dev": true, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-context": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-context/-/react-context-2.0.8.tgz", + "integrity": "sha512-tRTKdn6lCTXM6WPjSokAAKCw2ioih7Eg8cNgaYRSwKBck8nkz9YqxgIIEj3dJD7MGtpl24S/SNI98iRWkRwR/A==", + "dev": true, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-env": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-env/-/react-env-3.0.0.tgz", + "integrity": "sha512-tfMRO2v508HQWAqSADFrwZgR9oU10qC97oV6zGbjHh9ALP0/IcFR+Bi71KRTveDTm85fMeAzZYGj57P3Dsipkw==", + "dev": true, + "dependencies": { + "@chakra-ui/react-use-safe-layout-effect": "2.0.5" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-types/-/react-types-2.0.7.tgz", + "integrity": "sha512-12zv2qIZ8EHwiytggtGvo4iLT0APris7T0qaAWqzpUGS0cdUtR8W+V1BJ5Ocq+7tA6dzQ/7+w5hmXih61TuhWQ==", + "dev": true, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-use-animation-state": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-use-animation-state/-/react-use-animation-state-2.0.8.tgz", + "integrity": "sha512-xv9zSF2Rd1mHWQ+m5DLBWeh4atF8qrNvsOs3MNrvxKYBS3f79N3pqcQGrWAEvirXWXfiCeje2VAkEggqFRIo+Q==", + "dev": true, + "dependencies": { + "@chakra-ui/dom-utils": "2.0.6", + "@chakra-ui/react-use-event-listener": "2.0.7" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-use-callback-ref": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-use-callback-ref/-/react-use-callback-ref-2.0.7.tgz", + "integrity": "sha512-YjT76nTpfHAK5NxplAlZsQwNju5KmQExnqsWNPFeOR6vvbC34+iPSTr+r91i1Hdy7gBSbevsOsd5Wm6RN3GuMw==", + "dev": true, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-use-controllable-state": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-use-controllable-state/-/react-use-controllable-state-2.0.8.tgz", + "integrity": "sha512-F7rdCbLEmRjwwODqWZ3y+mKgSSHPcLQxeUygwk1BkZPXbKkJJKymOIjIynil2cbH7ku3hcSIWRvuhpCcfQWJ7Q==", + "dev": true, + "dependencies": { + "@chakra-ui/react-use-callback-ref": "2.0.7" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-use-disclosure": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-use-disclosure/-/react-use-disclosure-2.0.8.tgz", + "integrity": "sha512-2ir/mHe1YND40e+FyLHnDsnDsBQPwzKDLzfe9GZri7y31oU83JSbHdlAXAhp3bpjohslwavtRCp+S/zRxfO9aQ==", + "dev": true, + "dependencies": { + "@chakra-ui/react-use-callback-ref": "2.0.7" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-use-event-listener": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-use-event-listener/-/react-use-event-listener-2.0.7.tgz", + "integrity": "sha512-4wvpx4yudIO3B31pOrXuTHDErawmwiXnvAN7gLEOVREi16+YGNcFnRJ5X5nRrmB7j2MDUtsEDpRBFfw5Z9xQ5g==", + "dev": true, + "dependencies": { + "@chakra-ui/react-use-callback-ref": "2.0.7" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-use-focus-effect": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-use-focus-effect/-/react-use-focus-effect-2.0.9.tgz", + "integrity": "sha512-20nfNkpbVwyb41q9wxp8c4jmVp6TUGAPE3uFTDpiGcIOyPW5aecQtPmTXPMJH+2aa8Nu1wyoT1btxO+UYiQM3g==", + "dev": true, + "dependencies": { + "@chakra-ui/dom-utils": "2.0.6", + "@chakra-ui/react-use-event-listener": "2.0.7", + "@chakra-ui/react-use-safe-layout-effect": "2.0.5", + "@chakra-ui/react-use-update-effect": "2.0.7" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-use-focus-on-pointer-down": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-use-focus-on-pointer-down/-/react-use-focus-on-pointer-down-2.0.6.tgz", + "integrity": "sha512-OigXiLRVySn3tyVqJ/rn57WGuukW8TQe8fJYiLwXbcNyAMuYYounvRxvCy2b53sQ7QIZamza0N0jhirbH5FNoQ==", + "dev": true, + "dependencies": { + "@chakra-ui/react-use-event-listener": "2.0.7" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-use-interval": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-use-interval/-/react-use-interval-2.0.5.tgz", + "integrity": "sha512-1nbdwMi2K87V6p5f5AseOKif2CkldLaJlq1TOqaPRwb7v3aU9rltBtYdf+fIyuHSToNJUV6wd9budCFdLCl3Fg==", + "dev": true, + "dependencies": { + "@chakra-ui/react-use-callback-ref": "2.0.7" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-use-latest-ref": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-use-latest-ref/-/react-use-latest-ref-2.0.5.tgz", + "integrity": "sha512-3mIuFzMyIo3Ok/D8uhV9voVg7KkrYVO/pwVvNPJOHsDQqCA6DpYE4WDsrIx+fVcwad3Ta7SupexR5PoI+kq6QQ==", + "dev": true, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-use-merge-refs": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-use-merge-refs/-/react-use-merge-refs-2.0.7.tgz", + "integrity": "sha512-zds4Uhsc+AMzdH8JDDkLVet9baUBgtOjPbhC5r3A0ZXjZvGhCztFAVE3aExYiVoMPoHLKbLcqvCWE6ioFKz1lw==", + "dev": true, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-use-outside-click": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-use-outside-click/-/react-use-outside-click-2.0.7.tgz", + "integrity": "sha512-MsAuGLkwYNxNJ5rb8lYNvXApXxYMnJ3MzqBpQj1kh5qP/+JSla9XMjE/P94ub4fSEttmNSqs43SmPPrmPuihsQ==", + "dev": true, + "dependencies": { + "@chakra-ui/react-use-callback-ref": "2.0.7" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-use-pan-event": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-use-pan-event/-/react-use-pan-event-2.0.9.tgz", + "integrity": "sha512-xu35QXkiyrgsHUOnctl+SwNcwf9Rl62uYE5y8soKOZdBm8E+FvZIt2hxUzK1EoekbJCMzEZ0Yv1ZQCssVkSLaQ==", + "dev": true, + "dependencies": { + "@chakra-ui/event-utils": "2.0.8", + "@chakra-ui/react-use-latest-ref": "2.0.5", + "framesync": "6.1.2" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-use-previous": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-use-previous/-/react-use-previous-2.0.5.tgz", + "integrity": "sha512-BIZgjycPE4Xr+MkhKe0h67uHXzQQkBX/u5rYPd65iMGdX1bCkbE0oorZNfOHLKdTmnEb4oVsNvfN6Rfr+Mnbxw==", + "dev": true, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-use-safe-layout-effect": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-use-safe-layout-effect/-/react-use-safe-layout-effect-2.0.5.tgz", + "integrity": "sha512-MwAQBz3VxoeFLaesaSEN87reVNVbjcQBDex2WGexAg6hUB6n4gc1OWYH/iXp4tzp4kuggBNhEHkk9BMYXWfhJQ==", + "dev": true, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-use-size": { + "version": "2.0.10", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-use-size/-/react-use-size-2.0.10.tgz", + "integrity": "sha512-fdIkH14GDnKQrtQfxX8N3gxbXRPXEl67Y3zeD9z4bKKcQUAYIMqs0MsPZY+FMpGQw8QqafM44nXfL038aIrC5w==", + "dev": true, + "dependencies": { + "@zag-js/element-size": "0.3.2" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-use-timeout": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-use-timeout/-/react-use-timeout-2.0.5.tgz", + "integrity": "sha512-QqmB+jVphh3h/CS60PieorpY7UqSPkrQCB7f7F+i9vwwIjtP8fxVHMmkb64K7VlzQiMPzv12nlID5dqkzlv0mw==", + "dev": true, + "dependencies": { + "@chakra-ui/react-use-callback-ref": "2.0.7" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-use-update-effect": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-use-update-effect/-/react-use-update-effect-2.0.7.tgz", + "integrity": "sha512-vBM2bmmM83ZdDtasWv3PXPznpTUd+FvqBC8J8rxoRmvdMEfrxTiQRBJhiGHLpS9BPLLPQlosN6KdFU97csB6zg==", + "dev": true, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/react-utils": { + "version": "2.0.12", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-utils/-/react-utils-2.0.12.tgz", + "integrity": "sha512-GbSfVb283+YA3kA8w8xWmzbjNWk14uhNpntnipHCftBibl0lxtQ9YqMFQLwuFOO0U2gYVocszqqDWX+XNKq9hw==", + "dev": true, + "dependencies": { + "@chakra-ui/utils": "2.0.15" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "node_modules/@chakra-ui/select": { + "version": "2.0.19", + "resolved": "https://registry.npmjs.org/@chakra-ui/select/-/select-2.0.19.tgz", + "integrity": "sha512-eAlFh+JhwtJ17OrB6fO6gEAGOMH18ERNrXLqWbYLrs674Le7xuREgtuAYDoxUzvYXYYTTdOJtVbcHGriI3o6rA==", + "dev": true, + "dependencies": { + "@chakra-ui/form-control": "2.0.18", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/shared-utils": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@chakra-ui/shared-utils/-/shared-utils-2.0.5.tgz", + "integrity": "sha512-4/Wur0FqDov7Y0nCXl7HbHzCg4aq86h+SXdoUeuCMD3dSj7dpsVnStLYhng1vxvlbUnLpdF4oz5Myt3i/a7N3Q==", + "dev": true + }, + "node_modules/@chakra-ui/skeleton": { + "version": "2.0.24", + "resolved": "https://registry.npmjs.org/@chakra-ui/skeleton/-/skeleton-2.0.24.tgz", + "integrity": "sha512-1jXtVKcl/jpbrJlc/TyMsFyI651GTXY5ma30kWyTXoby2E+cxbV6OR8GB/NMZdGxbQBax8/VdtYVjI0n+OBqWA==", + "dev": true, + "dependencies": { + "@chakra-ui/media-query": "3.2.12", + "@chakra-ui/react-use-previous": "2.0.5", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/slider": { + "version": "2.0.23", + "resolved": "https://registry.npmjs.org/@chakra-ui/slider/-/slider-2.0.23.tgz", + "integrity": "sha512-/eyRUXLla+ZdBUPXpakE3SAS2JS8mIJR6qcUYiPVKSpRAi6tMyYeQijAXn2QC1AUVd2JrG8Pz+1Jy7Po3uA7cA==", + "dev": true, + "dependencies": { + "@chakra-ui/number-utils": "2.0.7", + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/react-types": "2.0.7", + "@chakra-ui/react-use-callback-ref": "2.0.7", + "@chakra-ui/react-use-controllable-state": "2.0.8", + "@chakra-ui/react-use-latest-ref": "2.0.5", + "@chakra-ui/react-use-merge-refs": "2.0.7", + "@chakra-ui/react-use-pan-event": "2.0.9", + "@chakra-ui/react-use-size": "2.0.10", + "@chakra-ui/react-use-update-effect": "2.0.7" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/spinner": { + "version": "2.0.13", + "resolved": "https://registry.npmjs.org/@chakra-ui/spinner/-/spinner-2.0.13.tgz", + "integrity": "sha512-T1/aSkVpUIuiYyrjfn1+LsQEG7Onbi1UE9ccS/evgf61Dzy4GgTXQUnDuWFSgpV58owqirqOu6jn/9eCwDlzlg==", + "dev": true, + "dependencies": { + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/stat": { + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/@chakra-ui/stat/-/stat-2.0.18.tgz", + "integrity": "sha512-wKyfBqhVlIs9bkSerUc6F9KJMw0yTIEKArW7dejWwzToCLPr47u+CtYO6jlJHV6lRvkhi4K4Qc6pyvtJxZ3VpA==", + "dev": true, + "dependencies": { + "@chakra-ui/icon": "3.0.16", + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/styled-system": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-2.7.0.tgz", + "integrity": "sha512-iv38qCpRAW53lg2+F5OOUh7jXW8uoYvOZaHgNVrlTHK78+VUzEfsAjl+LAkU5eDzyJE48GSegwOu05gAKa4cEg==", + "dev": true, + "dependencies": { + "@chakra-ui/shared-utils": "2.0.5", + "csstype": "^3.0.11", + "lodash.mergewith": "4.6.2" + } + }, + "node_modules/@chakra-ui/switch": { + "version": "2.0.25", + "resolved": "https://registry.npmjs.org/@chakra-ui/switch/-/switch-2.0.25.tgz", + "integrity": "sha512-5PIBtXgnfXFldSt8UzL3bxcWLcS+oN4alQFZZ83kbWmKQPxADrvTXCkurCbOxnuV6WB1XKv8IqC7ddXjWI0OWg==", + "dev": true, + "dependencies": { + "@chakra-ui/checkbox": "2.2.13", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "framer-motion": ">=4.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/system": { + "version": "2.5.4", + "resolved": "https://registry.npmjs.org/@chakra-ui/system/-/system-2.5.4.tgz", + "integrity": "sha512-Eg1A6ZSLbj+XFuiQkb28/09mrSg8eGJ47F3vJd4K2sDDori5FyHSOPrPFqx0qhXzSq+lHXREBhS7izLN4xx7qg==", + "dev": true, + "dependencies": { + "@chakra-ui/color-mode": "2.1.12", + "@chakra-ui/object-utils": "2.0.8", + "@chakra-ui/react-utils": "2.0.12", + "@chakra-ui/styled-system": "2.7.0", + "@chakra-ui/theme-utils": "2.0.14", + "@chakra-ui/utils": "2.0.15", + "react-fast-compare": "3.2.0" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0", + "@emotion/styled": "^11.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/table": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@chakra-ui/table/-/table-2.0.17.tgz", + "integrity": "sha512-OScheTEp1LOYvTki2NFwnAYvac8siAhW9BI5RKm5f5ORL2gVJo4I72RUqE0aKe1oboxgm7CYt5afT5PS5cG61A==", + "dev": true, + "dependencies": { + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/tabs": { + "version": "2.1.9", + "resolved": "https://registry.npmjs.org/@chakra-ui/tabs/-/tabs-2.1.9.tgz", + "integrity": "sha512-Yf8e0kRvaGM6jfkJum0aInQ0U3ZlCafmrYYni2lqjcTtThqu+Yosmo3iYlnullXxCw5MVznfrkb9ySvgQowuYg==", + "dev": true, + "dependencies": { + "@chakra-ui/clickable": "2.0.14", + "@chakra-ui/descendant": "3.0.14", + "@chakra-ui/lazy-utils": "2.0.5", + "@chakra-ui/react-children-utils": "2.0.6", + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/react-use-controllable-state": "2.0.8", + "@chakra-ui/react-use-merge-refs": "2.0.7", + "@chakra-ui/react-use-safe-layout-effect": "2.0.5", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/tag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@chakra-ui/tag/-/tag-3.0.0.tgz", + "integrity": "sha512-YWdMmw/1OWRwNkG9pX+wVtZio+B89odaPj6XeMn5nfNN8+jyhIEpouWv34+CO9G0m1lupJTxPSfgLAd7cqXZMA==", + "dev": true, + "dependencies": { + "@chakra-ui/icon": "3.0.16", + "@chakra-ui/react-context": "2.0.8" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/textarea": { + "version": "2.0.19", + "resolved": "https://registry.npmjs.org/@chakra-ui/textarea/-/textarea-2.0.19.tgz", + "integrity": "sha512-adJk+qVGsFeJDvfn56CcJKKse8k7oMGlODrmpnpTdF+xvlsiTM+1GfaJvgNSpHHuQFdz/A0z1uJtfGefk0G2ZA==", + "dev": true, + "dependencies": { + "@chakra-ui/form-control": "2.0.18", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/theme": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@chakra-ui/theme/-/theme-3.0.0.tgz", + "integrity": "sha512-j71pp74rCk+WtuoDnCTLx1EdWRnoh2GAfTn5/bQmlB4MKWq5VREh9Nef82SN0emNKg6DdICusKVgTVA1O1aPNQ==", + "dev": true, + "dependencies": { + "@chakra-ui/anatomy": "2.1.2", + "@chakra-ui/shared-utils": "2.0.5", + "@chakra-ui/theme-tools": "2.0.17" + }, + "peerDependencies": { + "@chakra-ui/styled-system": ">=2.0.0" + } + }, + "node_modules/@chakra-ui/theme-tools": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@chakra-ui/theme-tools/-/theme-tools-2.0.17.tgz", + "integrity": "sha512-Auu38hnihlJZQcPok6itRDBbwof3TpXGYtDPnOvrq4Xp7jnab36HLt7KEXSDPXbtOk3ZqU99pvI1en5LbDrdjg==", + "dev": true, + "dependencies": { + "@chakra-ui/anatomy": "2.1.2", + "@chakra-ui/shared-utils": "2.0.5", + "color2k": "^2.0.0" + }, + "peerDependencies": { + "@chakra-ui/styled-system": ">=2.0.0" + } + }, + "node_modules/@chakra-ui/theme-utils": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/@chakra-ui/theme-utils/-/theme-utils-2.0.14.tgz", + "integrity": "sha512-VIqB++L1MtXkkAQuObavYbE4LjtKgTw2j/PYpm+Fx0fi1P+xwl1Dt3KOAc/ATySnmac4UqyCL0ssrsLS1sPMYA==", + "dev": true, + "dependencies": { + "@chakra-ui/shared-utils": "2.0.5", + "@chakra-ui/styled-system": "2.7.0", + "@chakra-ui/theme": "3.0.0", + "lodash.mergewith": "4.6.2" + } + }, + "node_modules/@chakra-ui/toast": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@chakra-ui/toast/-/toast-6.1.0.tgz", + "integrity": "sha512-5URA7nDsZ5jKPCPn7jf+d01sHenDf6JcDXXrHKqSSJDB051TS36/rVwH6maBbt9M3JYzAIrjyrtLpbwH9+OI2Q==", + "dev": true, + "dependencies": { + "@chakra-ui/alert": "2.0.18", + "@chakra-ui/close-button": "2.0.17", + "@chakra-ui/portal": "2.0.16", + "@chakra-ui/react-context": "2.0.8", + "@chakra-ui/react-use-timeout": "2.0.5", + "@chakra-ui/react-use-update-effect": "2.0.7", + "@chakra-ui/shared-utils": "2.0.5", + "@chakra-ui/styled-system": "2.7.0", + "@chakra-ui/theme": "3.0.0" + }, + "peerDependencies": { + "@chakra-ui/system": "2.5.4", + "framer-motion": ">=4.0.0", + "react": ">=18", + "react-dom": ">=18" + } + }, + "node_modules/@chakra-ui/tooltip": { + "version": "2.2.7", + "resolved": "https://registry.npmjs.org/@chakra-ui/tooltip/-/tooltip-2.2.7.tgz", + "integrity": "sha512-ImUJ6NnVqARaYqpgtO+kzucDRmxo8AF3jMjARw0bx2LxUkKwgRCOEaaRK5p5dHc0Kr6t5/XqjDeUNa19/sLauA==", + "dev": true, + "dependencies": { + "@chakra-ui/popper": "3.0.13", + "@chakra-ui/portal": "2.0.16", + "@chakra-ui/react-types": "2.0.7", + "@chakra-ui/react-use-disclosure": "2.0.8", + "@chakra-ui/react-use-event-listener": "2.0.7", + "@chakra-ui/react-use-merge-refs": "2.0.7", + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "framer-motion": ">=4.0.0", + "react": ">=18", + "react-dom": ">=18" + } + }, + "node_modules/@chakra-ui/transition": { + "version": "2.0.15", + "resolved": "https://registry.npmjs.org/@chakra-ui/transition/-/transition-2.0.15.tgz", + "integrity": "sha512-o9LBK/llQfUDHF/Ty3cQ6nShpekKTqHUoJlUOzNKhoTsNpoRerr9v0jwojrX1YI02KtVjfhFU6PiqXlDfREoNw==", + "dev": true, + "dependencies": { + "@chakra-ui/shared-utils": "2.0.5" + }, + "peerDependencies": { + "framer-motion": ">=4.0.0", + "react": ">=18" + } + }, + "node_modules/@chakra-ui/utils": { + "version": "2.0.15", + "resolved": "https://registry.npmjs.org/@chakra-ui/utils/-/utils-2.0.15.tgz", + "integrity": "sha512-El4+jL0WSaYYs+rJbuYFDbjmfCcfGDmRY95GO4xwzit6YAPZBLcR65rOEwLps+XWluZTy1xdMrusg/hW0c1aAA==", + "dev": true, + "dependencies": { + "@types/lodash.mergewith": "4.6.7", + "css-box-model": "1.2.1", + "framesync": "6.1.2", + "lodash.mergewith": "4.6.2" + } + }, + "node_modules/@chakra-ui/visually-hidden": { + "version": "2.0.15", + "resolved": "https://registry.npmjs.org/@chakra-ui/visually-hidden/-/visually-hidden-2.0.15.tgz", + "integrity": "sha512-WWULIiucYRBIewHKFA7BssQ2ABLHLVd9lrUo3N3SZgR0u4ZRDDVEUNOy+r+9ruDze8+36dGbN9wsN1IdELtdOw==", + "dev": true, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, + "node_modules/@emotion/babel-plugin": { + "version": "11.10.6", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz", + "integrity": "sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/serialize": "^1.1.1", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.1.3" + } + }, + "node_modules/@emotion/cache": { + "version": "11.10.5", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz", + "integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==", + "dev": true, + "peer": true, + "dependencies": { + "@emotion/memoize": "^0.8.0", + "@emotion/sheet": "^1.2.1", + "@emotion/utils": "^1.2.0", + "@emotion/weak-memoize": "^0.3.0", + "stylis": "4.1.3" + } + }, + "node_modules/@emotion/hash": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz", + "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==", + "dev": true, + "peer": true + }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", + "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==", + "dev": true, + "peer": true, + "dependencies": { + "@emotion/memoize": "^0.8.0" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==", + "dev": true, + "peer": true + }, + "node_modules/@emotion/react": { + "version": "11.10.6", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.6.tgz", + "integrity": "sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.10.6", + "@emotion/cache": "^11.10.5", + "@emotion/serialize": "^1.1.1", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", + "@emotion/utils": "^1.2.0", + "@emotion/weak-memoize": "^0.3.0", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz", + "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==", + "dev": true, + "peer": true, + "dependencies": { + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/unitless": "^0.8.0", + "@emotion/utils": "^1.2.0", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/sheet": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz", + "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==", + "dev": true, + "peer": true + }, + "node_modules/@emotion/styled": { + "version": "11.10.6", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.6.tgz", + "integrity": "sha512-OXtBzOmDSJo5Q0AFemHCfl+bUueT8BIcPSxu0EGTpGk6DmI5dnhSzQANm1e1ze0YZL7TDyAyy6s/b/zmGOS3Og==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.10.6", + "@emotion/is-prop-valid": "^1.2.0", + "@emotion/serialize": "^1.1.1", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", + "@emotion/utils": "^1.2.0" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0-rc.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/unitless": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", + "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==", + "dev": true, + "peer": true + }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz", + "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==", + "dev": true, + "peer": true, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@emotion/utils": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz", + "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==", + "dev": true, + "peer": true + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz", + "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==", + "dev": true, + "peer": true + }, + "node_modules/@esbuild/android-arm": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.14.tgz", + "integrity": "sha512-0CnlwnjDU8cks0yJLXfkaU/uoLyRf9VZJs4p1PskBr2AlAHeEsFEwJEo0of/Z3g+ilw5mpyDwThlxzNEIxOE4g==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.14.tgz", + "integrity": "sha512-eLOpPO1RvtsP71afiFTvS7tVFShJBCT0txiv/xjFBo5a7R7Gjw7X0IgIaFoLKhqXYAXhahoXm7qAmRXhY4guJg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.14.tgz", + "integrity": "sha512-nrfQYWBfLGfSGLvRVlt6xi63B5IbfHm3tZCdu/82zuFPQ7zez4XjmRtF/wIRYbJQ/DsZrxJdEvYFE67avYXyng==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.14.tgz", + "integrity": "sha512-eoSjEuDsU1ROwgBH/c+fZzuSyJUVXQTOIN9xuLs9dE/9HbV/A5IqdXHU1p2OfIMwBwOYJ9SFVGGldxeRCUJFyw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.14.tgz", + "integrity": "sha512-zN0U8RWfrDttdFNkHqFYZtOH8hdi22z0pFm0aIJPsNC4QQZv7je8DWCX5iA4Zx6tRhS0CCc0XC2m7wKsbWEo5g==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.14.tgz", + "integrity": "sha512-z0VcD4ibeZWVQCW1O7szaLxGsx54gcCnajEJMdYoYjLiq4g1jrP2lMq6pk71dbS5+7op/L2Aod+erw+EUr28/A==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.14.tgz", + "integrity": "sha512-hd9mPcxfTgJlolrPlcXkQk9BMwNBvNBsVaUe5eNUqXut6weDQH8whcNaKNF2RO8NbpT6GY8rHOK2A9y++s+ehw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.14.tgz", + "integrity": "sha512-BNTl+wSJ1omsH8s3TkQmIIIQHwvwJrU9u1ggb9XU2KTVM4TmthRIVyxSp2qxROJHhZuW/r8fht46/QE8hU8Qvg==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.14.tgz", + "integrity": "sha512-FhAMNYOq3Iblcj9i+K0l1Fp/MHt+zBeRu/Qkf0LtrcFu3T45jcwB6A1iMsemQ42vR3GBhjNZJZTaCe3VFPbn9g==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.14.tgz", + "integrity": "sha512-91OK/lQ5y2v7AsmnFT+0EyxdPTNhov3y2CWMdizyMfxSxRqHazXdzgBKtlmkU2KYIc+9ZK3Vwp2KyXogEATYxQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.14.tgz", + "integrity": "sha512-vp15H+5NR6hubNgMluqqKza85HcGJgq7t6rMH7O3Y6ApiOWPkvW2AJfNojUQimfTp6OUrACUXfR4hmpcENXoMQ==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.14.tgz", + "integrity": "sha512-90TOdFV7N+fgi6c2+GO9ochEkmm9kBAKnuD5e08GQMgMINOdOFHuYLPQ91RYVrnWwQ5683sJKuLi9l4SsbJ7Hg==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.14.tgz", + "integrity": "sha512-NnBGeoqKkTugpBOBZZoktQQ1Yqb7aHKmHxsw43NddPB2YWLAlpb7THZIzsRsTr0Xw3nqiPxbA1H31ZMOG+VVPQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.14.tgz", + "integrity": "sha512-0qdlKScLXA8MGVy21JUKvMzCYWovctuP8KKqhtE5A6IVPq4onxXhSuhwDd2g5sRCzNDlDjitc5sX31BzDoL5Fw==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.14.tgz", + "integrity": "sha512-Hdm2Jo1yaaOro4v3+6/zJk6ygCqIZuSDJHdHaf8nVH/tfOuoEX5Riv03Ka15LmQBYJObUTNS1UdyoMk0WUn9Ww==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.14.tgz", + "integrity": "sha512-8KHF17OstlK4DuzeF/KmSgzrTWQrkWj5boluiiq7kvJCiQVzUrmSkaBvcLB2UgHpKENO2i6BthPkmUhNDaJsVw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.14.tgz", + "integrity": "sha512-nVwpqvb3yyXztxIT2+VsxJhB5GCgzPdk1n0HHSnchRAcxqKO6ghXwHhJnr0j/B+5FSyEqSxF4q03rbA2fKXtUQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.14.tgz", + "integrity": "sha512-1RZ7uQQ9zcy/GSAJL1xPdN7NDdOOtNEGiJalg/MOzeakZeTrgH/DoCkbq7TaPDiPhWqnDF+4bnydxRqQD7il6g==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.14.tgz", + "integrity": "sha512-nqMjDsFwv7vp7msrwWRysnM38Sd44PKmW8EzV01YzDBTcTWUpczQg6mGao9VLicXSgW/iookNK6AxeogNVNDZA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.14.tgz", + "integrity": "sha512-xrD0mccTKRBBIotrITV7WVQAwNJ5+1va6L0H9zN92v2yEdjfAN7864cUaZwJS7JPEs53bDTzKFbfqVlG2HhyKQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.14.tgz", + "integrity": "sha512-nXpkz9bbJrLLyUTYtRotSS3t5b+FOuljg8LgLdINWFs3FfqZMtbnBCZFUmBzQPyxqU87F8Av+3Nco/M3hEcu1w==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.14.tgz", + "integrity": "sha512-gPQmsi2DKTaEgG14hc3CHXHp62k8g6qr0Pas+I4lUxRMugGSATh/Bi8Dgusoz9IQ0IfdrvLpco6kujEIBoaogA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@hookform/resolvers": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.0.0.tgz", + "integrity": "sha512-SQPefakODpyq25b/phHXDKCdRrEfPcCXV7B4nAa139wE1DxufYbbNAjeo0T04ZXBokRxZ+wD8iA1kkVMa3QwjQ==", + "dev": true, + "peerDependencies": { + "react-hook-form": "^7.0.0" + } + }, + "node_modules/@popperjs/core": { + "version": "2.11.7", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", + "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/@rollup/plugin-typescript": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-11.0.0.tgz", + "integrity": "sha512-goPyCWBiimk1iJgSTgsehFD5OOFHiAknrRJjqFCudcW8JtWiBlK284Xnn4flqMqg6YAjVG/EE+3aVzrL5qNSzQ==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^5.0.1", + "resolve": "^1.22.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^2.14.0||^3.0.0", + "tslib": "*", + "typescript": ">=3.7.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + }, + "tslib": { + "optional": true + } + } + }, + "node_modules/@rollup/pluginutils": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz", + "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==", + "dev": true, + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@swc/core": { + "version": "1.3.42", + "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.42.tgz", + "integrity": "sha512-nVFUd5+7tGniM2cT3LXaqnu3735Cu4az8A9gAKK+8sdpASI52SWuqfDBmjFCK9xG90MiVDVp2PTZr0BWqCIzpw==", + "dev": true, + "hasInstallScript": true, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/swc" + }, + "optionalDependencies": { + "@swc/core-darwin-arm64": "1.3.42", + "@swc/core-darwin-x64": "1.3.42", + "@swc/core-linux-arm-gnueabihf": "1.3.42", + "@swc/core-linux-arm64-gnu": "1.3.42", + "@swc/core-linux-arm64-musl": "1.3.42", + "@swc/core-linux-x64-gnu": "1.3.42", + "@swc/core-linux-x64-musl": "1.3.42", + "@swc/core-win32-arm64-msvc": "1.3.42", + "@swc/core-win32-ia32-msvc": "1.3.42", + "@swc/core-win32-x64-msvc": "1.3.42" + } + }, + "node_modules/@swc/core-darwin-arm64": { + "version": "1.3.42", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.42.tgz", + "integrity": "sha512-hM6RrZFyoCM9mX3cj/zM5oXwhAqjUdOCLXJx7KTQps7NIkv/Qjvobgvyf2gAb89j3ARNo9NdIoLjTjJ6oALtiA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-darwin-x64": { + "version": "1.3.42", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.42.tgz", + "integrity": "sha512-bjsWtHMb6wJK1+RGlBs2USvgZ0txlMk11y0qBLKo32gLKTqzUwRw0Fmfzuf6Ue2a/w//7eqMlPFEre4LvJajGw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm-gnueabihf": { + "version": "1.3.42", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.42.tgz", + "integrity": "sha512-Oe0ggMz3MyqXNfeVmY+bBTL0hFSNY3bx8dhcqsh4vXk/ZVGse94QoC4dd92LuPHmKT0x6nsUzB86x2jU9QHW5g==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm64-gnu": { + "version": "1.3.42", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.42.tgz", + "integrity": "sha512-ZJsa8NIW1RLmmHGTJCbM7OPSbBZ9rOMrLqDtUOGrT0uoJXZnnQqolflamB5wviW0X6h3Z3/PSTNGNDCJ3u3Lqg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm64-musl": { + "version": "1.3.42", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.42.tgz", + "integrity": "sha512-YpZwlFAfOp5vkm/uVUJX1O7N3yJDO1fDQRWqsOPPNyIJkI2ydlRQtgN6ZylC159Qv+TimfXnGTlNr7o3iBAqjg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-x64-gnu": { + "version": "1.3.42", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.42.tgz", + "integrity": "sha512-0ccpKnsZbyHBzaQFdP8U9i29nvOfKitm6oJfdJzlqsY/jCqwvD8kv2CAKSK8WhJz//ExI2LqNrDI0yazx5j7+A==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-x64-musl": { + "version": "1.3.42", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.42.tgz", + "integrity": "sha512-7eckRRuTZ6+3K21uyfXXgc2ZCg0mSWRRNwNT3wap2bYkKPeqTgb8pm8xYSZNEiMuDonHEat6XCCV36lFY6kOdQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-arm64-msvc": { + "version": "1.3.42", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.42.tgz", + "integrity": "sha512-t27dJkdw0GWANdN4TV0lY/V5vTYSx5SRjyzzZolep358ueCGuN1XFf1R0JcCbd1ojosnkQg2L7A7991UjXingg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-ia32-msvc": { + "version": "1.3.42", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.42.tgz", + "integrity": "sha512-xfpc/Zt/aMILX4IX0e3loZaFyrae37u3MJCv1gJxgqrpeLi7efIQr3AmERkTK3mxTO6R5urSliWw2W3FyZ7D3Q==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-x64-msvc": { + "version": "1.3.42", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.42.tgz", + "integrity": "sha512-ra2K4Tu++EJLPhzZ6L8hWUsk94TdK/2UKhL9dzCBhtzKUixsGCEqhtqH1zISXNvW8qaVLFIMUP37ULe80/IJaA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@types/estree": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz", + "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==", + "dev": true + }, + "node_modules/@types/lodash": { + "version": "4.14.192", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.192.tgz", + "integrity": "sha512-km+Vyn3BYm5ytMO13k9KTp27O75rbQ0NFw+U//g+PX7VZyjCioXaRFisqSIJRECljcTv73G3i6BpglNGHgUQ5A==", + "dev": true + }, + "node_modules/@types/lodash.mergewith": { + "version": "4.6.7", + "resolved": "https://registry.npmjs.org/@types/lodash.mergewith/-/lodash.mergewith-4.6.7.tgz", + "integrity": "sha512-3m+lkO5CLRRYU0fhGRp7zbsGi6+BZj0uTVSwvcKU+nSlhjA9/QRNfuSGnD2mX6hQA7ZbmcCkzk5h4ZYGOtk14A==", + "dev": true, + "dependencies": { + "@types/lodash": "*" + } + }, + "node_modules/@types/node": { + "version": "18.15.10", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.10.tgz", + "integrity": "sha512-9avDaQJczATcXgfmMAW3MIWArOO7A+m90vuCFLr8AotWf8igO/mRoYukrk2cqZVtv38tHs33retzHEilM7FpeQ==", + "dev": true + }, + "node_modules/@types/parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", + "dev": true, + "peer": true + }, + "node_modules/@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "dev": true + }, + "node_modules/@types/react": { + "version": "18.0.30", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.30.tgz", + "integrity": "sha512-AnME2cHDH11Pxt/yYX6r0w448BfTwQOLEhQEjCdwB7QskEI7EKtxhGUsExTQe/MsY3D9D5rMtu62WRocw9A8FA==", + "dev": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-dom": { + "version": "18.0.11", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.11.tgz", + "integrity": "sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.3", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==", + "dev": true + }, + "node_modules/@vitejs/plugin-react-swc": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.2.0.tgz", + "integrity": "sha512-IcBoXL/mcH7JdQr/nfDlDwTdIaH8Rg7LpfQDF4nAht+juHWIuv6WhpKPCSfY4+zztAaB07qdBoFz1XCZsgo3pQ==", + "dev": true, + "dependencies": { + "@swc/core": "^1.3.35" + }, + "peerDependencies": { + "vite": "^4" + } + }, + "node_modules/@zag-js/element-size": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@zag-js/element-size/-/element-size-0.3.2.tgz", + "integrity": "sha512-bVvvigUGvAuj7PCkE5AbzvTJDTw5f3bg9nQdv+ErhVN8SfPPppLJEmmWdxqsRzrHXgx8ypJt/+Ty0kjtISVDsQ==", + "dev": true + }, + "node_modules/@zag-js/focus-visible": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@zag-js/focus-visible/-/focus-visible-0.2.2.tgz", + "integrity": "sha512-0j2gZq8HiZ51z4zNnSkF1iSkqlwRDvdH+son3wHdoz+7IUdMN/5Exd4TxMJ+gq2Of1DiXReYLL9qqh2PdQ4wgA==", + "dev": true + }, + "node_modules/ansi-sequence-parser": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.0.tgz", + "integrity": "sha512-lEm8mt52to2fT8GhciPCGeCXACSz2UwIN4X2e2LJSnZ5uAbn2/dsYdOmUXq0AtWS5cpAupysIneExOgH0Vd2TQ==", + "dev": true + }, + "node_modules/ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "peer": true, + "dependencies": { + "color-convert": "^1.9.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/aria-hidden": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz", + "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==", + "dev": true, + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true + }, + "node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "peer": true, + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/chalk/node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true, + "peer": true, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "peer": true, + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "dev": true, + "peer": true + }, + "node_modules/color2k": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/color2k/-/color2k-2.0.2.tgz", + "integrity": "sha512-kJhwH5nAwb34tmyuqq/lgjEKzlFXn1U99NlnB6Ws4qVaERcRUYeYP1cBw6BJ4vxaWStAUEef4WMr7WjOCnBt8w==", + "dev": true + }, + "node_modules/compute-scroll-into-view": { + "version": "1.0.20", + "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz", + "integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==", + "dev": true + }, + "node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", + "dev": true, + "peer": true + }, + "node_modules/copy-to-clipboard": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz", + "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==", + "dev": true, + "dependencies": { + "toggle-selection": "^1.0.6" + } + }, + "node_modules/cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "dev": true, + "peer": true, + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/css-box-model": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz", + "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==", + "dev": true, + "dependencies": { + "tiny-invariant": "^1.0.6" + } + }, + "node_modules/csstype": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==", + "dev": true + }, + "node_modules/detect-node-es": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", + "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==", + "dev": true + }, + "node_modules/error-ex": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "dev": true, + "peer": true, + "dependencies": { + "is-arrayish": "^0.2.1" + } + }, + "node_modules/esbuild": { + "version": "0.17.14", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.14.tgz", + "integrity": "sha512-vOO5XhmVj/1XQR9NQ1UPq6qvMYL7QFJU57J5fKBKBKxp17uDt5PgxFDb4A2nEiXhr1qQs4x0F5+66hVVw4ruNw==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/android-arm": "0.17.14", + "@esbuild/android-arm64": "0.17.14", + "@esbuild/android-x64": "0.17.14", + "@esbuild/darwin-arm64": "0.17.14", + "@esbuild/darwin-x64": "0.17.14", + "@esbuild/freebsd-arm64": "0.17.14", + "@esbuild/freebsd-x64": "0.17.14", + "@esbuild/linux-arm": "0.17.14", + "@esbuild/linux-arm64": "0.17.14", + "@esbuild/linux-ia32": "0.17.14", + "@esbuild/linux-loong64": "0.17.14", + "@esbuild/linux-mips64el": "0.17.14", + "@esbuild/linux-ppc64": "0.17.14", + "@esbuild/linux-riscv64": "0.17.14", + "@esbuild/linux-s390x": "0.17.14", + "@esbuild/linux-x64": "0.17.14", + "@esbuild/netbsd-x64": "0.17.14", + "@esbuild/openbsd-x64": "0.17.14", + "@esbuild/sunos-x64": "0.17.14", + "@esbuild/win32-arm64": "0.17.14", + "@esbuild/win32-ia32": "0.17.14", + "@esbuild/win32-x64": "0.17.14" + } + }, + "node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true, + "peer": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", + "dev": true, + "peer": true + }, + "node_modules/focus-lock": { + "version": "0.11.6", + "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.11.6.tgz", + "integrity": "sha512-KSuV3ur4gf2KqMNoZx3nXNVhqCkn42GuTYCX4tXPEwf0MjpFQmNMiN6m7dXaUXgIoivL6/65agoUMg4RLS0Vbg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/framer-motion": { + "version": "10.9.1", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.9.1.tgz", + "integrity": "sha512-fuCDRGKOu5n9gN2/R7O22mE+BHMGK5D57S3Oq8n2ITd4aYR7D22QM5I4VPD3CWahNt/lyDUs20u9Aw+6ah9oAQ==", + "dev": true, + "peer": true, + "dependencies": { + "tslib": "^2.4.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, + "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/framer-motion/node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "dev": true, + "optional": true, + "peer": true + }, + "node_modules/framesync": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.1.2.tgz", + "integrity": "sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==", + "dev": true, + "dependencies": { + "tslib": "2.4.0" + } + }, + "node_modules/framesync/node_modules/tslib": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==", + "dev": true + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", + "dev": true + }, + "node_modules/get-nonce": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz", + "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/has": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", + "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dev": true, + "dependencies": { + "function-bind": "^1.1.1" + }, + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true, + "peer": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dev": true, + "peer": true, + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dev": true, + "peer": true, + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dev": true, + "dependencies": { + "loose-envify": "^1.0.0" + } + }, + "node_modules/is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", + "dev": true, + "peer": true + }, + "node_modules/is-core-module": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz", + "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==", + "dev": true, + "dependencies": { + "has": "^1.0.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "node_modules/json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true, + "peer": true + }, + "node_modules/jsonc-parser": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz", + "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==", + "dev": true + }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "dev": true, + "peer": true + }, + "node_modules/lodash.mergewith": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz", + "integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==", + "dev": true + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/lunr": { + "version": "2.3.9", + "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz", + "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==", + "dev": true + }, + "node_modules/marked": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz", + "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==", + "dev": true, + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 12" + } + }, + "node_modules/minimatch": { + "version": "7.4.3", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-7.4.3.tgz", + "integrity": "sha512-5UB4yYusDtkRPbRiy1cqZ1IpGNcJCGlEMG17RKzPddpyiPKoCdwohbED8g4QXT0ewCt8LTkQXuljsUfQ3FKM4A==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/nanoid": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, + "peer": true, + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true + }, + "node_modules/path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "dev": true, + "peer": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/postcss": { + "version": "8.4.21", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", + "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + } + ], + "dependencies": { + "nanoid": "^3.3.4", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dev": true, + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/property-expr": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz", + "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==", + "dev": true + }, + "node_modules/react": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-clientside-effect": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz", + "integrity": "sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.12.13" + }, + "peerDependencies": { + "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/react-dom": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "dev": true, + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.0" + }, + "peerDependencies": { + "react": "^18.2.0" + } + }, + "node_modules/react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==", + "dev": true + }, + "node_modules/react-focus-lock": { + "version": "2.9.4", + "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.9.4.tgz", + "integrity": "sha512-7pEdXyMseqm3kVjhdVH18sovparAzLg5h6WvIx7/Ck3ekjhrrDMEegHSa3swwC8wgfdd7DIdUVRGeiHT9/7Sgg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.0.0", + "focus-lock": "^0.11.6", + "prop-types": "^15.6.2", + "react-clientside-effect": "^1.2.6", + "use-callback-ref": "^1.3.0", + "use-sidecar": "^1.1.2" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-hook-form": { + "version": "7.43.8", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.8.tgz", + "integrity": "sha512-BQm+Ge5KjTk1EchDBRhdP8Pkb7MArO2jFF+UWYr3rtvh6197khi22uloLqlWeuY02ItlCzPunPsFt1/q9wQKnw==", + "peer": true, + "engines": { + "node": ">=12.22.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-hook-form" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18" + } + }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "dev": true + }, + "node_modules/react-remove-scroll": { + "version": "2.5.5", + "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz", + "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==", + "dev": true, + "dependencies": { + "react-remove-scroll-bar": "^2.3.3", + "react-style-singleton": "^2.2.1", + "tslib": "^2.1.0", + "use-callback-ref": "^1.3.0", + "use-sidecar": "^1.1.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-remove-scroll-bar": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz", + "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==", + "dev": true, + "dependencies": { + "react-style-singleton": "^2.2.1", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-style-singleton": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", + "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==", + "dev": true, + "dependencies": { + "get-nonce": "^1.0.0", + "invariant": "^2.2.4", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/regenerator-runtime": { + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==", + "dev": true + }, + "node_modules/resolve": { + "version": "1.22.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", + "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==", + "dev": true, + "dependencies": { + "is-core-module": "^2.9.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, + "peer": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/rollup": { + "version": "3.20.2", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.2.tgz", + "integrity": "sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==", + "dev": true, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=14.18.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/scheduler": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "dev": true, + "dependencies": { + "loose-envify": "^1.1.0" + } + }, + "node_modules/shiki": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.1.tgz", + "integrity": "sha512-+Jz4nBkCBe0mEDqo1eKRcCdjRtrCjozmcbTUjbPTX7OOJfEbTZzlUWlZtGe3Gb5oV1/jnojhG//YZc3rs9zSEw==", + "dev": true, + "dependencies": { + "ansi-sequence-parser": "^1.1.0", + "jsonc-parser": "^3.2.0", + "vscode-oniguruma": "^1.7.0", + "vscode-textmate": "^8.0.0" + } + }, + "node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "dev": true, + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/stylis": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz", + "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==", + "dev": true, + "peer": true + }, + "node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "peer": true, + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/tiny-case": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz", + "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==", + "dev": true + }, + "node_modules/tiny-invariant": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz", + "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==", + "dev": true + }, + "node_modules/to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", + "dev": true, + "peer": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/toggle-selection": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", + "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==", + "dev": true + }, + "node_modules/toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==", + "dev": true + }, + "node_modules/tslib": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", + "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==", + "dev": true + }, + "node_modules/type-fest": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", + "dev": true, + "engines": { + "node": ">=12.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/typedoc": { + "version": "0.23.28", + "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.23.28.tgz", + "integrity": "sha512-9x1+hZWTHEQcGoP7qFmlo4unUoVJLB0H/8vfO/7wqTnZxg4kPuji9y3uRzEu0ZKez63OJAUmiGhUrtukC6Uj3w==", + "dev": true, + "dependencies": { + "lunr": "^2.3.9", + "marked": "^4.2.12", + "minimatch": "^7.1.3", + "shiki": "^0.14.1" + }, + "bin": { + "typedoc": "bin/typedoc" + }, + "engines": { + "node": ">= 14.14" + }, + "peerDependencies": { + "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x" + } + }, + "node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, + "node_modules/use-callback-ref": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz", + "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==", + "dev": true, + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/use-sidecar": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", + "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==", + "dev": true, + "dependencies": { + "detect-node-es": "^1.1.0", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/vite": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.2.1.tgz", + "integrity": "sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==", + "dev": true, + "dependencies": { + "esbuild": "^0.17.5", + "postcss": "^8.4.21", + "resolve": "^1.22.1", + "rollup": "^3.18.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + }, + "peerDependencies": { + "@types/node": ">= 14", + "less": "*", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + }, + "node_modules/vscode-oniguruma": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz", + "integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==", + "dev": true + }, + "node_modules/vscode-textmate": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz", + "integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==", + "dev": true + }, + "node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "dev": true, + "peer": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/yup": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/yup/-/yup-1.0.2.tgz", + "integrity": "sha512-Lpi8nITFKjWtCoK3yQP8MUk78LJmHWqbFd0OOMXTar+yjejlQ4OIIoZgnTW1bnEUKDw6dZBcy3/IdXnt2KDUow==", + "dev": true, + "dependencies": { + "property-expr": "^2.0.5", + "tiny-case": "^1.0.3", + "toposort": "^2.0.2", + "type-fest": "^2.19.0" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..f703199 --- /dev/null +++ b/package.json @@ -0,0 +1,61 @@ +{ + "name": "react-hook-form-chakra", + "description": "chakra ui bindings for react-hook-form", + "author": "Crhistian Ramirez", + "version": "1.0.0-alpha.1", + "license": "MIT", + "type": "module", + "main": "dist/index.cjs", + "module": "dist/index.js", + "exports": { + ".": { + "import": "./dist/index.js", + "require": "./dist/index.cjs" + } + }, + "types": "dist/index.d.ts", + "files": [ + "dist/" + ], + "keywords": [ + "chakra", + "chakra-ui", + "react-hook-form", + "bindings", + "react", + "form validation" + ], + "repository": { + "type": "git", + "url": "https://github.com/crhistianramirez/react-hook-form-chakra" + }, + "bugs": "https://github.com/crhistianramirez/react-hook-form-chakra/issues", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview", + "docs": "typedoc --tsconfig tsconfig.lib.json" + }, + "devDependencies": { + "@chakra-ui/icons": "^2.0.17", + "@chakra-ui/react": "^2.5.4", + "@hookform/resolvers": "^3.0.0", + "@rollup/plugin-typescript": "^11.0.0", + "@types/node": "^18.15.10", + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", + "@vitejs/plugin-react-swc": "^3.0.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "tslib": "^2.5.0", + "typedoc": "^0.23.28", + "typescript": "^4.9.3", + "vite": "^4.2.0", + "yup": "^1.0.2" + }, + "peerDependencies": { + "@chakra-ui/react": "^2", + "react": ">=17", + "react-hook-form": "^7" + } +} diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..6c6f5c8 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,22 @@ +import { ChakraProvider, Tabs, TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/react"; +import FormWithoutProvider from "./FormWithoutProvider"; +import FormWithProvider from "./FormWithProvider"; + +export const App = () => { + return + + + Demo with FormProvider + Demo without FormProvider + + + + + + + + + + + +} \ No newline at end of file diff --git a/src/FormWithProvider.tsx b/src/FormWithProvider.tsx new file mode 100644 index 0000000..d4b56e4 --- /dev/null +++ b/src/FormWithProvider.tsx @@ -0,0 +1,161 @@ +import { Box, ButtonGroup, Radio, Heading, VStack, Stack, InputLeftElement, Text } from "@chakra-ui/react"; +import { + CheckboxContainer, + CheckboxControl, + CheckboxSingleControl, + InputControl, + NumberInputControl, + PinInputControl, + RadioGroupControl, + ResetButton, + SelectControl, + SliderControl, + SubmitButton, + SwitchControl, + TextareaControl +} from "./components"; +import { PhoneIcon } from '@chakra-ui/icons' +import * as Yup from "yup"; +import { FormProvider, useForm, useWatch } from 'react-hook-form'; +import { yupResolver } from "@hookform/resolvers/yup" + +const defaultValues = { + firstName: "", + lastName: "", + age: 0, + phoneNumber: "", + confirmationPin: "", + website: "", + willingToRelocate: true, + favoriteColor: "", + preferredShift: ["afternoons"], + additionalNotes: "", + previousExperience: false, + callbackTime: "", + excitementScale: 5, + password: "" +}; + +// We're using yup validation for this demo but you can choose any other react hook form supported validation provider +const validationSchema = Yup.object({ + firstName: Yup.string().required("First Name is required"), + lastName: Yup.string().required("Last Name is required"), + age: Yup.number().required("Age is required").min(18, "Applicant must be at least 18 years old").typeError("Please enter a number"), + phoneNumber: Yup.string(), + confirmationPin: Yup.string(), + website: Yup.string(), + willingToRelocate: Yup.boolean().equals([true], "Applicant must be able to relocate"), + favoriteColor: Yup.string(), + preferredShift: Yup.array().min(2, "Please select at least 2 shifts"), + additionalNotes: Yup.string().required(), + previousExperience: Yup.boolean(), + callbackTime: Yup.string().required("Please select a callback time"), + excitementScale: Yup.number(), + password: Yup.string() +}); + +const Form = () => { + const methods = useForm({ resolver: yupResolver(validationSchema), defaultValues, mode: "onBlur" }); + const values = useWatch({ control: methods.control }) + const onSubmit = (data: any) => console.log(data); + return ( + + + + With FormProvider + + + + + + + } + /> + } + /> + + + + + + Willing to relocate? + + + + + + Mornings (8am to 12pm) + + + Afternoons (12pm to 4pm) + + + Evenings (4pm to 8pm) + + + Weekends (Saturday/Sunday 8am to 12pm) + + + + Red + Green + Blue + + + + + + + + + + + + Submit + Reset + + + + + Values: + + {JSON.stringify(values, null, 2)} + + + + Errors: + + {JSON.stringify(methods.formState.errors, null, 2)} + + + + Touched: + + {JSON.stringify(methods.formState.touchedFields, null, 2)} + + + + + + ); +}; + +export default Form; diff --git a/src/FormWithoutProvider.tsx b/src/FormWithoutProvider.tsx new file mode 100644 index 0000000..8eaf1db --- /dev/null +++ b/src/FormWithoutProvider.tsx @@ -0,0 +1,160 @@ +import { Box, ButtonGroup, Radio, Heading, VStack, Stack, InputLeftElement, Text } from "@chakra-ui/react"; +import { + CheckboxContainer, + CheckboxControl, + CheckboxSingleControl, + InputControl, + NumberInputControl, + PinInputControl, + RadioGroupControl, + ResetButton, + SelectControl, + SliderControl, + SubmitButton, + SwitchControl, + TextareaControl +} from "./components"; +import { PhoneIcon } from '@chakra-ui/icons' +import * as Yup from "yup"; +import { useForm, useWatch } from 'react-hook-form'; +import { yupResolver } from "@hookform/resolvers/yup" + +const defaultValues = { + firstName: "", + lastName: "", + age: 0, + phoneNumber: "", + confirmationPin: "", + website: "", + willingToRelocate: true, + favoriteColor: "", + preferredShift: ["afternoons"], + additionalNotes: "", + previousExperience: false, + callbackTime: "", + excitementScale: 5, + password: "" +}; + +// We're using yup validation for this demo but you can choose any other react hook form supported validation provider +const validationSchema = Yup.object({ + firstName: Yup.string().required("First Name is required"), + lastName: Yup.string().required("Last Name is required"), + age: Yup.number().required("Age is required").min(18, "Applicant must be at least 18 years old").typeError("Please enter a number"), + phoneNumber: Yup.string(), + confirmationPin: Yup.string(), + website: Yup.string(), + willingToRelocate: Yup.boolean().equals([true], "Applicant must be able to relocate"), + favoriteColor: Yup.string(), + preferredShift: Yup.array().min(2, "Please select at least 2 shifts"), + additionalNotes: Yup.string().required(), + previousExperience: Yup.boolean(), + callbackTime: Yup.string().required("Please select a callback time"), + excitementScale: Yup.number(), + password: Yup.string() +}); + +const Form = () => { + const { handleSubmit, control, formState, reset } = useForm({ resolver: yupResolver(validationSchema), defaultValues, mode: "onBlur" }); + const values = useWatch({ control }) + const onSubmit = (data: any) => console.log(data); + return ( + + + With FormProvider + + + + + + + } + /> + } + /> + + + + + + Willing to relocate? + + {/* */} + + + + Mornings (8am to 12pm) + + + Afternoons (12pm to 4pm) + + + Evenings (4pm to 8pm) + + + Weekends (Saturday/Sunday 8am to 12pm) + + + + Red + Green + Blue + + + + + + + + + + + + Submit + Reset + + + + + Values: + + {JSON.stringify(values, null, 2)} + + + + Errors: + + {JSON.stringify(formState.errors, null, 2)} + + + + Touched: + + {JSON.stringify(formState.touchedFields, null, 2)} + + + + + ); +}; + +export default Form; diff --git a/src/components/form-checkbox/checkbox-container.tsx b/src/components/form-checkbox/checkbox-container.tsx new file mode 100644 index 0000000..10ba366 --- /dev/null +++ b/src/components/form-checkbox/checkbox-container.tsx @@ -0,0 +1,47 @@ +import { Stack, StackProps as ChakraStackProps } from "@chakra-ui/react" +import { Children, cloneElement, FC, isValidElement, ReactNode, useState } from "react" +import { useController } from "react-hook-form" +import { BaseProps, FormControl } from "../form-control" + +/** + * This component wraps CheckboxControl to build groups of checkboxes. + * If you need a standalone checkbox please use CheckboxSingleControl + * @property stackProps Chakra StackProps + */ +export interface CheckboxContainerProps extends BaseProps { + /** + * Chakra StackProps + */ + stackProps?: ChakraStackProps + + /** + * The CheckboxControl components to be rendered in this stack (required) + */ + children: ReactNode +} + +export const CheckboxContainer: FC = (props: CheckboxContainerProps) => { + const { name, label, control, children, stackProps, ...rest } = props + const { field } = useController({ + control, + name + }); + const [value, setValue] = useState(field.value || []); + + const childrenWithProps = Children.map(children, child => { + if (isValidElement(child)) { + return cloneElement(child, { checkboxValue: value, setCheckboxValue: setValue, control } as any); + } + return child; + }); + + return ( + + + {childrenWithProps} + + + ) +} + +CheckboxContainer.displayName = "CheckboxContainer" diff --git a/src/components/form-checkbox/checkbox-control.tsx b/src/components/form-checkbox/checkbox-control.tsx new file mode 100644 index 0000000..c2e4779 --- /dev/null +++ b/src/components/form-checkbox/checkbox-control.tsx @@ -0,0 +1,81 @@ +import { Checkbox, CheckboxProps as ChakraCheckboxProps } from "@chakra-ui/react" +import { ChangeEvent, FC } from "react" +import { Control, get, useController } from "react-hook-form" + +export interface CheckboxControlProps extends ChakraCheckboxProps { + /** + * The name of the input (required) + */ + name: string + + /** + * The label to be associated with the input + */ + label?: string + + /** + * @internal this property is implicitly passed down from CheckboxContainer, not part of public API + */ + control?: Control + + + /** @internal this property is implicitly passed down from CheckboxContainer, not part of public API */ + checkboxValue?: any[] + + /** @internal this property is implicitly passed down from CheckboxContainer, not part of public API */ + setCheckboxValue?: (values: any[]) => void +} + + +export const CheckboxControl: FC = (props: CheckboxControlProps) => { + const { name, control, label, children, checkboxValue, setCheckboxValue, onChange, value, ...rest } = props + if (!setCheckboxValue) { + throw new Error('CheckboxControl must be wrapped by CheckboxContainer. If you need an individual checkbox please use CheckboxSingle') + } + const { + field, + fieldState: { isTouched }, + formState: { errors, isSubmitting } + } = useController({ name, control }) + const error = get(errors, name, "") + const isChecked = field.value instanceof Array ? field.value.includes(props.value) : false + const { value: fieldValue, onChange: onFieldChange, ...fieldRest } = field; + + // this custom on change function lets us create an array of items + // otherwise react hook forms default implementation is to set value to boolean + const handleOnChange = (event: ChangeEvent) => { + let valuesArray = checkboxValue ?? [] + + // update checkbox value] + if (event.target.checked) { + valuesArray = [...valuesArray, event.target.value] + } else { + valuesArray = valuesArray.filter(v => v !== event.target.value); + } + + // send data to react hook form + onFieldChange(valuesArray); + + // update local state + if (setCheckboxValue) { + setCheckboxValue(valuesArray); + } + } + + return ( + + {label} + {children} + + ) +} + +CheckboxControl.displayName = "CheckboxControl" \ No newline at end of file diff --git a/src/components/form-checkbox/checkbox-single.tsx b/src/components/form-checkbox/checkbox-single.tsx new file mode 100644 index 0000000..d85576c --- /dev/null +++ b/src/components/form-checkbox/checkbox-single.tsx @@ -0,0 +1,42 @@ +import { Checkbox, CheckboxProps as ChakraCheckboxProps } from "@chakra-ui/react" +import { FC, ReactNode } from "react" +import { useController, get } from "react-hook-form" +import { BaseProps, FormControl } from "../form-control" + +export interface CheckboxSingleProps extends BaseProps { + /** + * Chakra CheckboxProps + */ + checkBoxProps?: ChakraCheckboxProps + children?: ReactNode +} + +export const CheckboxSingleControl: FC = (props: CheckboxSingleProps) => { + const { name, control, label, children, checkBoxProps, ...rest } = props + const { + field, + fieldState: { isTouched }, + formState: { errors, isSubmitting } + } = useController({ name, control }) + const error = get(errors, name, "") + + const isChecked = field.value + + return ( + + + {label} + {children} + + + ) +} + +CheckboxSingleControl.displayName = "CheckboxSingleControl" diff --git a/src/components/form-checkbox/index.tsx b/src/components/form-checkbox/index.tsx new file mode 100644 index 0000000..ac205a6 --- /dev/null +++ b/src/components/form-checkbox/index.tsx @@ -0,0 +1,3 @@ +export * from "./checkbox-container" +export * from "./checkbox-control" +export * from "./checkbox-single" diff --git a/src/components/form-control/index.tsx b/src/components/form-control/index.tsx new file mode 100644 index 0000000..c4c51fb --- /dev/null +++ b/src/components/form-control/index.tsx @@ -0,0 +1,104 @@ +import { + FormControl as ChakraFormControl, + FormControlProps, + FormErrorMessage, + FormErrorMessageProps, + FormHelperText, + FormLabel, + FormLabelProps, + TextProps +} from "@chakra-ui/react" +import { FC, ReactNode } from "react" +import { Control, useController, get } from "react-hook-form" + +/** + * All of the properties from Chakra's FormControlProps except "label" which + * we are overriding to accept a ReactNode instead of a simple string + */ +export interface ChakraFormControlProps extends Omit { + +} + +/** + * Defines react-hook-form-chakra specific properties for all components + */ +export interface BaseReactHookFormProps { + /** + * The name of the input (required) + */ + name: string + + /** + * The control passed down from react-hook-form. + * Only required if not using FormProvider + */ + control?: Control + + /** + * The label to be associated with the input + */ + label?: ReactNode + + /** + * Chakra FormLabelProps + */ + labelProps?: FormLabelProps + + /** + * Helper text to show alongside input + */ + helperText?: ReactNode + + /** + * Chakra TextProps associated with the helper text + */ + helperTextProps?: TextProps + + /** + * Chakra FormErrorMessageProps for error message + */ + errorMessageProps?: FormErrorMessageProps +} + +/** + * The union of ChakraFormControlProps and BaseReactHookFormProps which defines the base properties + * for most of react-hook-form-chakra components + */ +export interface BaseProps extends ChakraFormControlProps, BaseReactHookFormProps { + +} + +export const FormControl: FC = (props: BaseProps) => { + const { children, name, control, label, labelProps, helperText, helperTextProps, errorMessageProps, ...rest } = props + + const { + fieldState: { isTouched }, + formState: { errors } + } = useController({ name, control }) + const error = get(errors, name, "") as any + + return ( + + {label && typeof label === "string" ? ( + + {label} + + ) : ( + label + )} + {children} + {error && ( + + {error.message} + + )} + {helperText && typeof helperText === "string" ? ( + {helperText} + ) : ( + helperText + )} + + ) +} + +export default FormControl diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 0000000..d3bee27 --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1,12 @@ +export * from "./form-checkbox" +export * from "./form-control" +export * from "./input-control" +export * from "./number-input-control" +export * from "./pin-input-control" +export * from "./radio-group-control" +export * from "./reset-button" +export * from "./select-control" +export * from "./slider-control" +export * from "./submit-button" +export * from "./switch-control" +export * from "./textarea-control" diff --git a/src/components/input-control/index.tsx b/src/components/input-control/index.tsx new file mode 100644 index 0000000..438779b --- /dev/null +++ b/src/components/input-control/index.tsx @@ -0,0 +1,61 @@ +import { Input, InputProps, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement } from "@chakra-ui/react" +import { FC, ReactNode } from "react" +import { useController } from "react-hook-form" +import { BaseProps, FormControl } from "../form-control" + +export interface InputControlProps extends BaseProps { + /** + * Chakra InputProps + */ + inputProps?: InputProps + + /** + * The Chakra InputLeftAddon + * https://chakra-ui.com/docs/components/input#left-and-right-addons + */ + leftAddon?: ReactNode + + /** + * The Chakra InputRightAddon + * https://chakra-ui.com/docs/components/input#left-and-right-addons + */ + rightAddon?: ReactNode + + /** + * The Chakra InputLeftElement + * https://chakra-ui.com/docs/components/input#add-elements-inside-input + */ + leftElement?: ReactNode + + /** + * The Chakra InputRightElement + * https://chakra-ui.com/docs/components/input#add-elements-inside-input + */ + rightElement?: ReactNode +} + +export const InputControl: FC = (props: InputControlProps) => { + const { name, control, label, inputProps, leftAddon, rightAddon, leftElement, rightElement, ...rest } = props + const { + field, + formState: { isSubmitting } + } = useController({ + name, + control + }) + return ( + + + {typeof leftAddon === 'string' ? {leftAddon} : leftAddon} + {typeof leftElement === 'string' ? {leftElement} : leftElement} + + {typeof rightElement === 'string' ? {rightElement} : rightElement} + {typeof rightAddon === 'string' ? {rightAddon} : rightAddon} + + + ) +} + +InputControl.displayName = "InputControl" + +export default InputControl diff --git a/src/components/number-input-control/index.tsx b/src/components/number-input-control/index.tsx new file mode 100644 index 0000000..a1a798b --- /dev/null +++ b/src/components/number-input-control/index.tsx @@ -0,0 +1,78 @@ +import { + NumberDecrementStepper, + NumberIncrementStepper, + NumberInput, + NumberInputField, + NumberInputProps as ChakraNumberInputProps, + NumberInputStepper, + InputGroup, +} from "@chakra-ui/react" +import { FC, ReactNode } from "react" +import { get, useController } from "react-hook-form" +import { BaseProps, FormControl } from "../form-control" + +export interface NumberInputControlProps extends BaseProps { + /** + * Chakra's NumberInputProps + */ + numberInputProps?: ChakraNumberInputProps + + /** + * Whether or not the stopper should be shownF + */ + showStepper?: boolean + + /** + * Optional children + */ + children?: ReactNode +} + +export const NumberInputControl: FC = (props: NumberInputControlProps) => { + const { + name, + control, + label, + showStepper = true, + children, + numberInputProps, + ...rest + } = props + const { + field, + fieldState: { isTouched }, + formState: { isSubmitting, errors } + } = useController({ + name, + control + }) + const error = get(errors, name, "") + const { ref, ...restField } = field; + + return ( + + = + + + {showStepper && ( + + + + + )} + {children} + = + + + ) +} + +NumberInputControl.displayName = "NumberInputControl" + +export default NumberInputControl diff --git a/src/components/pin-input-control/index.tsx b/src/components/pin-input-control/index.tsx new file mode 100644 index 0000000..27ba0e5 --- /dev/null +++ b/src/components/pin-input-control/index.tsx @@ -0,0 +1,48 @@ +import { HStack, PinInput, PinInputField, PinInputProps, StackProps } from "@chakra-ui/react" +import { FC } from "react" +import { useController } from "react-hook-form" +import { BaseProps, FormControl } from "../form-control" + +export interface PinInputControlProps extends BaseProps { + /** + * The number of PinInputField's to render + */ + pinAmount: number + + /** + * Chakra's StackProps + */ + stackProps?: StackProps + + /** + * Chakra's PinInputProps (omits children as that is handled for you based on pinAmount) + */ + pinInputProps?: Omit +} + +export const PinInputControl: FC = (props: PinInputControlProps) => { + const { name, control, label, pinAmount, stackProps, pinInputProps, ...rest } = props + const { + field, + formState: { isSubmitting, } + } = useController({ + name, + control + }) + + const renderedPinInputFields = Array(pinAmount) + .fill(null) + .map((_noop, i) => ) + + return ( + + + + {renderedPinInputFields} + + + + ) +} + +export default PinInputControl diff --git a/src/components/radio-group-control/index.tsx b/src/components/radio-group-control/index.tsx new file mode 100644 index 0000000..329b7b2 --- /dev/null +++ b/src/components/radio-group-control/index.tsx @@ -0,0 +1,44 @@ +import { RadioGroup, RadioGroupProps, Stack, StackProps } from "@chakra-ui/react" +import { FC, ReactNode } from "react" +import { useController } from "react-hook-form" +import { BaseProps, FormControl } from "../form-control" + +export interface RadioGroupControlProps extends BaseProps { + /** + * Chakra RadioGroupProps + */ + radioGroupProps?: RadioGroupProps + + /** + * Chakra StackProps + */ + stackProps?: StackProps + + /** + * The Radio components to be rendered in this group (required) + */ + children: ReactNode +} + +export const RadioGroupControl: FC = (props: RadioGroupControlProps) => { + const { name, control, label, radioGroupProps, stackProps, children, ...rest } = props + const { + field, + formState: { isSubmitting } + } = useController({ + name, + control + }) + + return ( + + + + {children} + + + + ) +} + +export default RadioGroupControl diff --git a/src/components/reset-button/index.tsx b/src/components/reset-button/index.tsx new file mode 100644 index 0000000..1fcd717 --- /dev/null +++ b/src/components/reset-button/index.tsx @@ -0,0 +1,34 @@ +import { Button, ButtonProps } from "@chakra-ui/react" +import { FC } from "react" +import { Control, useFormContext, UseFormReset, useFormState } from "react-hook-form" + +export interface ResetButtonProps extends ButtonProps { + /** + * The control passed down from react-hook-form. + * Only required if not using FormProvider + */ + control?: Control + + /** + * The reset method (passed down from react-hook-forms useForm) + * Only required if not using FormProvider + */ + reset?: UseFormReset +} + +export const ResetButton: FC = (props: ResetButtonProps) => { + const { children, control, reset: resetForm, ...rest } = props + const { isSubmitting, isDirty } = useFormState({ control }) + if (props.control && !props.reset) { + throw new Error('Missing prop "reset" required if not using FormProvider'); + } + const resetFn = props.control && props.reset ? props.reset : (useFormContext()).reset + + return ( + + ) +} + +export default ResetButton diff --git a/src/components/select-control/index.tsx b/src/components/select-control/index.tsx new file mode 100644 index 0000000..6f5ad7c --- /dev/null +++ b/src/components/select-control/index.tsx @@ -0,0 +1,39 @@ +import { Select, SelectProps } from "@chakra-ui/react" +import { FC, ReactNode } from "react" +import { useController } from "react-hook-form" +import { BaseProps, FormControl } from "../form-control" + +export interface SelectControlProps extends BaseProps { + /** + * Chakra SelectProps + */ + selectProps?: SelectProps + + /** + * The ReactNode to be rendered inside Chakra Select component + */ + children: ReactNode +} + +export const SelectControl: FC = (props: SelectControlProps) => { + const { name, control, selectProps, children, ...rest } = props + const { + field, + formState: { isSubmitting } + } = useController({ + name, + control + }) + + return ( + + + + ) +} + +SelectControl.displayName = "SelectControl" + +export default SelectControl diff --git a/src/components/slider-control/index.tsx b/src/components/slider-control/index.tsx new file mode 100644 index 0000000..30513e8 --- /dev/null +++ b/src/components/slider-control/index.tsx @@ -0,0 +1,53 @@ +import { + Slider, + SliderFilledTrack, + SliderProps, + SliderThumb, + SliderThumbProps, + SliderTrack, + SliderTrackProps +} from "@chakra-ui/react" +import { FC } from "react" +import { useController } from "react-hook-form" +import { BaseProps, FormControl } from "../form-control" + +export interface SliderControlProps extends BaseProps { + /** + * Chakra SliderProps + */ + sliderProps?: SliderProps + + /** + * Chakra SliderTrackProps + */ + sliderTrackProps?: SliderTrackProps + + /** + * Chakra SliderThumbProps + */ + sliderThumbProps?: SliderThumbProps +} + +export const SliderControl: FC = (props: SliderControlProps) => { + const { name, control, sliderProps, sliderTrackProps, sliderThumbProps, ...rest } = props + const { + field, + formState: { isSubmitting } + } = useController({ + name, + control + }) + + return ( + + + + + + + + + ) +} + +export default SliderControl diff --git a/src/components/submit-button/index.tsx b/src/components/submit-button/index.tsx new file mode 100644 index 0000000..cdc0449 --- /dev/null +++ b/src/components/submit-button/index.tsx @@ -0,0 +1,25 @@ +import { Button, ButtonProps } from "@chakra-ui/react" +import { FC } from "react" +import { Control } from "react-hook-form" +import { useFormState } from "react-hook-form" + +export interface SubmitButtonProps extends ButtonProps { + /** + * The control passed down from react-hook-form. + * Only required if not using FormProvider + */ + control?: Control +} + +export const SubmitButton: FC = (props: SubmitButtonProps) => { + const { children, control, ...rest } = props + const { isSubmitting } = useFormState({ control }) + + return ( + + ) +} + +export default SubmitButton diff --git a/src/components/switch-control/index.tsx b/src/components/switch-control/index.tsx new file mode 100644 index 0000000..bcaf5a0 --- /dev/null +++ b/src/components/switch-control/index.tsx @@ -0,0 +1,48 @@ +import { Flex, Switch, SwitchProps } from "@chakra-ui/react" +import { FC } from "react" +import { get, useController } from "react-hook-form" +import { BaseProps, FormControl } from "../form-control" + +export interface SwitchControlProps extends BaseProps { + /** + * Chakra SwitchProps + */ + switchProps?: SwitchProps +} + +export const SwitchControl: FC = (props: SwitchControlProps) => { + const { name, control, label, switchProps, ...rest } = props + const { + field, + fieldState: { isTouched }, + formState: { isSubmitting, errors } + } = useController({ + name, + control + }) + const error = get(errors, name, "") + + return ( + + + + ) +} + +SwitchControl.displayName = "SwitchControl" + +export default SwitchControl diff --git a/src/components/textarea-control/index.tsx b/src/components/textarea-control/index.tsx new file mode 100644 index 0000000..5195c91 --- /dev/null +++ b/src/components/textarea-control/index.tsx @@ -0,0 +1,32 @@ +import { Textarea, TextareaProps } from "@chakra-ui/react" +import { FC } from "react" +import { useController } from "react-hook-form" +import { BaseProps, FormControl } from "../form-control" + +export interface TextareaControlProps extends BaseProps { + /** + * Chakra TextareaProps + */ + textareaProps?: TextareaProps +} + +export const TextareaControl: FC = (props: TextareaControlProps) => { + const { name, control, textareaProps, ...rest } = props + const { + field, + formState: { isSubmitting } + } = useController({ + name, + control + }) + + return ( + +