Custom component

const createForm = createConfigForm(defaultComponents, defaultHelpers)

const customComponents = {
  Tabs: {
    component: Tabs,
    mapProps: {
      onChange: "onValueChange"
    }
  },
}

interface FormValues {
  type: string
}

const Form = createForm<FormValues, typeof customComponents>(customComponents)

render(() => {
  return (
    <Form
      onSubmit={(e) => console.log(e)}
      defaultValues={{ type: "corporate" }}
      theme="dark"
    >
      <Form.Value name="type" marginHorizontal="auto" />
      <Form.Tabs
        name="type"
        orientation="horizontal"
        flexDirection="column"
        width={400}
        height={150}
        overflow="hidden"
        borderColor="$borderColor"
        borderRadius="$4"
        borderWidth="$0.25"
        marginHorizontal="auto"
      >
        <Form.Tabs.List
          separator={<Separator vertical />}
          disablePassBorderRadius="bottom"
        >
          <Form.Tabs.Tab flex={1} value="corporate">
            <SizableText fontFamily="$body">Corporate</SizableText>
          </Form.Tabs.Tab>
          <Form.Tabs.Tab flex={1} value="major">
            <SizableText fontFamily="$body">Major</SizableText>
          </Tabs.Tab>
          <Form.Tabs.Tab flex={1} value="minor">
            <SizableText fontFamily="$body">minor</SizableText>
          </Tabs.Tab>
        </Form.Tabs.List>

        <Form.Tabs.Content
          value="corporate"
          alignItems="center"
          justifyContent="center"
          flex={1}
        >
          <SizableText>Tab Corporate</SizableText>
        </Form.Tabs.Content>
        <Form.Tabs.Content
          value="major"
          alignItems="center"
          justifyContent="center"
          flex={1}
        >
          <SizableText>Tab Major</SizableText>
        </Form.Tabs.Content>
        <Form.Tabs.Content
          value="minor"
          alignItems="center"
          justifyContent="center"
          flex={1}
        >
          <SizableText>Tab Minor</SizableText>
        </Form.Tabs.Content>
      </Form.Tabs>
    </Form>
  )
})