{"componentChunkName":"component---src-pages-components-text-input-style-mdx","path":"/components/text-input/style/","webpackCompilationHash":"9a5cb62a61994334ab3f","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Text input","description":"Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/text-input/style.mdx","titleType":"prepend","MdxNode":{"id":"0a3c9473-392d-5031-8b32-3d82dcb2d8a1","children":[],"parent":"650b6253-635c-5c89-8176-b00d3aa6f910","internal":{"content":"---\ntitle: Text input\ndescription: Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\nInputs come in two different colors. The default input color is `$field-01` and is used on `$ui-background` and `$ui-01` page backgrounds. The `--light` version input color is `$field-02` and is used on `$ui-02` page backgrounds.\n\n| Class | Property | Color token |\n| ------------------------------ | ---------------- | ----------- |\n| `.bx--label` | text color | `$text-02` |\n| `.bx--text-input` | text color | `$text-01` |\n| `.bx--text-input::placeholder` | text color | `$text-03` |\n| `.bx--form__helper-text` | text color | `$text-02` |\n| `.bx--text-input` | background-color | `$field-01` |\n| `.bx--text-input--light` | background-color | `$field-02` |\n| `.bx--text-input` | border-bottom | `$ui-04` |\n\n\n\n\n\n
\n\n\n Examples of default and user-input states for text input in both $field-02\n (left) and $field-01 (right)\n\n\n### Interactive states\n\n| Class | Property | Color token |\n| ------------------------------- | ---------- | ------------- |\n| `.bx--text-input:focus` | border | `$focus` |\n| `.bx--text-input[data-invalid]` | border | `$support-01` |\n| `.bx--form-requirement` | text color | `$support-01` |\n| `warning--filled` | svg | `$support-01` |\n\n## Typography\n\nText input labels and placeholder text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. Text input labels should be three words or less.\n\n| Class | Font-size (px/rem) | Font-weight | Type token |\n| ------------------------ | ------------------ | ------------- | --------------- |\n| `.bx--label` | 12 / 0.75 | Regular / 400 | `$label-01` |\n| `.bx--text-input` | 14 / 0.875 | Regular / 400 | `$body-long-01` |\n| `.bx--form__helper-text` | 12 / 0.75 | Regular / 400 | `$label-01` |\n| `.bx--form-requirement` | 12 / 0.75 | Regular / 400 | `$label-01` |\n\n## Structure\n\n| Class | Property | px / rem | Spacing token |\n| ----------------------- | --------------------------- | -------- | ------------- |\n| `.bx--text-input` | height | 40 / 2.5 | – |\n| `.bx--label` | margin-bottom | 8 / 0.5 | `$spacing-03` |\n| `.bx--text-input` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--text-input` | border-bottom | 1px | – |\n| `.bx--text-input:focus` | border | 2px | – |\n\n\n\n\n\n
\n\nStructure and spacing measurements for text input | px / rem\n\n\n\n\n\n
\n\n\n Examples of active, help, error and disabled text input states\n\n","type":"Mdx","contentDigest":"971abfce6a09acc625ecac50c2a1d1b2","counter":1240,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Text input","description":"Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Text input\ndescription: Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\nInputs come in two different colors. The default input color is `$field-01` and is used on `$ui-background` and `$ui-01` page backgrounds. The `--light` version input color is `$field-02` and is used on `$ui-02` page backgrounds.\n\n| Class | Property | Color token |\n| ------------------------------ | ---------------- | ----------- |\n| `.bx--label` | text color | `$text-02` |\n| `.bx--text-input` | text color | `$text-01` |\n| `.bx--text-input::placeholder` | text color | `$text-03` |\n| `.bx--form__helper-text` | text color | `$text-02` |\n| `.bx--text-input` | background-color | `$field-01` |\n| `.bx--text-input--light` | background-color | `$field-02` |\n| `.bx--text-input` | border-bottom | `$ui-04` |\n\n\n\n\n\n
\n\n\n Examples of default and user-input states for text input in both $field-02\n (left) and $field-01 (right)\n\n\n### Interactive states\n\n| Class | Property | Color token |\n| ------------------------------- | ---------- | ------------- |\n| `.bx--text-input:focus` | border | `$focus` |\n| `.bx--text-input[data-invalid]` | border | `$support-01` |\n| `.bx--form-requirement` | text color | `$support-01` |\n| `warning--filled` | svg | `$support-01` |\n\n## Typography\n\nText input labels and placeholder text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. Text input labels should be three words or less.\n\n| Class | Font-size (px/rem) | Font-weight | Type token |\n| ------------------------ | ------------------ | ------------- | --------------- |\n| `.bx--label` | 12 / 0.75 | Regular / 400 | `$label-01` |\n| `.bx--text-input` | 14 / 0.875 | Regular / 400 | `$body-long-01` |\n| `.bx--form__helper-text` | 12 / 0.75 | Regular / 400 | `$label-01` |\n| `.bx--form-requirement` | 12 / 0.75 | Regular / 400 | `$label-01` |\n\n## Structure\n\n| Class | Property | px / rem | Spacing token |\n| ----------------------- | --------------------------- | -------- | ------------- |\n| `.bx--text-input` | height | 40 / 2.5 | – |\n| `.bx--label` | margin-bottom | 8 / 0.5 | `$spacing-03` |\n| `.bx--text-input` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--text-input` | border-bottom | 1px | – |\n| `.bx--text-input:focus` | border | 2px | – |\n\n\n\n\n\n
\n\nStructure and spacing measurements for text input | px / rem\n\n\n\n\n\n
\n\n\n Examples of active, help, error and disabled text input states\n\n","fileAbsolutePath":"/tmp/35443907/src/pages/components/text-input/style.mdx"}}}}