Text Field

With label

<cc-text-field label="Full name"></cc-text-field>

With label, placeholder

<cc-text-field label="Full name" placeholder="Your full name"></cc-text-field>

With label, helper text

<cc-text-field label="Full name" helper-text="Your full name"></cc-text-field>

With label, helper text, error message

TODO

Required

TODO: add * after label

<cc-text-field label="Full name" required></cc-text-field>

Label Position

Side-aligned labels are beneficial in reducing the overall height of a form, particularly when vertical space is constrained or dealing with longer forms. Additionally, side-aligned labels are commonly employed when comparing numerical data.

TODO: make label adapt to top on narrow viewport.

<cc-text-field label="Full name" required></cc-text-field>