var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var o=a=>l(a,"__esModule",{value:!0});var N=(a,t)=>()=>(t||a((t={exports:{}}).exports,t),t.exports),k=(a,t)=>{o(a);for(var i in t)l(a,i,{get:t[i],enumerable:!0})},f=(a,t,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of p(t))!u.call(a,n)&&n!=="default"&&l(a,n,{get:()=>t[n],enumerable:!(i=h(t,n))||i.enumerable});return a},b=a=>f(o(l(a!=null?d(m(a)):{},"default",a&&a.__esModule&&"default"in a?{get:()=>a.default,enumerable:!0}:{value:a,enumerable:!0})),a);var r=N((I,c)=>{c.exports=_jsx_runtime});var w={};k(w,{default:()=>y});var e=b(r());function x(a={}){let{wrapper:t}=a.components||{};return t?(0,e.jsx)(t,Object.assign({},a,{children:(0,e.jsx)(i,{})})):i();function i(){let n=Object.assign({p:"p",a:"a",h2:"h2",span:"span",h3:"h3",pre:"pre",code:"code",h4:"h4",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",hr:"hr"},a.components),{AndroidXBanner:s}=n;return s||g("AndroidXBanner",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.p,{children:["<",'a href="',(0,e.jsx)(n.a,{href:"https://material.io/components/text-fields#filled-text-field",children:"https://material.io/components/text-fields#filled-text-field"}),'" class="external" target="_blank"',">","Material Design filled text field","<","/a",">","."]}),(0,e.jsx)(n.p,{children:"Filled text fields have more visual emphasis than outlined text fields, making them stand out when surrounded by other content and components."}),(0,e.jsxs)(n.p,{children:["!Filled text field image(",(0,e.jsx)(n.a,{href:"https://developer.android.com/images/reference/androidx/compose/material/filled-text-field.png",children:"https://developer.android.com/images/reference/androidx/compose/material/filled-text-field.png"}),")"]}),(0,e.jsx)(n.p,{children:"If you are looking for an outlined version, see OutlinedTextField."}),(0,e.jsx)(n.p,{children:"A simple single line text field looks like:"}),(0,e.jsx)(s,{}),(0,e.jsxs)(n.h2,{id:"overloads",children:[(0,e.jsx)(n.a,{href:"#overloads","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Overloads"]}),(0,e.jsxs)(n.h3,{id:"textfield",children:[(0,e.jsx)(n.a,{href:"#textfield","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"TextField"]}),(0,e.jsx)(n.pre,{className:"language-kotlin",children:(0,e.jsxs)(n.code,{className:"language-kotlin code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token annotation builtin",children:"@Composable"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"fun"})," ",(0,e.jsx)(n.span,{className:"token function",children:"TextField"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" value",(0,e.jsx)(n.span,{className:"token operator",children:":"})," String",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" onValueChange",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"String",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"->"})," Unit",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" modifier",(0,e.jsx)(n.span,{className:"token operator",children:":"})," Modifier ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," Modifier",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" enabled",(0,e.jsx)(n.span,{className:"token operator",children:":"})," Boolean ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"true"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" readOnly",(0,e.jsx)(n.span,{className:"token operator",children:":"})," Boolean ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"false"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" textStyle",(0,e.jsx)(n.span,{className:"token operator",children:":"})," TextStyle ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," LocalTextStyle",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"current",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" label",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token annotation builtin",children:"@Composable"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"->"})," Unit",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"null"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" placeholder",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token annotation builtin",children:"@Composable"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"->"})," Unit",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"null"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" leadingIcon",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token annotation builtin",children:"@Composable"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"->"})," Unit",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"null"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" trailingIcon",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token annotation builtin",children:"@Composable"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"->"})," Unit",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"null"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" isError",(0,e.jsx)(n.span,{className:"token operator",children:":"})," Boolean ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"false"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" visualTransformation",(0,e.jsx)(n.span,{className:"token operator",children:":"})," VisualTransformation ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," VisualTransformation",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"None",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" keyboardOptions",(0,e.jsx)(n.span,{className:"token operator",children:":"})," KeyboardOptions ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," KeyboardOptions",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"Default",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" keyboardActions",(0,e.jsx)(n.span,{className:"token operator",children:":"})," KeyboardActions ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"KeyboardActions"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" singleLine",(0,e.jsx)(n.span,{className:"token operator",children:":"})," Boolean ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"false"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" maxLines",(0,e.jsx)(n.span,{className:"token operator",children:":"})," Int ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"singleLine",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"else"})," Int",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"MAX_VALUE",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" minLines",(0,e.jsx)(n.span,{className:"token operator",children:":"})," Int ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" interactionSource",(0,e.jsx)(n.span,{className:"token operator",children:":"})," MutableInteractionSource ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," remember ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token function",children:"MutableInteractionSource"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" shape",(0,e.jsx)(n.span,{className:"token operator",children:":"})," Shape ",(0,e.jsx)(n.span,{className:"token operator",children:"="}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" MaterialTheme",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"shapes",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"small",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"copy"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"bottomEnd ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ZeroCornerSize",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," bottomStart ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ZeroCornerSize",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" colors",(0,e.jsx)(n.span,{className:"token operator",children:":"})," TextFieldColors ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," TextFieldDefaults",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"textFieldColors"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),(0,e.jsxs)(n.h4,{id:"parameters",children:[(0,e.jsx)(n.a,{href:"#parameters","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Parameters"]}),(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:"Name"}),(0,e.jsx)(n.th,{children:"Description"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"value"})}),(0,e.jsx)(n.td,{children:"the input text to be shown in the text field"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"onValueChange"})}),(0,e.jsx)(n.td,{children:"the callback that is triggered when the input service updates the text. An updated text comes as a parameter of the callback"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"modifier"})}),(0,e.jsx)(n.td,{children:"a Modifier for this text field"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"enabled"})}),(0,e.jsxs)(n.td,{children:["controls the enabled state of the TextField. When ",(0,e.jsx)(n.code,{children:"false"}),", the text field will be neither editable nor focusable, the input of the text field will not be selectable, visually text field will appear in the disabled UI state"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"readOnly"})}),(0,e.jsxs)(n.td,{children:["controls the editable state of the TextField. When ",(0,e.jsx)(n.code,{children:"true"}),", the text field can not be modified, however, a user can focus it and copy text from it. Read-only text fields are usually used to display pre-filled forms that user can not edit"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"textStyle"})}),(0,e.jsx)(n.td,{children:"the style to be applied to the input text. The default textStyle uses the LocalTextStyle defined by the theme"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"label"})}),(0,e.jsx)(n.td,{children:"the optional label to be displayed inside the text field container. The default text style for internal Text is Typography.caption when the text field is in focus and Typography.subtitle1 when the text field is not in focus"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"placeholder"})}),(0,e.jsx)(n.td,{children:"the optional placeholder to be displayed when the text field is in focus and the input text is empty. The default text style for internal Text is Typography.subtitle1"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"leadingIcon"})}),(0,e.jsx)(n.td,{children:"the optional leading icon to be displayed at the beginning of the text field container"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"trailingIcon"})}),(0,e.jsx)(n.td,{children:"the optional trailing icon to be displayed at the end of the text field container"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"isError"})}),(0,e.jsx)(n.td,{children:"indicates if the text field's current value is in error. If set to true, the label, bottom indicator and trailing icon by default will be displayed in error color"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"visualTransformation"})}),(0,e.jsx)(n.td,{children:"transforms the visual representation of the input value For example, you can use PasswordVisualTransformationandroidx.compose.ui.text.input.PasswordVisualTransformation to create a password text field. By default no visual transformation is applied"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"keyboardOptions"})}),(0,e.jsx)(n.td,{children:"software keyboard options that contains configuration such as KeyboardType and ImeAction."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"keyboardActions"})}),(0,e.jsx)(n.td,{children:"when the input service emits an IME action, the corresponding callback is called. Note that this IME action may be different from what you specified in KeyboardOptions.imeAction."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"singleLine"})}),(0,e.jsx)(n.td,{children:"when set to true, this text field becomes a single horizontally scrolling text field instead of wrapping onto multiple lines. The keyboard will be informed to not show the return key as the ImeAction. Note that maxLines parameter will be ignored as the maxLines attribute will be automatically set to 1."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"maxLines"})}),(0,e.jsxs)(n.td,{children:["the maximum height in terms of maximum number of visible lines. It is required that 1 ","<","= minLines ","<","= maxLines. This parameter is ignored when singleLine is true."]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"minLines"})}),(0,e.jsxs)(n.td,{children:["the minimum height in terms of minimum number of visible lines. It is required that 1 ","<","= minLines ","<","= maxLines. This parameter is ignored when singleLine is true."]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"interactionSource"})}),(0,e.jsx)(n.td,{children:"the MutableInteractionSource representing the stream of Interactions for this TextField. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this TextField in different Interactions."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"shape"})}),(0,e.jsx)(n.td,{children:"the shape of the text field's container"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"colors"})}),(0,e.jsx)(n.td,{children:"TextFieldColors that will be used to resolve color of the text, content (including label, placeholder, leading and trailing icons, indicator line) and background for this text field in different states. See TextFieldDefaults.textFieldColors"})]})]})]}),(0,e.jsx)(n.hr,{}),(0,e.jsxs)(n.h3,{id:"textfield-1",children:[(0,e.jsx)(n.a,{href:"#textfield-1","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"TextField"]}),(0,e.jsx)(n.pre,{className:"language-kotlin",children:(0,e.jsxs)(n.code,{className:"language-kotlin code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token annotation builtin",children:"@Composable"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"fun"})," ",(0,e.jsx)(n.span,{className:"token function",children:"TextField"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" value",(0,e.jsx)(n.span,{className:"token operator",children:":"})," TextFieldValue",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" onValueChange",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"TextFieldValue",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"->"})," Unit",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" modifier",(0,e.jsx)(n.span,{className:"token operator",children:":"})," Modifier ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," Modifier",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" enabled",(0,e.jsx)(n.span,{className:"token operator",children:":"})," Boolean ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"true"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" readOnly",(0,e.jsx)(n.span,{className:"token operator",children:":"})," Boolean ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"false"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" textStyle",(0,e.jsx)(n.span,{className:"token operator",children:":"})," TextStyle ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," LocalTextStyle",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"current",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" label",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token annotation builtin",children:"@Composable"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"->"})," Unit",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"null"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" placeholder",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token annotation builtin",children:"@Composable"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"->"})," Unit",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"null"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" leadingIcon",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token annotation builtin",children:"@Composable"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"->"})," Unit",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"null"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" trailingIcon",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token annotation builtin",children:"@Composable"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"->"})," Unit",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"null"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" isError",(0,e.jsx)(n.span,{className:"token operator",children:":"})," Boolean ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"false"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" visualTransformation",(0,e.jsx)(n.span,{className:"token operator",children:":"})," VisualTransformation ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," VisualTransformation",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"None",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" keyboardOptions",(0,e.jsx)(n.span,{className:"token operator",children:":"})," KeyboardOptions ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," KeyboardOptions",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"Default",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" keyboardActions",(0,e.jsx)(n.span,{className:"token operator",children:":"})," KeyboardActions ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"KeyboardActions"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" singleLine",(0,e.jsx)(n.span,{className:"token operator",children:":"})," Boolean ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"false"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" maxLines",(0,e.jsx)(n.span,{className:"token operator",children:":"})," Int ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"singleLine",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"else"})," Int",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"MAX_VALUE",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" minLines",(0,e.jsx)(n.span,{className:"token operator",children:":"})," Int ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" interactionSource",(0,e.jsx)(n.span,{className:"token operator",children:":"})," MutableInteractionSource ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," remember ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token function",children:"MutableInteractionSource"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" shape",(0,e.jsx)(n.span,{className:"token operator",children:":"})," Shape ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," TextFieldDefaults",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"TextFieldShape",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" colors",(0,e.jsx)(n.span,{className:"token operator",children:":"})," TextFieldColors ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," TextFieldDefaults",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"textFieldColors"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),(0,e.jsxs)(n.h4,{id:"parameters-1",children:[(0,e.jsx)(n.a,{href:"#parameters-1","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Parameters"]}),(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:"Name"}),(0,e.jsx)(n.th,{children:"Description"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"value"})}),(0,e.jsx)(n.td,{children:"the input TextFieldValue to be shown in the text field"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"onValueChange"})}),(0,e.jsx)(n.td,{children:"the callback that is triggered when the input service updates values in TextFieldValue. An updated TextFieldValue comes as a parameter of the callback"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"modifier"})}),(0,e.jsx)(n.td,{children:"a Modifier for this text field"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"enabled"})}),(0,e.jsxs)(n.td,{children:["controls the enabled state of the TextField. When ",(0,e.jsx)(n.code,{children:"false"}),", the text field will be neither editable nor focusable, the input of the text field will not be selectable, visually text field will appear in the disabled UI state"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"readOnly"})}),(0,e.jsxs)(n.td,{children:["controls the editable state of the TextField. When ",(0,e.jsx)(n.code,{children:"true"}),", the text field can not be modified, however, a user can focus it and copy text from it. Read-only text fields are usually used to display pre-filled forms that user can not edit"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"textStyle"})}),(0,e.jsx)(n.td,{children:"the style to be applied to the input text. The default textStyle uses the LocalTextStyle defined by the theme"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"label"})}),(0,e.jsx)(n.td,{children:"the optional label to be displayed inside the text field container. The default text style for internal Text is Typography.caption when the text field is in focus and Typography.subtitle1 when the text field is not in focus"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"placeholder"})}),(0,e.jsx)(n.td,{children:"the optional placeholder to be displayed when the text field is in focus and the input text is empty. The default text style for internal Text is Typography.subtitle1"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"leadingIcon"})}),(0,e.jsx)(n.td,{children:"the optional leading icon to be displayed at the beginning of the text field container"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"trailingIcon"})}),(0,e.jsx)(n.td,{children:"the optional trailing icon to be displayed at the end of the text field container"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"isError"})}),(0,e.jsx)(n.td,{children:"indicates if the text field's current value is in error state. If set to true, the label, bottom indicator and trailing icon by default will be displayed in error color"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"visualTransformation"})}),(0,e.jsx)(n.td,{children:"transforms the visual representation of the input value. For example, you can use PasswordVisualTransformationandroidx.compose.ui.text.input.PasswordVisualTransformation to create a password text field. By default no visual transformation is applied"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"keyboardOptions"})}),(0,e.jsx)(n.td,{children:"software keyboard options that contains configuration such as KeyboardType and ImeAction."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"keyboardActions"})}),(0,e.jsx)(n.td,{children:"when the input service emits an IME action, the corresponding callback is called. Note that this IME action may be different from what you specified in KeyboardOptions.imeAction."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"singleLine"})}),(0,e.jsx)(n.td,{children:"when set to true, this text field becomes a single horizontally scrolling text field instead of wrapping onto multiple lines. The keyboard will be informed to not show the return key as the ImeAction. Note that maxLines parameter will be ignored as the maxLines attribute will be automatically set to 1."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"maxLines"})}),(0,e.jsxs)(n.td,{children:["the maximum height in terms of maximum number of visible lines. It is required that 1 ","<","= minLines ","<","= maxLines. This parameter is ignored when singleLine is true."]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"minLines"})}),(0,e.jsxs)(n.td,{children:["the minimum height in terms of minimum number of visible lines. It is required that 1 ","<","= minLines ","<","= maxLines. This parameter is ignored when singleLine is true."]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"interactionSource"})}),(0,e.jsx)(n.td,{children:"the MutableInteractionSource representing the stream of Interactions for this TextField. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this TextField in different Interactions."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"shape"})}),(0,e.jsx)(n.td,{children:"the shape of the text field's container"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"colors"})}),(0,e.jsx)(n.td,{children:"TextFieldColors that will be used to resolve color of the text, content (including label, placeholder, leading and trailing icons, indicator line) and background for this text field in different states. See TextFieldDefaults.textFieldColors"})]})]})]})]})}}var y=x;function g(a,t){throw new Error("Expected "+(t?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return w;})(); ;return Component;

← Back to Material Compose

TextField