diff --git a/ivette/src/dome/renderer/controls/labels.tsx b/ivette/src/dome/renderer/controls/labels.tsx index 70e4e75c82bff0de3a22f2e6d50ea4eb71c90a77..f098e54ab8b2e4f8977b2332114875d273a8894c 100644 --- a/ivette/src/dome/renderer/controls/labels.tsx +++ b/ivette/src/dome/renderer/controls/labels.tsx @@ -61,6 +61,8 @@ export interface LabelProps { display?: boolean; /** Additional content of the `<label/>` element. */ children?: React.ReactNode; + /** Html tag `<input />` element. */ + htmlFor?: string; /** Click event callback. */ onClick?: (evt: React.MouseEvent) => void; /** Click event callback. */ @@ -93,6 +95,7 @@ const makeLabel = (className: string) => onClick={props.onClick} onDoubleClick={props.onDoubleClick} onContextMenu={props.onContextMenu} + htmlFor={props.htmlFor} > {props.icon && <Icon title={props.title} id={props.icon} className={iconClass} />} diff --git a/ivette/src/dome/renderer/layout/forms.tsx b/ivette/src/dome/renderer/layout/forms.tsx index 11cc26f70d86748cc4040ae17f56cf94f4da8a05..b40f4ae2d36fa5ffd11e9a9bb4c7118d1df691e3 100644 --- a/ivette/src/dome/renderer/layout/forms.tsx +++ b/ivette/src/dome/renderer/layout/forms.tsx @@ -44,6 +44,7 @@ import * as Dome from 'dome'; import * as Utils from 'dome/misc/utils'; import { SVG } from 'dome/controls/icons'; import { Checkbox, Radio, Select as SelectMenu } from 'dome/controls/buttons'; +import { Label } from 'dome/controls/labels'; export type FieldError = | undefined | boolean | string @@ -596,14 +597,13 @@ export function Field(props: GenericFieldProps): JSX.Element | null { return ( <> - <label + <Label className={cssLabel} style={{ top: offset }} htmlFor={htmlFor} title={title} - > - {label} - </label> + label={label} + /> <div className={cssField} title={title}> {children} {WARNING}