FormControl

FormControl is a component used to group form elements with label, helper message, error message, etc.

Theming

The FormControl is a multi part component.

If you want to change the style of the component, please check here.

export const FormControl: ComponentMultiStyle<"FormControl"> = {
  baseStyle: {
    container: {
      position: "relative",
      w: "100%",
    },
    errorMessage: {
      color: ["danger.500", "danger.400"],
      display: "block",
      fontSize: "sm",
      mt: "2",
    },
    helperMessage: {
      color: ["blackAlpha.700", "whiteAlpha.600"],
      display: "block",
      fontSize: "sm",
      mt: "2",
    },
    label: {
      fontSize: "md",
      fontWeight: "medium",
      mb: "2",
      me: "3",
      opacity: 1,
      transitionDuration: "normal",
      transitionProperty: "common",
      _disabled: {
        opacity: 0.4,
      },
    },
    requiredIndicator: {
      color: ["danger.500", "danger.400"],
      ms: "1",
    },
  },
}

Copied!

Edit this page on GitHub

PreviousForms NextFieldset