-
Notifications
You must be signed in to change notification settings - Fork 82
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support for multi-line labels in input fields #7500
Comments
Would be great to be able to do this both for individual fields and to all fields in a particular scope (e.g. globally, or in a particular form). This could be achieved by introducing a style property like For DX convenience (esp. Flow), we could also introduce a theme variant The former is not yet supported with custom properties on all major browsers, and the latter is quite hacky and leads to a strange API (e.g. So our options are:
|
Describe your motivation
Labels that are wider than the input are currently truncated with the overflow ellipsis. This ensures proper vertical alignment, but might not always be important, for example in single column forms.
These styles allow the label to wrap.
![image](https://private-user-images.githubusercontent.com/19607782/343749436-841316ed-2305-43cb-980e-3cac86cc274b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDIwODAsIm5iZiI6MTcyNDEwMTc4MCwicGF0aCI6Ii8xOTYwNzc4Mi8zNDM3NDk0MzYtODQxMzE2ZWQtMjMwNS00M2NiLTk4MGUtM2NhYzg2Y2MyNzRiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIxMDk0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTgwNjQzMjYzNWM1ZjBmNGFjMjMxODZlYTc3ODc2ZGYzYjg1MTQzMGMwOTg1MGJlMDdkMGE2MWE1ZTRlZTg3MWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.xawV6EcRIFTsX8Ai0HHZhBpr0sDNx7lqcB1BBR4lQA8)
Describe the solution you'd like
New theme variant for all input components
In addition it would be great to take possible tooltip indicator into account as well.
Describe alternatives you've considered
Helper text could be used to provide more more context in addition to short labels. Still this feels a bit artificial.
Additional context
Could also consider possibility to limit the number of rows with CSS line-clamp.
The text was updated successfully, but these errors were encountered: