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

StateDescription
baseUsed as a base for all states. Any state specific styles will override the base styles.
completeDisplayed when the input value passes the validation regex.
emptyDisplayed when the input value is empty.
invalidDisplayed when the input value does not pass the validation regex.

Styles

StyleCSS Equivalent
colorcolor
fontSizefont-size
fontFamilyfont-family
fontWeightfont-weight
fontVariantfont-variant
fontStylefont-style
lineHeightline-height
paddingpadding
letterSpacingletter-spacing
textAligntext-align
textDecorationtext-decoration
textTransformtext-transform
textShadowtext-shadow
fontSmoothingfont-smooth

Pseudo Selectors

Pseudo SelectorDescription
:hoverMDN | Matches when the user interacts with an element with a pointing device, but does not necessarily activate it.
:focusMDN | Triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.
::placeholderMDN | Represents the placeholder text in the input.
::selectionMDN | Applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
:autofillMDN | Matches when the input has its value autofilled by the browser. The class stops matching if the user edits the field.
::-ms-clearUDN | Creates a clear button at the edge of type=text input that clears the current value.

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

ParamTypeDescription
fontobjectFont object that requires a family and src to be defined.
font.familystringMDN | Specifies a font family name that can be used to match against this font face when styling elements.
font.srcstringMDN | Specifies the resource containing font data.
[font.unicodeRange]stringMDN | Sets the specific range of characters to be used from a font.
[font.style]stringMDN | Allows authors to specify font styles for the font.
[font.variant]stringMDN | Allows you to set all the font variants for a font.
[font.stretch]stringMDN | Allows authors to specify a normal, condensed, or expanded face for the font.
[font.weight]stringMDN | Allows authors to specify font weights for the font.
[font.display]stringMDN | Determines how a font face is displayed based on whether and when it is downloaded and ready to use.

Font CSS Structure

ParamTypeDescription
fontobjectFont object that requires css to be defined.
font.cssstringCSS 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",
    },
  },
});