{"componentChunkName":"component---src-pages-components-text-input-style-mdx","path":"/components/text-input/style/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","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":"36974621-99b1-510f-aa4c-41139f4dccd4","children":[],"parent":"0c5c27fd-697f-54ec-85bb-13e3eb9f3dc3","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":"715ed3c8075b23f37e89484eb3fb51a4","counter":1359,"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":"/fargate/7b444b50/src/pages/components/text-input/style.mdx"}}}}