{"componentChunkName":"component---src-pages-components-number-input-style-mdx","path":"/components/number-input/style/","result":{"pageContext":{"frontmatter":{"title":"Number input","description":"Number inputs are similar to text inputs, but contain controls used to increase or decrease an incremental value.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/number-input/style.mdx","titleType":"prepend","MdxNode":{"id":"117a37d7-a878-500f-9ad6-8a06e47522f0","children":[],"parent":"b352bec2-1ada-5e27-8134-3f3979fcf8e9","internal":{"content":"---\ntitle: Number input\ndescription: Number inputs are similar to text inputs, but contain controls used to increase or decrease an incremental value.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\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-02` page backgrounds. The `--light` version input color is `$field-02` and is used on `$ui-01` page backgrounds.\n\n| Class | Property | Color token |\n| ---------------------------------- | ---------------- | ----------- |\n| `.bx--label` | text color | `$text-02` |\n| `.bx--number input[type='number']` | text color | `$text-01` |\n| `.bx--number` | background-color | `$field-01` |\n| `.bx--number--light` | background-color | `$field-02` |\n| `.bx--number` | border-bottom | `$ui-04` |\n| `.bx--number__controls` | svg color | `$icon-01` |\n\n\n\n\n\n
\n\nNumber input example\n\n### Interactive states\n\n| Class | Property | Color token |\n| ------------------------------------------- | ---------------- | -------------- |\n| `.bx--number:focus` | border | `$focus` |\n| `.bx--number__controls:focus` | border | `$focus` |\n| `[data-invalid]` | border | `$support-01` |\n| `[data-invalid]:focus` | color | `$support-01` |\n| `.bx--form-requirement` | text color | `$support-01` |\n| `.bx--label:disabled` | text color | `$disabled-02` |\n| `.bx--number:disabled` | background-color | `$disabled-01` |\n| `.bx--number input[type='number']:disabled` | text color | `$disabled-03` |\n\n**Active:** Number input should have a default number to start. The input should never be empty.\n\n**Help text:** Help text appears below the label when the input is active. Help text remains visible while the input is focused and disappears after focus away.\n\n**Error:** Error messages appear below the input field and are always present while invalid.\n\n**Disabled:** Disabled state should have a `.not-allowed` cursor on hover.\n\n## Typography\n\nNumber input labels should use sentence case, with only the first word in a phrase and any proper nouns capitalized.\n\n| Class | Font-size (px/rem) | Font-weight | Type token |\n| ---------------------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--label` | 12 / 0.75 | Regular / 400 | `$label-01` |\n| `.bx--number input[type='number']` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n| `.bx--form-requirement` | 12 / 0.75 | Regular / 400 | `$label-01` |\n\n## Structure\n\nThe height of a number input is always the same. The width however, varies based on content, layout and design. The caret icon can be found in the [icons](/guidelines/icons/library) library.\n\n| Class | Property | px / rem | Spacing token |\n| ---------------------------------- | --------------------------- | -------- | ------------- |\n| `.bx--label` | margin-bottom | 8 / 0.5 | `$spacing-03` |\n| `.bx--number input` | height | 40 / 2.5 | – |\n| `.bx--number input[type='number']` | padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--number__controls` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--number` | border-bottom | 1px | – |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a number input | px / rem\n\n","type":"Mdx","contentDigest":"37fa3ddd99f79e6f350cb27c1e238ef1","counter":1546,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Number input","description":"Number inputs are similar to text inputs, but contain controls used to increase or decrease an incremental value.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Number input\ndescription: Number inputs are similar to text inputs, but contain controls used to increase or decrease an incremental value.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\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-02` page backgrounds. The `--light` version input color is `$field-02` and is used on `$ui-01` page backgrounds.\n\n| Class | Property | Color token |\n| ---------------------------------- | ---------------- | ----------- |\n| `.bx--label` | text color | `$text-02` |\n| `.bx--number input[type='number']` | text color | `$text-01` |\n| `.bx--number` | background-color | `$field-01` |\n| `.bx--number--light` | background-color | `$field-02` |\n| `.bx--number` | border-bottom | `$ui-04` |\n| `.bx--number__controls` | svg color | `$icon-01` |\n\n\n\n\n\n
\n\nNumber input example\n\n### Interactive states\n\n| Class | Property | Color token |\n| ------------------------------------------- | ---------------- | -------------- |\n| `.bx--number:focus` | border | `$focus` |\n| `.bx--number__controls:focus` | border | `$focus` |\n| `[data-invalid]` | border | `$support-01` |\n| `[data-invalid]:focus` | color | `$support-01` |\n| `.bx--form-requirement` | text color | `$support-01` |\n| `.bx--label:disabled` | text color | `$disabled-02` |\n| `.bx--number:disabled` | background-color | `$disabled-01` |\n| `.bx--number input[type='number']:disabled` | text color | `$disabled-03` |\n\n**Active:** Number input should have a default number to start. The input should never be empty.\n\n**Help text:** Help text appears below the label when the input is active. Help text remains visible while the input is focused and disappears after focus away.\n\n**Error:** Error messages appear below the input field and are always present while invalid.\n\n**Disabled:** Disabled state should have a `.not-allowed` cursor on hover.\n\n## Typography\n\nNumber input labels should use sentence case, with only the first word in a phrase and any proper nouns capitalized.\n\n| Class | Font-size (px/rem) | Font-weight | Type token |\n| ---------------------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--label` | 12 / 0.75 | Regular / 400 | `$label-01` |\n| `.bx--number input[type='number']` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n| `.bx--form-requirement` | 12 / 0.75 | Regular / 400 | `$label-01` |\n\n## Structure\n\nThe height of a number input is always the same. The width however, varies based on content, layout and design. The caret icon can be found in the [icons](/guidelines/icons/library) library.\n\n| Class | Property | px / rem | Spacing token |\n| ---------------------------------- | --------------------------- | -------- | ------------- |\n| `.bx--label` | margin-bottom | 8 / 0.5 | `$spacing-03` |\n| `.bx--number input` | height | 40 / 2.5 | – |\n| `.bx--number input[type='number']` | padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--number__controls` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--number` | border-bottom | 1px | – |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a number input | px / rem\n\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/number-input/style.mdx"}}}}