var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var E=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),b=(n,l)=>{for(var r in l)i(n,r,{get:l[r],enumerable:!0})},p=(n,l,r,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let a of m(l))!C.call(n,a)&&a!==r&&i(n,a,{get:()=>l[a],enumerable:!(s=f(l,a))||s.enumerable});return n};var _=(n,l,r)=>(r=n!=null?u(g(n)):{},p(l||!n||!n.__esModule?i(r,"default",{value:n,enumerable:!0}):r,n)),T=n=>p(i({},"__esModule",{value:!0}),n);var y=E((I,h)=>{h.exports=_jsx_runtime});var D={};b(D,{default:()=>S,frontmatter:()=>A});var e=_(y()),A={title:"Text Field",description:"Displays a form input field or a component that looks like an input field.",isComponent:!0};function x(n){let l=Object.assign({figure:"figure",figcaption:"figcaption",pre:"pre",code:"code",span:"span",p:"p",strong:"strong"},n.components),{Heading:r,Tabs:s,TabList:a,Tab:o,TabPanel:d,ComponentSource:F,ComponentExample:c}=l;return c||t("ComponentExample",!0),F||t("ComponentSource",!0),r||t("Heading",!0),o||t("Tab",!0),a||t("TabList",!0),d||t("TabPanel",!0),s||t("Tabs",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(r,{lvl:"2",slug:"installation",children:"Installation"}),` `,(0,e.jsxs)(s,{children:[(0,e.jsxs)(a,{"aria-label":"Preview and Code Tabs",children:[(0,e.jsx)(o,{id:"cli-install",children:"CLI"}),(0,e.jsx)(o,{id:"manual-install",children:"Copy & Paste"})]}),(0,e.jsx)(d,{id:"cli-install",className:"px-0 [&_pre]:my-0 [&_figure]:my-0",children:(0,e.jsxs)(l.figure,{"data-rehype-pretty-code-figure":"",__rawString__:`npx @sly-cli/sly add draft-ui text-field `,__npmCommand__:`npx @sly-cli/sly add draft-ui text-field `,__yarnCommand__:`npx @sly-cli/sly add draft-ui text-field `,__pnpmCommand__:`pnpm dlx @sly-cli/sly add draft-ui text-field `,__niCommand__:`nlx @sly-cli/sly add draft-ui text-field `,children:[(0,e.jsx)(l.figcaption,{"data-rehype-pretty-code-title":"","data-language":"bash","data-theme":"dracula",children:"bash"}),(0,e.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#F8F8F2"},tabIndex:"0","data-language":"bash","data-theme":"dracula",children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"dracula",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#50FA7B"},children:"npx"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:" @sly-cli/sly"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:" add"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:" draft-ui"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:" text-field"})]})})})]})}),(0,e.jsx)(d,{id:"manual-install",className:"px-0",children:(0,e.jsx)(F,{src:"../../packages/ui/src/text-field.tsx",children:(0,e.jsx)(l.figure,{__src__:"../../packages/ui/src/text-field.tsx","data-rehype-pretty-code-figure":"",__rawString__:`import * as ReactAria from 'react-aria-components' import { cx } from '../lib/cva.config' export const TextField = ({ className, ...props }: ReactAria.TextFieldProps) => { return } export const TextFieldDescription = ({ className, ...props }: ReactAria.TextProps) => { return ( ) } export const TextFieldErrorMessage = ({ className, ...props }: ReactAria.TextProps) => { return ( ) } `,children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#F8F8F2"},tabIndex:"0","data-language":"tsx","data-theme":"dracula",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#BD93F9"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ReactAria "}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"react-aria-components"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { cx } "}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"../lib/cva.config"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B"},children:" TextField"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ({"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" className,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" ..."}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"props"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" ReactAria"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"TextFieldProps"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"ReactAria.TextField"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B"},children:"cx"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"w-full"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:", className)} {"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"props} />"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B"},children:" TextFieldDescription"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ({"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" className,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" ..."}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"props"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" ReactAria"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"TextProps"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"ReactAria.Text"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" elementType"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:'"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" slot"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:'"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B"},children:"cx"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"mt-2 text-sm text-slate-500 dark:text-slate-400"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" className,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" )}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"props}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B"},children:" TextFieldErrorMessage"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ({"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" className,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" ..."}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"props"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" ReactAria"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"TextProps"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"ReactAria.Text"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" elementType"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:'"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" slot"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"errorMessage"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:'"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B"},children:"cx"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"mt-2 text-sm text-red-600 dark:text-red-400"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:", className)}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"props}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"})})]})})})})})]}),` `,(0,e.jsx)(r,{lvl:"2",slug:"examples",children:"Examples"}),` `,(0,e.jsx)(r,{lvl:"3",slug:"default",children:"Default"}),` `,(0,e.jsxs)(l.p,{children:["This is the default ",(0,e.jsx)(l.strong,{children:(0,e.jsx)(l.code,{children:"TextField"})}),"."]}),` `,(0,e.jsx)(c,{name:"text-field",story:"default",children:(0,e.jsx)(l.figure,{__src__:"registry/text-field/default.tsx","data-rehype-pretty-code-figure":"",__rawString__:`import { Input, Label, TextField } from 'ui' export function Default() { return ( Label ) }`,children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#F8F8F2"},tabIndex:"0","data-language":"tsx","data-theme":"dracula",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { Input, Label, TextField } "}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"ui"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B"},children:" Default"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"TextField"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:">Label"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"Input"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"})})]})})})}),` `,(0,e.jsx)(r,{lvl:"3",slug:"with-error",children:"With Error"}),` `,(0,e.jsxs)(l.p,{children:["Use the ",(0,e.jsx)(l.code,{children:"isInvalid"})," prop to make an ",(0,e.jsx)(l.strong,{children:(0,e.jsx)(l.code,{children:"Input"})})," invalid. You can also include an error message to tell users why the ",(0,e.jsx)(l.code,{children:"input"})," is invalid."]}),` `,(0,e.jsx)(c,{name:"text-field",story:"with-error",children:(0,e.jsx)(l.figure,{__src__:"registry/text-field/with-error.tsx","data-rehype-pretty-code-figure":"",__rawString__:`import { Input, Label, TextField, TextFieldErrorMessage } from 'ui' export function withError() { return ( Label This is an error message ) }`,children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#F8F8F2"},tabIndex:"0","data-language":"tsx","data-theme":"dracula",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { Input, Label, TextField, TextFieldErrorMessage } "}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"ui"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B"},children:" withError"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"TextField"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" isInvalid"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:">Label"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"Input"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"md"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"TextFieldErrorMessage"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:">This is an error message"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"})})]})})})}),` `,(0,e.jsx)(r,{lvl:"3",slug:"disabled",children:"Disabled"}),` `,(0,e.jsxs)(l.p,{children:["Use the ",(0,e.jsx)(l.code,{children:"isDisabled"})," prop to make the ",(0,e.jsx)(l.strong,{children:(0,e.jsx)(l.code,{children:"Input"})})," disabled."]}),` `,(0,e.jsx)(c,{name:"text-field",story:"disabled",children:(0,e.jsx)(l.figure,{__src__:"registry/text-field/disabled.tsx","data-rehype-pretty-code-figure":"",__rawString__:`import { Input, Label, TextField } from 'ui' export function Default() { return ( Label ) }`,children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#F8F8F2"},tabIndex:"0","data-language":"tsx","data-theme":"dracula",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { Input, Label, TextField } "}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"ui"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B"},children:" Default"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"TextField"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" isDisabled"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:">Label"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"Input"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"})})]})})})})]})}function B(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(x,n)})):x(n)}var S=B;function t(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return T(D);})(); ;return Component;