From 00461c12fd59381d7b68902265203115fe974360 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Thu, 30 Mar 2023 17:43:19 -0400 Subject: [PATCH 01/14] Initial push, still WIP. --- apps/website/src/examples/Input.input.tsx | 14 +++++++ apps/website/src/examples/Input.main.tsx | 2 +- .../src/examples/Input.separatelabel.tsx | 23 +++++++++++ apps/website/src/examples/Input.sizes.tsx | 16 ++++++++ apps/website/src/examples/index.tsx | 3 ++ apps/website/src/pages/docs/input.mdx | 41 +++++++++++++++++-- 6 files changed, 94 insertions(+), 5 deletions(-) create mode 100644 apps/website/src/examples/Input.input.tsx create mode 100644 apps/website/src/examples/Input.separatelabel.tsx create mode 100644 apps/website/src/examples/Input.sizes.tsx diff --git a/apps/website/src/examples/Input.input.tsx b/apps/website/src/examples/Input.input.tsx new file mode 100644 index 00000000000..cab783fff06 --- /dev/null +++ b/apps/website/src/examples/Input.input.tsx @@ -0,0 +1,14 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { Input } from '@itwin/itwinui-react'; + +export default () => { + return ( + <> + + + ); +}; diff --git a/apps/website/src/examples/Input.main.tsx b/apps/website/src/examples/Input.main.tsx index c27c2f267b5..60e723f476c 100644 --- a/apps/website/src/examples/Input.main.tsx +++ b/apps/website/src/examples/Input.main.tsx @@ -8,7 +8,7 @@ import { LabeledInput } from '@itwin/itwinui-react'; export default () => { return ( <> - + ); }; diff --git a/apps/website/src/examples/Input.separatelabel.tsx b/apps/website/src/examples/Input.separatelabel.tsx new file mode 100644 index 00000000000..01d50f184bb --- /dev/null +++ b/apps/website/src/examples/Input.separatelabel.tsx @@ -0,0 +1,23 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { Input, Label, Flex } from '@itwin/itwinui-react'; + +export default () => { + return ( + + + + + + + + + + + + + ); +}; diff --git a/apps/website/src/examples/Input.sizes.tsx b/apps/website/src/examples/Input.sizes.tsx new file mode 100644 index 00000000000..3e27a46c684 --- /dev/null +++ b/apps/website/src/examples/Input.sizes.tsx @@ -0,0 +1,16 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { Input, Flex } from '@itwin/itwinui-react'; + +export default () => { + return ( + + + + + + ); +}; diff --git a/apps/website/src/examples/index.tsx b/apps/website/src/examples/index.tsx index de83e62db7a..4111c44e430 100644 --- a/apps/website/src/examples/index.tsx +++ b/apps/website/src/examples/index.tsx @@ -96,6 +96,9 @@ export { default as InformationPanelMainExample } from './InformationPanel.main' export { default as InputGroupMainExample } from './InputGroup.main'; export { default as InputMainExample } from './Input.main'; +export { default as InputInputExample } from './Input.input'; +export { default as InputSizesExample } from './Input.sizes'; +export { default as InputSeparateLabelExample } from './Input.separatelabel'; export { default as KeyboardMainExample } from './Keyboard.main'; diff --git a/apps/website/src/pages/docs/input.mdx b/apps/website/src/pages/docs/input.mdx index 9ddfb017995..fffd46df6b2 100644 --- a/apps/website/src/pages/docs/input.mdx +++ b/apps/website/src/pages/docs/input.mdx @@ -1,6 +1,6 @@ --- title: Input -description: Input let users enter and edit data. +description: An input lets users enter and edit data. layout: ./_layout.astro propsPath: '@itwin/itwinui-react/src/core/LabeledInput/LabeledInput.tsx' thumbnail: Input @@ -9,17 +9,50 @@ group: inputs import PropsTable from '~/components/PropsTable.astro'; import LiveExample from '~/components/LiveExample.astro'; -import Placeholder from '~/components/Placeholder.astro'; import * as AllExamples from '~/examples';

{frontmatter.description}

- - +Inputs are form elements meant to receive text input from the user. It is strongly recommended that each input have a label to indicate what info goes into the associated field. You can also display placeholder text within the field itself. This placeholder text is replaced by the actual text input by the user. Unlike the [textarea](textarea), which allow entry of a more sizable quantity of text, text fields are meant to receive info that is a few words long at most. + +## Variants + +### Input + + + + + +Use `` when all that is needed is a text field with no label, hint text, or status. In most scenarios we strongly recommend an input being paired with a label. + + + + + +You may want to place the label somewhere separated from the input. This can be useful when you want to create columns where the text labels are all right aligned. + +### Labeled input + + + + + +The labeled input bundles the label with the input and includes additional features as well. + +## Usage + +### Sizes + + + + + +There are three different sizes. + ## Props From 99f70834f784094eb7d0de4cfb1ce8458bcf5814 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Fri, 31 Mar 2023 15:48:38 -0400 Subject: [PATCH 02/14] Additional sections and demos. --- .../src/examples/ButtonGroup.input.tsx | 25 +++++++++++++++ apps/website/src/examples/Input.button.tsx | 25 +++++++++++++++ apps/website/src/examples/Input.inline.tsx | 19 +++++++++++ apps/website/src/examples/Input.status.tsx | 31 ++++++++++++++++++ apps/website/src/examples/index.tsx | 4 +++ apps/website/src/pages/docs/input.mdx | 32 ++++++++++++++++++- 6 files changed, 135 insertions(+), 1 deletion(-) create mode 100644 apps/website/src/examples/ButtonGroup.input.tsx create mode 100644 apps/website/src/examples/Input.button.tsx create mode 100644 apps/website/src/examples/Input.inline.tsx create mode 100644 apps/website/src/examples/Input.status.tsx diff --git a/apps/website/src/examples/ButtonGroup.input.tsx b/apps/website/src/examples/ButtonGroup.input.tsx new file mode 100644 index 00000000000..5bd0f8916f4 --- /dev/null +++ b/apps/website/src/examples/ButtonGroup.input.tsx @@ -0,0 +1,25 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { ButtonGroup, Button, Input, Label } from '@itwin/itwinui-react'; + +export default () => { + return ( +
+ + + + + +
+ ); +}; diff --git a/apps/website/src/examples/Input.button.tsx b/apps/website/src/examples/Input.button.tsx new file mode 100644 index 00000000000..c13b3406b34 --- /dev/null +++ b/apps/website/src/examples/Input.button.tsx @@ -0,0 +1,25 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { LabeledInput, IconButton } from '@itwin/itwinui-react'; +import { SvgCloseSmall } from '@itwin/itwinui-icons-react'; + +export default () => { + return ( + <> + + + + } + iconDisplayStyle='inline' + /> + + ); +}; diff --git a/apps/website/src/examples/Input.inline.tsx b/apps/website/src/examples/Input.inline.tsx new file mode 100644 index 00000000000..7e4051ee84f --- /dev/null +++ b/apps/website/src/examples/Input.inline.tsx @@ -0,0 +1,19 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { LabeledInput } from '@itwin/itwinui-react'; + +export default () => { + return ( + <> + + + ); +}; diff --git a/apps/website/src/examples/Input.status.tsx b/apps/website/src/examples/Input.status.tsx new file mode 100644 index 00000000000..f4f22040a0b --- /dev/null +++ b/apps/website/src/examples/Input.status.tsx @@ -0,0 +1,31 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { LabeledInput, Flex } from '@itwin/itwinui-react'; + +export default () => { + return ( + + + + + + ); +}; diff --git a/apps/website/src/examples/index.tsx b/apps/website/src/examples/index.tsx index 4111c44e430..32715fdd501 100644 --- a/apps/website/src/examples/index.tsx +++ b/apps/website/src/examples/index.tsx @@ -49,6 +49,7 @@ export { default as IdeasButtonMainExample } from './IdeasButton.main'; export { default as SplitButtonMainExample } from './SplitButton.main'; export { default as ButtonGroupMainExample } from './ButtonGroup.main'; +export { default as ButtonGroupInputExample } from './ButtonGroup.input'; export { default as CarouselMainExample } from './Carousel.main'; @@ -99,6 +100,9 @@ export { default as InputMainExample } from './Input.main'; export { default as InputInputExample } from './Input.input'; export { default as InputSizesExample } from './Input.sizes'; export { default as InputSeparateLabelExample } from './Input.separatelabel'; +export { default as InputInlineExample } from './Input.inline'; +export { default as InputStatusExample } from './Input.status'; +export { default as InputButtonExample } from './Input.button'; export { default as KeyboardMainExample } from './Keyboard.main'; diff --git a/apps/website/src/pages/docs/input.mdx b/apps/website/src/pages/docs/input.mdx index fffd46df6b2..165865e531b 100644 --- a/apps/website/src/pages/docs/input.mdx +++ b/apps/website/src/pages/docs/input.mdx @@ -17,7 +17,7 @@ import * as AllExamples from '~/examples'; -Inputs are form elements meant to receive text input from the user. It is strongly recommended that each input have a label to indicate what info goes into the associated field. You can also display placeholder text within the field itself. This placeholder text is replaced by the actual text input by the user. Unlike the [textarea](textarea), which allow entry of a more sizable quantity of text, text fields are meant to receive info that is a few words long at most. +Inputs are form elements meant to receive text input from the user. It is strongly recommended that each input have a label to indicate what info goes into the associated field. You can also display placeholder text within the field itself. This placeholder text is replaced by the actual text input by the user. Unlike the [textarea](textarea), which allow entry of a more sizable quantity of text, text fields are meant to receive info that is a few words long at most. Use inputs wherever you need the user to enter information too specific or personal to be listed within a [select](select). ## Variants @@ -53,6 +53,36 @@ The labeled input bundles the label with the input and includes additional featu There are three different sizes. +### Inline + + + + + +It’s possible to use inputs inline, in forms for example. The status displays a bit differently. For these textareas the status border remains the same, but the icon displays horizontally centered inside the area, at the far right. + +### Status + + + + + +Status messages are sometimes required for bringing warnings or errors to the user’s attention. For example, required fields that are left empty, spelling mistakes, or to notify a user the username they have entered is available. To achieve this, the bottom border gains the color of the alert level, and the corresponding icon and message displays right below the field, to ensure confusion between errors and text fields is unlikely. Note that the status is conveyed differently when [inline](#inline) styling is applied. + +### With other inputs + + + + + +You can pair an input and a button together. + + + + + +There are more complex options of pairing inputs with other various form components when using the [button group](buttongroup). + ## Props From 643b4b30e2a6fd7c6de3ed036951f84dcd9ec05b Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Fri, 31 Mar 2023 16:15:59 -0400 Subject: [PATCH 03/14] Update apps/website/src/pages/docs/input.mdx Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com> --- apps/website/src/pages/docs/input.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/input.mdx b/apps/website/src/pages/docs/input.mdx index 165865e531b..84bc4e87f3d 100644 --- a/apps/website/src/pages/docs/input.mdx +++ b/apps/website/src/pages/docs/input.mdx @@ -17,7 +17,7 @@ import * as AllExamples from '~/examples'; -Inputs are form elements meant to receive text input from the user. It is strongly recommended that each input have a label to indicate what info goes into the associated field. You can also display placeholder text within the field itself. This placeholder text is replaced by the actual text input by the user. Unlike the [textarea](textarea), which allow entry of a more sizable quantity of text, text fields are meant to receive info that is a few words long at most. Use inputs wherever you need the user to enter information too specific or personal to be listed within a [select](select). +Inputs are form elements meant to receive text input from the user. It is strongly recommended that each input have a label to indicate what info goes into the associated field. You can also display placeholder text within the field itself. This placeholder text is replaced by the actual text input by the user. Unlike the [textarea](textarea), which allow entry of a more sizable quantity of text, inputs are meant to receive info that is a few words long at most. Use inputs wherever you need the user to enter information too specific or personal to be listed within a [select](select). ## Variants From 875f9105318b7751b4daebe0c17368cc24f5f617 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Fri, 31 Mar 2023 16:16:45 -0400 Subject: [PATCH 04/14] Update apps/website/src/pages/docs/input.mdx Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com> --- apps/website/src/pages/docs/input.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/input.mdx b/apps/website/src/pages/docs/input.mdx index 84bc4e87f3d..adcb9031949 100644 --- a/apps/website/src/pages/docs/input.mdx +++ b/apps/website/src/pages/docs/input.mdx @@ -51,7 +51,7 @@ The labeled input bundles the label with the input and includes additional featu -There are three different sizes. +There are three different sizes, which can be specified using the `size` prop. ### Inline From 20703c8a9ba04e0d16fb9a89ed69314504f7eb0f Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Fri, 31 Mar 2023 16:22:05 -0400 Subject: [PATCH 05/14] Add `aria-label` to button. --- apps/website/src/examples/Input.button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/examples/Input.button.tsx b/apps/website/src/examples/Input.button.tsx index c13b3406b34..945fffe3688 100644 --- a/apps/website/src/examples/Input.button.tsx +++ b/apps/website/src/examples/Input.button.tsx @@ -14,7 +14,7 @@ export default () => { placeholder='1600 Pennsylvania Avenue, Washington, DC 20500' defaultValue='685 Stockton Dr, Exton, PA 19341' svgIcon={ - + } From a47e8bdbc33c8d4af0f42060793042d489f1d9b0 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Fri, 31 Mar 2023 16:43:51 -0400 Subject: [PATCH 06/14] Fake street name. --- apps/website/src/examples/Input.button.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/website/src/examples/Input.button.tsx b/apps/website/src/examples/Input.button.tsx index 945fffe3688..39cfc5e731c 100644 --- a/apps/website/src/examples/Input.button.tsx +++ b/apps/website/src/examples/Input.button.tsx @@ -10,11 +10,10 @@ export default () => { return ( <> + } From c39d7ef8f76122d556f1cb51e665594845d60747 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Thu, 6 Apr 2023 15:16:01 -0400 Subject: [PATCH 07/14] Shorter input value for button group demo. --- apps/website/src/examples/ButtonGroup.input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/examples/ButtonGroup.input.tsx b/apps/website/src/examples/ButtonGroup.input.tsx index 710837f3491..3952b69ba95 100644 --- a/apps/website/src/examples/ButtonGroup.input.tsx +++ b/apps/website/src/examples/ButtonGroup.input.tsx @@ -17,7 +17,7 @@ export default () => { - + From 2b8bcaadf78e1e93554808b0fd57c9f882febe07 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Thu, 6 Apr 2023 15:16:19 -0400 Subject: [PATCH 08/14] Replaced textarea with input in sloppy copy/paste. --- apps/website/src/pages/docs/input.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/input.mdx b/apps/website/src/pages/docs/input.mdx index adcb9031949..81481ba363d 100644 --- a/apps/website/src/pages/docs/input.mdx +++ b/apps/website/src/pages/docs/input.mdx @@ -59,7 +59,7 @@ There are three different sizes, which can be specified using the `size` prop. -It’s possible to use inputs inline, in forms for example. The status displays a bit differently. For these textareas the status border remains the same, but the icon displays horizontally centered inside the area, at the far right. +It’s possible to use inputs inline, in forms for example. The status displays a bit differently. For these inputs the status border remains the same, but the icon displays horizontally centered inside the area, at the far right. ### Status From da2fbd88afd14085104cc24124e7a649a524910e Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Thu, 6 Apr 2023 15:17:25 -0400 Subject: [PATCH 09/14] Status appears before inline. --- apps/website/src/pages/docs/input.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/website/src/pages/docs/input.mdx b/apps/website/src/pages/docs/input.mdx index 81481ba363d..d5ba4c6d876 100644 --- a/apps/website/src/pages/docs/input.mdx +++ b/apps/website/src/pages/docs/input.mdx @@ -53,14 +53,6 @@ The labeled input bundles the label with the input and includes additional featu There are three different sizes, which can be specified using the `size` prop. -### Inline - - - - - -It’s possible to use inputs inline, in forms for example. The status displays a bit differently. For these inputs the status border remains the same, but the icon displays horizontally centered inside the area, at the far right. - ### Status @@ -69,6 +61,14 @@ It’s possible to use inputs inline, in forms for example. The status displays Status messages are sometimes required for bringing warnings or errors to the user’s attention. For example, required fields that are left empty, spelling mistakes, or to notify a user the username they have entered is available. To achieve this, the bottom border gains the color of the alert level, and the corresponding icon and message displays right below the field, to ensure confusion between errors and text fields is unlikely. Note that the status is conveyed differently when [inline](#inline) styling is applied. +### Inline + + + + + +It’s possible to use inputs inline, in forms for example. The [status](#status) displays a bit differently. For these inputs the status border remains the same, but the icon displays horizontally centered inside the area, at the far right. + ### With other inputs From a05ba3d228d3e76400acfc0cf9c9a69d50525457 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Thu, 6 Apr 2023 15:39:13 -0400 Subject: [PATCH 10/14] Remove variant section, add standalone option. --- apps/website/src/examples/Input.input.tsx | 14 ---------- apps/website/src/examples/index.tsx | 1 - apps/website/src/pages/docs/input.mdx | 32 ++++++----------------- 3 files changed, 8 insertions(+), 39 deletions(-) delete mode 100644 apps/website/src/examples/Input.input.tsx diff --git a/apps/website/src/examples/Input.input.tsx b/apps/website/src/examples/Input.input.tsx deleted file mode 100644 index cab783fff06..00000000000 --- a/apps/website/src/examples/Input.input.tsx +++ /dev/null @@ -1,14 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -import * as React from 'react'; -import { Input } from '@itwin/itwinui-react'; - -export default () => { - return ( - <> - - - ); -}; diff --git a/apps/website/src/examples/index.tsx b/apps/website/src/examples/index.tsx index 9f86f521f47..d57eb0852a4 100644 --- a/apps/website/src/examples/index.tsx +++ b/apps/website/src/examples/index.tsx @@ -102,7 +102,6 @@ export { default as InformationPanelMainExample } from './InformationPanel.main' export { default as InputGroupMainExample } from './InputGroup.main'; export { default as InputMainExample } from './Input.main'; -export { default as InputInputExample } from './Input.input'; export { default as InputSizesExample } from './Input.sizes'; export { default as InputSeparateLabelExample } from './Input.separatelabel'; export { default as InputInlineExample } from './Input.inline'; diff --git a/apps/website/src/pages/docs/input.mdx b/apps/website/src/pages/docs/input.mdx index d5ba4c6d876..89b858830a6 100644 --- a/apps/website/src/pages/docs/input.mdx +++ b/apps/website/src/pages/docs/input.mdx @@ -19,30 +19,6 @@ import * as AllExamples from '~/examples'; Inputs are form elements meant to receive text input from the user. It is strongly recommended that each input have a label to indicate what info goes into the associated field. You can also display placeholder text within the field itself. This placeholder text is replaced by the actual text input by the user. Unlike the [textarea](textarea), which allow entry of a more sizable quantity of text, inputs are meant to receive info that is a few words long at most. Use inputs wherever you need the user to enter information too specific or personal to be listed within a [select](select). -## Variants - -### Input - - - - - -Use `` when all that is needed is a text field with no label, hint text, or status. In most scenarios we strongly recommend an input being paired with a label. - - - - - -You may want to place the label somewhere separated from the input. This can be useful when you want to create columns where the text labels are all right aligned. - -### Labeled input - - - - - -The labeled input bundles the label with the input and includes additional features as well. - ## Usage ### Sizes @@ -83,6 +59,14 @@ You can pair an input and a button together. There are more complex options of pairing inputs with other various form components when using the [button group](buttongroup). +### Standalone + + + + + +You may want to place the label somewhere separated from the input. This can be useful when you want to create columns where the text labels are all right aligned. Use `` in combination with ` -Status messages are sometimes required for bringing warnings or errors to the user’s attention. For example, required fields that are left empty, spelling mistakes, or to notify a user the username they have entered is available. To achieve this, the bottom border gains the color of the alert level, and the corresponding icon and message displays right below the field, to ensure confusion between errors and text fields is unlikely. Note that the status is conveyed differently when [inline](#inline) styling is applied. +Status messages are sometimes required for bringing warnings or errors to the user’s attention. For example, required fields that are left empty, spelling mistakes, or to notify a user the username they have entered is available. Note that the status is conveyed differently when [inline](#inline) styling is applied. ### Inline From 55147212471f644cd352f43c9e79e823f5608ac9 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Fri, 7 Apr 2023 11:28:49 -0400 Subject: [PATCH 13/14] Paragraph appears before demo. --- apps/website/src/pages/docs/input.mdx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/apps/website/src/pages/docs/input.mdx b/apps/website/src/pages/docs/input.mdx index 793d4ee397e..d52f23c1924 100644 --- a/apps/website/src/pages/docs/input.mdx +++ b/apps/website/src/pages/docs/input.mdx @@ -24,50 +24,50 @@ Inputs are form elements meant to receive text input from the user. It is strong ### Sizes +There are three different sizes, which can be specified using the `size` prop. + -There are three different sizes, which can be specified using the `size` prop. - ### Status +Status messages are sometimes required for bringing warnings or errors to the user’s attention. For example, required fields that are left empty, spelling mistakes, or to notify a user the username they have entered is available. Note that the status is conveyed differently when [inline](#inline) styling is applied. + -Status messages are sometimes required for bringing warnings or errors to the user’s attention. For example, required fields that are left empty, spelling mistakes, or to notify a user the username they have entered is available. Note that the status is conveyed differently when [inline](#inline) styling is applied. - ### Inline +It’s possible to use inputs inline, in forms for example. The [status](#status) displays a bit differently. For these inputs the status border remains the same, but the icon displays horizontally centered inside the area, at the far right. + -It’s possible to use inputs inline, in forms for example. The [status](#status) displays a bit differently. For these inputs the status border remains the same, but the icon displays horizontally centered inside the area, at the far right. - ### With other inputs +You can pair an input and a button together. + -You can pair an input and a button together. +There are more complex options of pairing inputs with other various form components when using the [button group](buttongroup). -There are more complex options of pairing inputs with other various form components when using the [button group](buttongroup). - ### Standalone +You may want to place the label somewhere separated from the input. This can be useful when you want to create columns where the text labels are all right aligned. Use `` in combination with `