Skip to content

Latest commit

 

History

History
85 lines (64 loc) · 1.64 KB

text-field.mdx

File metadata and controls

85 lines (64 loc) · 1.64 KB
Raw
layout title
../../layouts/MainLayout.astro
Text Field

import ComponentPreview from "../../components/demo/ComponentPreview.svelte";

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>