opened
manlamcheng
username_0
#### Describe the feature that you would like added

<!-- fill this out -->

#### What component or utility would this be added to

<!-- fill this out -->

#### Have you discussed this feature with our team, and if so, who

<!-- fill this out -->

#### Additional context/screenshots

<!-- fill this out -->
TextFied label on side
issue
created
manlamcheng
username_0
the default label of the Textfield is on the top of the input, is there a setting or custom style that can move it to the left hand side of the textbox? (underlined prop can move it to the side, but doesn't show the input as a textbox)

Thank you !
comment
created
aneeshack4
username_1
@username_0 Please fill out the template fully to give us the complete picture of your scenario. I believe you can use `onRenderLabel` to provide a "custom renderer for the label. If you don't call defaultRender, ensure that you give your custom-rendered label an id and that you set the textfield's aria-labelledby prop to that id." https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield
comment
created
manlamcheng
username_0
Hello, sorry for the late response

it's not a issue but rather a feature/setting that I think it should have

1. Which Fabric component and which version of the Fabric component is causing the issue
    https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield

2. What behaviors and attributes are missing or incorrect
    from all the sample code on the above page, the label are all on top of the text box, except the one for Underlined and borderless TextFields. the label is on the left side of the text box. I was expecting that it should have a attribute that can change the label position, something like: labelPosition: top/left/right. because it's very common for user to want to put label differently on the same form. so it should be easy to change.

Perhaps onRenderLabel  as you suggested above may help, I haven't tried it yet. maybe you can provide some code example ?

Thank you !!
comment
created
aneeshack4
username_1
@username_0 It seems that we do have `labelPosition` on some components like [SpinButton](https://github.com/microsoft/fluentui/blob/master/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts#L104). I think it's a reasonable ask to add it to TextField so I'll add this to the backlog for review. Currently swamped with an increase in incoming issues so I don't have time to make a code sample For now, I'd suggest using our [`Position` utility](https://github.com/microsoft/fluentui/blob/master/packages/office-ui-fabric-react/src/utilities/positioning/positioning.types.ts#L13) - see how SpinButton uses `Position.button` to [handle](https://github.com/microsoft/fluentui/blob/master/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.classNames.ts#L77) this. The [styles.ts file](https://github.com/microsoft/fluentui/blob/master/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts#L161) has the exact css for positioning the label start, end, top, bottom.
comment
closed
manlamcheng
username_0
issue
created
manlamcheng
username_0
Thank you very much !
comment