Customizing Your Form

Styling a Form

Components uses a subset of styles and pseudo selectors that are activated depending on the field's state.

Styles Object Structure

{
  "<field_state>": {
    "<style>": "<style_value>",
    "<pseudo_selector>": {
      "<style>": "<style_value>"
    }
  }
}

Using Styles Example

const form = CanopyConnectComponents.form({
  carrierConfig,
  styles: {
    base: {
      color: "#fff",
      fontWeight: "500",
      fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
      fontSize: "16px",
      fontSmoothing: "antialiased",
      ":autofill": {
        color: "#fce883",
      },
      "::placeholder": {
        color: "#87BBFD",
      },
    },
    invalid: {
      color: "#FFC7EE",
    },
  },
});

Field States

State	Description
`base`	Used as a base for all states. Any state specific styles will override the base styles.
`complete`	Displayed when the input value passes the validation regex.
`empty`	Displayed when the input value is empty.
`invalid`	Displayed when the input value does not pass the validation regex.

Styles

Style	CSS Equivalent
`color`	color
`fontSize`	font-size
`fontFamily`	font-family
`fontWeight`	font-weight
`fontVariant`	font-variant
`fontStyle`	font-style
`lineHeight`	line-height
`padding`	padding
`letterSpacing`	letter-spacing
`textAlign`	text-align
`textDecoration`	text-decoration
`textTransform`	text-transform
`textShadow`	text-shadow
`fontSmoothing`	font-smooth

Pseudo Selectors

Pseudo Selector	Description
`:hover`	MDN \
`:focus`	MDN \
`::placeholder`	MDN \
`::selection`	MDN \
`:autofill`	MDN \
`::-ms-clear`	UDN \

Loading Custom Fonts

Components can load fonts that are used in your styles. Either by providing a font-face JS object(s) and/or css string(s) that contain @font-face's

Font-Face Object Structure

Param	Type	Description
font	object	Font object that requires a family and src to be defined.
font.family	string	MDN \
font.src	string	MDN \
[font.unicodeRange]	string	MDN \
[font.style]	string	MDN \
[font.variant]	string	MDN \
[font.stretch]	string	MDN \
[font.weight]	string	MDN \
[font.display]	string	MDN \

Font CSS Structure

Param	Type	Description
font	object	Font object that requires css to be defined.
font.css	string	CSS string that contains `@font-face`'s. Canopy Connect Components will parse and transform the CSS into Font-Face Objects.

Using Fonts Example

const form = CanopyConnectComponents.form({
  carrierConfig,
  fonts: [
    // Using font object
    {
      /** Roboto latin **/
      family: "Roboto",
      src: "url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2')",
      style: "normal",
      weight: "400",
      unicodeRange:
        "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
    },
    // Using CSS containing @font-face's
    {
      css: `
              /* Roboto latin-ext */
              @font-face {
                font-family: 'Roboto';
                font-style: normal;
                font-weight: 400;
                src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
                unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
              }
          `,
    },
  ],
  styles: {
    base: {
      fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
      fontSize: "16px",
      fontSmoothing: "antialiased",
    },
  },
});