@iress-oss/ids-mcp-server 5.14.2 → 5.20.1

package/generated/docs/components_components-label-docs.md

@@ -0,0 +1,323 @@
+Label
+=====
+
+Overview
+--------
+
+Use the `IressLabel` component when building bespoke form inputs and `IressField` is too restrictive.
+
+[](./iframe.html?id=components-label--default)
+
+**This is a label**
+
+```
+
+<IressLabel\>
+  This is a label
+</IressLabel\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children\* | 
+Content to be displayed in the label. This can also include error messages to make sure it makes sense in this context.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This is a label"
+
+ |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+string
+
+
+
+ | \- | Set string |
+
+Examples
+--------
+
+### Required
+
+To indicate that an input is required, you may use the `required` prop to distinguish the label with an asterix.
+
+[](./iframe.html?id=components-label--required)
+
+**\*Required This is a label for a required input**
+
+```
+
+<IressLabel required\>
+  This is a label for a required input
+</IressLabel\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children\* | 
+Content to be displayed in the label. This can also include error messages to make sure it makes sense in this context.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This is a label for a required input"
+
+ |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+string
+
+
+
+ | \- | Set string |
+| required | 
+
+boolean
+
+
+
+ | \- | FalseTrue |
+
+### Optional
+
+Alternatively, if the majority of your form inputs are required, you may wish to distinguish only the optional inputs. For this, use the `optional` prop.
+
+The `optional` prop also accepts a string, in which case it will replace the default "(optional)" label, useful when you need to support translation.
+
+**Note:** that the `optional` and `required` props are mutually exclusive, with `required` taking precedence.
+
+[](./iframe.html?id=components-label--optional)
+
+**This is a label for an optional input(optional)**
+
+```
+
+<IressLabel optional\>
+  This is a label for an optional input
+</IressLabel\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children\* | 
+Content to be displayed in the label. This can also include error messages to make sure it makes sense in this context.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This is a label for an optional input"
+
+ |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+string
+
+
+
+ | \- | Set string |
+| optional | 
+
+boolean
+
+
+
+ | \- | FalseTrue |
+
+[](./iframe.html?id=components-label--optional-text)
+
+**This is a label for an optional input(选修的)**
+
+```
+
+<IressLabel optional\="(选修的)"\>
+  This is a label for an optional input
+</IressLabel\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children\* | 
+Content to be displayed in the label. This can also include error messages to make sure it makes sense in this context.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This is a label for an optional input"
+
+ |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+string
+
+
+
+ | \- | Set string |
+| optional | 
+
+string
+
+
+
+ | \- | (选修的) |
+
+### Hidden label
+
+Sometimes you may wish to have an input with no visible label, but to still wrap the input in a label for accessibility. In this case, set `hiddenLabel` to `true`.
+
+[](./iframe.html?id=components-label--hidden-label)
+
+**This text is visible to screen readers only**
+
+```
+
+<IressLabel hiddenLabel\>
+  This text is visible to screen readers only
+</IressLabel\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children\* | 
+Content to be displayed in the label. This can also include error messages to make sure it makes sense in this context.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This text is visible to screen readers only"
+
+ |
+| hiddenLabel | 
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+string
+
+
+
+ | \- | Set string |
+
+### Rich content
+
+You can render custom content into the label.
+
+[](./iframe.html?id=components-label--rich-content)
+
+**
+
+Home settings
+
+**
+
+```
+
+<IressLabel\>
+  <IressInline
+    gutter\="md"
+    verticalAlign\="middle"
+  \>
+    <IressIcon name\="home" />
+    Home settings    <IressIcon name\="cog" />
+  </IressInline\>
+</IressLabel\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children\* | 
+Content to be displayed in the label. This can also include error messages to make sure it makes sense in this context.
+
+ReactNode
+
+
+
+ | \- | \- |
+| hiddenLabel | 
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| htmlFor | 
+
+Used to connect it to the input element, it should be the input's id.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+
+string
+
+
+
+ | \- | Set string |
+
+Accessibility
+-------------
+
+Don't place interactive elements such as anchors or buttons inside the `IressLabel`. Doing so makes it difficult for people to activate the form input associated with the label.
+
+See the [MDN Label Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#accessibility_concerns) for more info.
+
+### Labelling non-interactive content
+
+`IressLabel` can be used to label non-interactive content, such as readonly data. In this case, do not provide a `htmlFor` prop. This will render the label using a `strong` tag instead of a `label` tag.