Styling
Styling from the Dashboard
Generally, you can customize the form's texts and colors from Dashboard > Project > Design.
Adding your own CSS
This is now available with signInWithOTP
and signInWithLink
To style the form, add field Styles
to the configuration and specify the CSS styling for each element. The styling accepts a JavaScript object with camelCased
properties rather than a CSS string, for example:
You can find the element name by checking the class
of the element you want to style. For reference, here are the elements that you can modify:
form_container
loadingImg
input_label
verification_label
pin_row
pin_input
verification_subtitle
error
input_row_container
input_row
input_text_container_default
input_text
input_text_container
country_code
country_code_blank
input_text_p
check_input
Available Fonts
Not all fonts are available because the fonts are not loaded inside Cotter's form. These are the list of fonts that you can use:
Roboto
Lato
Overpass
Open Sans
Akkurat
Akkurat-Bold
Poppins
Inter
Last updated