var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var F=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),I=(i,e)=>{for(var t in e)r(i,t,{get:e[t],enumerable:!0})},d=(i,e,t,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of p(e))!g.call(i,a)&&a!==t&&r(i,a,{get:()=>e[a],enumerable:!(l=h(e,a))||l.enumerable});return i};var b=(i,e,t)=>(t=i!=null?u(m(i)):{},d(e||!i||!i.__esModule?r(t,"default",{value:i,enumerable:!0}):t,i)),R=i=>d(r({},"__esModule",{value:!0}),i);var c=F((L,o)=>{o.exports=_jsx_runtime});var v={};I(v,{default:()=>f,frontmatter:()=>x});var n=b(c()),x={id:"field",category:"form",title:"Field",package:"@chakra-ui/react",description:"Field provides context such as `invalid`, `disabled`, and `required` to form elements"};function s(i){let e=Object.assign({h2:"h2",pre:"pre",code:"code",h3:"h3",p:"p"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import { Field } from '@chakra-ui/react' `})}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Email address We'll never share your email. `})}),` `,(0,n.jsxs)(e.h3,{id:"usage-with-radiogroup",children:["Usage with ",(0,n.jsx)(e.code,{children:"RadioGroup"})]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Favorite Naruto Character Sasuke Nagato Itachi Sage of the six Paths Select only if you're a fan. `})}),` `,(0,n.jsx)(e.h3,{id:"displaying-an-error-message",children:"Displaying an error message"}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:"Field.ErrorMessage"})," will only show up when the property ",(0,n.jsx)(e.code,{children:"invalid"}),` in `,(0,n.jsx)(e.code,{children:"Field.Root"})," is ",(0,n.jsx)(e.code,{children:"true"}),"."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`function ErrorMessageExample() { const [input, setInput] = useState('') const handleInputChange = (e) => setInput(e.target.value) const invalid = input === '' return ( Email {!isError ? ( Enter the email you'd like to receive the newsletter on. ) : ( Email is required. )} ) } `})}),` `,(0,n.jsx)(e.h3,{id:"making-a-field-required",children:"Making a field required"}),` `,(0,n.jsxs)(e.p,{children:["By passing the ",(0,n.jsx)(e.code,{children:"required"})," props, the ",(0,n.jsx)(e.code,{children:"Input"})," field has ",(0,n.jsx)(e.code,{children:"aria-required"}),` set to `,(0,n.jsx)(e.code,{children:"true"}),", and the ",(0,n.jsx)(e.code,{children:"Field.Label"})," will show a red asterisk."]}),` `,(0,n.jsxs)(e.p,{children:["This red asterisk can be overwritten by passing ",(0,n.jsx)(e.code,{children:"requiredIndicator"}),` to the `,(0,n.jsx)(e.code,{children:"Field.Label"}),`. If you want to indicate that a field is optional you can add `,(0,n.jsx)(e.code,{children:"optionalIndicator"})," to the ",(0,n.jsx)(e.code,{children:"Field.Label"})]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` First name `})}),` `,(0,n.jsxs)(e.h3,{id:"usage-with-select",children:["Usage with ",(0,n.jsx)(e.code,{children:"Select"})]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Country `})}),` `,(0,n.jsxs)(e.h3,{id:"usage-with-numberinput",children:["Usage with ",(0,n.jsx)(e.code,{children:"NumberInput"})]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Amount `})})]})}function N(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(s,i)})):s(i)}var f=N;return R(v);})(); ;return Component;

Props#