Forms
Form tokens control the appearance of inputs across all states: default, hover, focus, error, and success. Apply them as a single compound class or reference individual CSS variables.
Use tokens in code
<input type="email" className="tpz-inpt-bg tpz-inpt-brdr-clr tpz-inpt-brdr-w tpz-inpt-brdr-sty tpz-inpt-bdr-r" placeholder="your@email.com" />
<input type="email" style={{ borderRadius: "var(--tpz-form-input-border-radius)", borderStyle: "var(--tpz-form-input-border-style)" }} placeholder="your@email.com" />
// background and border-color use classes instead (they have states). const formStyle = { borderRadius: "var(--tpz-form-input-border-radius)", borderWidth: "var(--tpz-form-input-border-width)", borderStyle: "var(--tpz-form-input-border-style)", }; <input type="email" style={formStyle} placeholder="your@email.com" />
Change values in engine
From your /dashboard on tapuz.io, open any project and click Manage tokens to launch the tapuz engine. Changes are saved automatically and take effect instantly. Undo/redo is available throughout the session, and the editor stays in sync in real time.
Change values via editor
Open the editor locally from any project page by typing /?tapuz-edit OR via the project slot in your /dashboard in tapuz.io and go to the Forms tab. Change any values and watch the preview in real time. You can undo/redo any change. When you are ready, click Save to make your changes permanent. For online editing read here.
Full form tokens
Input background
Input border color
Input border width
Input border style
Input border radius
Form error color
Form success color
Form messages border radius
Error message background color
Error message color
Success message background color
Success message color