For many components, a `label` attribute is available, which place a label in front of the according component. With the `labelLayout` you can adjust this label. The following examples use an input field to show, how this works.

Tag Library Documentation: | | |

If the `labelLayout` is not set, the value is 'flexLeft' by default.

<tc:in label="Input"/>

The value 'none' has the same effect as just not set the `label` attribute.

<tc:in label="Input" labelLayout="none"/>

The `labelLayout` is set to 'top'.

<tc:in label="Input" labelLayout="top"/> <tc:in label="Input" labelLayout="flowLeft"/> <tc:in label="Input" labelLayout="flowRight"/> <tc:in label="Input" labelLayout="flexLeft"/> <tc:in label="Input" labelLayout="flexRight"/>

The segment layout is divided in two columns. The right one is three times bigger. The 'segmentLeft' and 'segmentRight' put the label in the left or in the right column.

<tc:segmentLayout medium="3seg 9seg"> <tc:in label="Input" labelLayout="segmentLeft"/> <tc:in label="Input" labelLayout="segmentRight"/> </tc:segmentLayout>