Style Chakra UI FormControl and label at application theme level

Question

Have been using Chakra for a while but I can not get my head around styling all my components, in this case, FormControl at a global level with the theme file.

For example if i want to add margin bottom to my FormControl and FormLabel elements I would add the components object to the theme file like so:

  components: {
    Form: {
      parts: ['control', 'label', 'errorMessage'],
      baseStyle: {
        control: {
          marginBottom: '2rem',
        },
        label: {
          marginBottom: '3rem',
        },
      },
    },
  },

But this has no effect on the base style of the rendered FormControl or FormLabel.

Could someone please help me with what I am doing wrong here?

score 2 · Answer 1 · answered Feb 10 '22 at 23:46

2

This worked for me:

import type { ComponentStyleConfig } from '@chakra-ui/theme';
import { extendTheme } from '@chakra-ui/react'


const Form: ComponentStyleConfig = {
  // The styles all button have in common
  parts: ['container'],
  baseStyle: {
    /// The container styles the FormControl
    container: {
      marginY: '20px'
    }
  },
}

const theme = extendTheme({
  components: {
    Form,
  },
})

answered Feb 10 '22 at 23:46

Mark

146
2
5

This worked for me, but I get a TypeScript error with the `Form` line because it does not exist within `ComponentStyleConfig`. were you able to resolve that? – Shea Hunter Belsky Sep 12 '22 at 18:08

score 2 · Answer 2 · answered Sep 23 '22 at 13:27

2

export const formStyles = {
  parts: ['container', 'requiredIndicator', 'helperText'],
  baseStyle: {
    container: {
      label: {
        fontSize: '14px',
        fontWeight: 'bold',
      },
    },
  },
};

Import it into your component styles

components: {
  Form: formStyles,
}

answered Sep 23 '22 at 13:27

pixelworlds

818
2
11
22

this worked! can you please attach the source/reference? – abhishake Jul 14 '23 at 13:26

score 1 · Answer 3 · answered Jul 27 '21 at 08:08

1

Having looked through the source code a bit more there is no parts array to FormControl as it is a Context rather than a component. Therefore, it cannot be styled!

answered Jul 27 '21 at 08:08

RyanP13

7,413
27
96
166

Style Chakra UI FormControl and label at application theme level

3 Answers3