Form Input

Standardized design system values that define consistent visual properties across form components.

This documentation is a work in progress and may contain incomplete or outdated information. If you have any feedback or suggestions, please open an issue on GitHub.

Tokens

Standardized design system values that define consistent visual properties across form components. These tokens ensure visual coherence while enabling flexible theme customization and brand adaptation.

Theming Tokens

Design tokens organized by category with color-coded labels indicating their scope and impact level. Each token includes detailed specifications with values, usage guidelines, and customization options.

Legend:

Granular tokens that affect only this component.
Granular tokens that affect all form components.
Semantic tokens that affect the whole application.
Base tokens that affect the whole application.

Color

state:: idle

Component Token	Base Token
color.form-input.idle.bg-floating	{color.context.default.bg-even}
color.form-input.idle.border	{color.context.default.border-main}
color.form-input.idle.fg-active	{color.context.default.fg-main}
color.form-input.idle.fg-inactive	{color.context.default.fg-subtle}
color.form-input.idle.caret	{color.context.default.fg-main}
color.form-input.idle.help	{color.context.default.fg-main}

Typography

Component Token	Base Token
font.form-input.floating-label	{font.text.xsmall.normal}
font.form-input.floating-text	{font.text.medium.normal}
font.assist.medium	{font.text.medium.normal}

Sizing

Component Token	Base Token
size.form-input.medium-icon	{size.unit.20}
size.form-input.medium-caret	{size.unit.20}

Spacing

Component Token	Base Token
space.form-input.medium-padding-y	{space.unit.8}
space.form-input.medium-padding-x	{space.unit.12}
space.form-input.medium-gap	{space.unit.12}

Border Width

Component Token	Base Token
borderWidth.form-input.floating	{borderWidth.context.xlarge}
borderWidth.form-input.active	{borderWidth.context.xlarge}
borderWidth.form-input.inactive	{borderWidth.context.medium}

Border Radius

Component Token	Base Token
borderRadius.form-input.floating-blunt	{borderRadius.base.form-input.floating-blunt}
borderRadius.form-input.floating-sharp	{borderRadius.base.form-input.floating-sharp}

Asset

Component Token	Token Value
icon.form-input.select-caret	`<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentcolor' class='icon-chevron-down-solid' viewBox='0 0 24 24'><path d='M11.1016 17.8984L3.60156 10.3984C3.09375 9.92969 3.09375 9.10938 3.60156 8.64062C4.07031 8.13281 4.89062 8.13281 5.35938 8.64062L12 15.2422L18.6016 8.64062C19.0703 8.13281 19.8906 8.13281 20.3594 8.64062C20.8672 9.10938 20.8672 9.92969 20.3594 10.3984L12.8594 17.8984C12.3906 18.4062 11.5703 18.4062 11.1016 17.8984Z'/></svg>`
icon.form-input.feedback-valid	<svg width='24' height='24' viewBox='0 0 24 24' fill='currentcolor' xmlns='http://www.w3.org/2000/svg'><path d='M12 22C8.40625 22 5.125 20.125 3.32812 17C1.53125 13.9141 1.53125 10.125 3.32812 7C5.125 3.91406 8.40625 2 12 2C15.5547 2 18.8359 3.91406 20.6328 7C22.4297 10.125 22.4297 13.9141 20.6328 17C18.8359 20.125 15.5547 22 12 22ZM16.4141 10.1641H16.375C16.7656 9.8125 16.7656 9.22656 16.375 8.83594C16.0234 8.48438 15.4375 8.48438 15.0859 8.83594L10.75 13.2109L8.91406 11.375C8.52344 10.9844 7.9375 10.9844 7.58594 11.375C7.19531 11.7266 7.19531 12.3125 7.58594 12.6641L10.0859 15.1641C10.4375 15.5547 11.0234 15.5547 11.4141 15.1641L16.4141 10.1641Z' fill='currentcolor'/></svg>
icon.form-input.feedback-invalid	<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentcolor' class='icon-exclamation-circle-solid' viewBox='0 0 24 24'><path d='M12 22C8.40625 22 5.125 20.125 3.32812 17C1.53125 13.9141 1.53125 10.125 3.32812 7C5.125 3.91406 8.40625 2 12 2C15.5547 2 18.8359 3.91406 20.6328 7C22.4297 10.125 22.4297 13.9141 20.6328 17C18.8359 20.125 15.5547 22 12 22ZM12 7C11.4531 7 11.0625 7.42969 11.0625 7.9375V12.3125C11.0625 12.8594 11.4531 13.25 12 13.25C12.5078 13.25 12.9375 12.8594 12.9375 12.3125V7.9375C12.9375 7.42969 12.5078 7 12 7ZM10.75 15.75C10.75 16.4531 11.2969 17 12 17C12.6641 17 13.25 16.4531 13.25 15.75C13.25 15.0859 12.6641 14.5 12 14.5C11.2969 14.5 10.75 15.0859 10.75 15.75Z'/></svg>