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 \| Matches when the user interacts with an element with a pointing device, but does not necessarily activate it.
`:focus`	MDN \| Triggered when the user clicks or taps on an element or selects it with the keyboard's `Tab` key.
`::placeholder`	MDN \| Represents the placeholder text in the input.
`::selection`	MDN \| Applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
`:autofill`	MDN \| Matches when the input has its value autofilled by the browser. The class stops matching if the user edits the field.
`::-ms-clear`	UDN \| 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

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

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",
    },
  },
});