render (h, { injections, data, slots, props }) {
    const theme = injections.$chakraTheme()
    const { sizes } = theme

    let pl = null
    let pr = null
    const height = inputSizes[props.size] && inputSizes[props.size].height

    const children = slots().default.filter(e => e.tag)

    const clones = children
      .map((vnode) => {
        if (vnode.tag.includes('CInputLeftElement')) {
          pl = sizes[height]
        }
        if (vnode.tag.includes('CInputRightElement')) {
          pr = sizes[height]
        }
        if (kebabify(vnode.componentOptions.tag) === 'c-input') {
          const clone = cloneVNode(vnode, h)
          return h(clone.componentOptions.Ctor, {
            ...clone.data,
            on: (clone.componentOptions.listeners || {}),
            props: {
              ...(clone.data.props || {}),
              ...clone.componentOptions.propsData,
              size: props.size
            },
            attrs: {
              borderRadius: clone.data.attrs.rounded,
              paddingLeft: clone.data.attrs.pl || pl,
              paddingRight: clone.data.attrs.pr || pr,
              ...clone.data.attrs
            }
          }, vnode.componentOptions.children)
        }

        const clone = cloneVNode(vnode, h)
        return h(clone.componentOptions.Ctor, {
          ...clone.data,
          ...(clone.componentOptions.listeners || {}),
          props: {
            ...(clone.data.props || {}),
            ...clone.componentOptions.propsData,
            size: props.size
          }
        }, vnode.componentOptions.children)
      })

    return h(CBox, {
      props: {
        as: props.as
      },
      attrs: {
        display: 'flex',
        position: 'relative',
        zIndex: 0,
        ...data.attrs,
        'data-chakra-component': 'CInputGroup'
      }
    }, clones)
  }
CInputElement component

allows grouping of input elements

@extends CBox
@see Docs https://vue.chakra-ui.com/input