​​SUI - Label
​​
​​We are not using Dropbox anymore for UX definitions
​​please check SUI Studio instead: https://sui-components.now.sh/
​​
​​Thanks
​​
​​The Label is the name of the associated field, that explains what is the about. It should be clear, concise and short.
​​It is positioned at the top or left side of the field, as needed or required for the responsive rules.
​​

​​Definition metadata

​​
​​Status of definition 
​​Complete
​​Definition version number
​​1.0
​​Category
​​Atom
​​Last Changelog update
​​21/11/2017 (see details in the Changelog section)
​​Owners
​​UX ​@David G​ , UI ​@Daniel P​ , FE 

​​Responsive & Visual

​​When a left side label is displayed on a small mobile screen, it must be relocated in top position.
​​Small mobile screens are determined by each vertical breakpoint.
​​
​​
 
User-uploaded image: label-structure.png
​​

​​Optional input

​​By default, (best practices) the form will only ask the user for the required fields (the mandatories). Therefore, only the optional fields will be marked.
​​The way to do this will be with the text "(optional)" next to the Label. We recommend using a different shade of the label color to separate it from the main label.
​​
​​
 
User-uploaded image: label-types.png
​​
​​

​​Accessibility

​​This component should support all the recommendations that appear on the Accessibility & Inclusion Guidelines. 
​​
​​For Input it is recommended to pay special attention to the following recommendations:
​​16. Text should always be displayed as text
​​

​​Links

​​SUI

​​Paste link here.

​​InfoJobs

​​Paste link here.

​​Fotocasa:

​​Paste link here.

​​Coches:

​​https://zpl.io/bzn16A3 (Version 1.0)
​​

​​Changelog

​​Here we will detail the changes, improvements or additions that we include in this documentation in future versions.
​​

​​Version 1.1

  • ​​Section X: Lorem ipsum
  • ​​Section X: Lorem ipsum
  • ​​Section X: Lorem ipsum
  • ​​Section X: Lorem ipsum