diff --git a/src/components/CheckboxField/CheckboxField.jsx b/src/components/CheckboxField/CheckboxField.jsx index 33d4fc18..8e531b10 100644 --- a/src/components/CheckboxField/CheckboxField.jsx +++ b/src/components/CheckboxField/CheckboxField.jsx @@ -114,7 +114,7 @@ CheckboxField.propTypes = { /** * Checkbox field label. */ - label: PropTypes.string.isRequired, + label: PropTypes.node.isRequired, /** * Placement of the label relative to the input. */ diff --git a/src/components/CheckboxField/README.md b/src/components/CheckboxField/README.md index 5b793c22..03abd789 100644 --- a/src/components/CheckboxField/README.md +++ b/src/components/CheckboxField/README.md @@ -45,6 +45,9 @@ See [API](#api) for all available options. send me any emails” which would mean that the user needs to turn the checkbox **on** in order for something **not** to happen. +- **Use text labels** unless it is necessary to wrap text label into + Popover-like to component to provide additional info about the field. + - Only make the CheckboxField's label invisible when there is **another visual clue** to guide users through toggling the input. diff --git a/src/components/FileInputField/FileInputField.jsx b/src/components/FileInputField/FileInputField.jsx index dfddfb36..103f1d15 100644 --- a/src/components/FileInputField/FileInputField.jsx +++ b/src/components/FileInputField/FileInputField.jsx @@ -123,9 +123,9 @@ FileInputField.propTypes = { */ isLabelVisible: PropTypes.bool, /** - * Text field label. + * File input field label. */ - label: PropTypes.string.isRequired, + label: PropTypes.node.isRequired, /** * Layout of the field. * diff --git a/src/components/FileInputField/README.md b/src/components/FileInputField/README.md index cc2ada30..be96559d 100644 --- a/src/components/FileInputField/README.md +++ b/src/components/FileInputField/README.md @@ -27,6 +27,9 @@ See [API](#api) for all available options. polite phrases like _Please attach your file here_. Short labels will help your users accomplish their task faster. +- **Use text labels** unless it is necessary to wrap text label into + Popover-like to component to provide additional info about the field. + - Only make the FileInputField's label invisible when there is **another visual clue** to guide users through filling the input. diff --git a/src/components/InputGroup/InputGroup.jsx b/src/components/InputGroup/InputGroup.jsx index e68eb9bd..191476b4 100644 --- a/src/components/InputGroup/InputGroup.jsx +++ b/src/components/InputGroup/InputGroup.jsx @@ -151,7 +151,7 @@ InputGroup.propTypes = { /** * Input group label. */ - label: PropTypes.string.isRequired, + label: PropTypes.node.isRequired, /** * Layout of the group. * diff --git a/src/components/Radio/README.md b/src/components/Radio/README.md index e0a9a382..62732904 100644 --- a/src/components/Radio/README.md +++ b/src/components/Radio/README.md @@ -56,6 +56,9 @@ See [API](#api) for all available options. polite phrases like _Please select your favourite fruit_. Short labels will help your users accomplish their task faster. +- **Use text labels** unless it is necessary to wrap text label into + Popover-like to component to provide additional info about the field. + - Only make the Radio's label invisible when there is **another visual clue** to guide users through filling the input. diff --git a/src/components/Radio/Radio.jsx b/src/components/Radio/Radio.jsx index b1fb853f..cdf21b33 100644 --- a/src/components/Radio/Radio.jsx +++ b/src/components/Radio/Radio.jsx @@ -157,7 +157,7 @@ Radio.propTypes = { /** * Label of the group of options. */ - label: PropTypes.string.isRequired, + label: PropTypes.node.isRequired, /** * Layout of the field. * diff --git a/src/components/SelectField/README.md b/src/components/SelectField/README.md index e1a5f23b..a53ec790 100644 --- a/src/components/SelectField/README.md +++ b/src/components/SelectField/README.md @@ -56,6 +56,9 @@ See [API](#api) for all available options. polite phrases like _Please select your favourite fruit_. Short labels will help your users accomplish their task faster. +- **Use text labels** unless it is necessary to wrap text label into + Popover-like to component to provide additional info about the field. + - Only make the SelectField's label invisible when there is **another visual clue** to guide users through filling the input. Using the first option as label is not recommended either — it disappears once user makes their choice. diff --git a/src/components/SelectField/SelectField.jsx b/src/components/SelectField/SelectField.jsx index d1cd1c34..6ff4d590 100644 --- a/src/components/SelectField/SelectField.jsx +++ b/src/components/SelectField/SelectField.jsx @@ -182,7 +182,7 @@ SelectField.propTypes = { /** * Select field label. */ - label: PropTypes.string.isRequired, + label: PropTypes.node.isRequired, /** * Layout of the field. * diff --git a/src/components/TextArea/README.md b/src/components/TextArea/README.md index 27055a87..24ac15a4 100644 --- a/src/components/TextArea/README.md +++ b/src/components/TextArea/README.md @@ -24,6 +24,9 @@ See [API](#api) for all available options. polite phrases like _Please enter your message_. Short labels will help your users accomplish their task faster. +- **Use text labels** unless it is necessary to wrap text label into + Popover-like to component to provide additional info about the field. + - Only make the TextArea's label invisible when there is **another visual clue** to guide users through filling the input. Using the first option as label is not recommended either — it disappears once user makes their choice. diff --git a/src/components/TextArea/TextArea.jsx b/src/components/TextArea/TextArea.jsx index f1c11ebe..3f8af742 100644 --- a/src/components/TextArea/TextArea.jsx +++ b/src/components/TextArea/TextArea.jsx @@ -132,7 +132,7 @@ TextArea.propTypes = { /** * Text field label. */ - label: PropTypes.string.isRequired, + label: PropTypes.node.isRequired, /** * Layout of the field. * diff --git a/src/components/TextField/README.md b/src/components/TextField/README.md index af547a89..24b1a8f7 100644 --- a/src/components/TextField/README.md +++ b/src/components/TextField/README.md @@ -36,6 +36,9 @@ See [API](#api) for all available options. polite phrases like _Please enter your first name_. Short labels will help your users accomplish their task faster. +- **Use text labels** unless it is necessary to wrap text label into + Popover-like to component to provide additional info about the field. + - Only make the TextField's label invisible when there is **another visual clue** to guide users through filling the input. diff --git a/src/components/TextField/TextField.jsx b/src/components/TextField/TextField.jsx index c3967256..f246405e 100644 --- a/src/components/TextField/TextField.jsx +++ b/src/components/TextField/TextField.jsx @@ -156,7 +156,7 @@ TextField.propTypes = { /** * Text field label. */ - label: PropTypes.string.isRequired, + label: PropTypes.node.isRequired, /** * Layout of the field. * diff --git a/src/components/Toggle/README.md b/src/components/Toggle/README.md index f51e512f..80505ca5 100644 --- a/src/components/Toggle/README.md +++ b/src/components/Toggle/README.md @@ -39,6 +39,9 @@ See [API](#api) for all available options. me any emails” which would mean that the user needs to turn the toggle **on** in order for something **not** to happen. +- **Use text labels** unless it is necessary to wrap text label into + Popover-like to component to provide additional info about the field. + - Only make the Toggle's label invisible when there is **another visual clue** to guide users through using the input. diff --git a/src/components/Toggle/Toggle.jsx b/src/components/Toggle/Toggle.jsx index 9af911a9..e5ddf27a 100644 --- a/src/components/Toggle/Toggle.jsx +++ b/src/components/Toggle/Toggle.jsx @@ -114,7 +114,7 @@ Toggle.propTypes = { /** * Toggle label. */ - label: PropTypes.string.isRequired, + label: PropTypes.node.isRequired, /** * Placement of the label relative to the input. */