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 only classes. 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 token values using the Engine
Every project has its own Tokens Engine. Changes are saved to draft automatically and take effect instantly. Use Publish Live to display the changes in the deployed site.
Read more about the engine
Change token values using the Editor
In the editor, open the Forms panel to set input style in every state and validation styles including validation messages. You can set, for example, one error message style for all your forms across your entire project by simply choosing a style and clicking Publish. Read more about the editors here:Live Editor|Local Editor
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