Form Component

const fields: Fields[] = [
  {
    key: 'name',
    label: 'Name',
    type: 'text',
    fieldOptions: {
      required: true,
      tooltip: 'Your name',
    },
  },
  {
    key: 'email',
    label: 'Email',
    type: 'email',
    fieldOptions: {
      tooltip: 'Your email address',
    },
  },
  {
    key: 'address',
    label: 'Address',
    type: 'group',
    groupOptions: {
      collapsible: true,
      tooltip: 'Your address',
    },
    fieldOptions: {
      tooltip: 'Group for address',
    },
    arrayOptions: {
      defaultInstances: 1,
      max: 4,
      min: 1,
    },
    children: [
      {
        key: 'Details',
        label: 'Details',
        type: 'array',
        fieldOptions: {
          tooltip: 'Details for address',
        },
        arrayOptions: {
          defaultInstances: 0,
          max: 2,
        },
        children: [
          {
            key: 'houseNumber',
            label: 'House Number',
            type: 'text',
            fieldOptions: {
              required: true,
              tooltip: 'Your house number',
            },
          },
          {
            key: 'street',
            label: 'Street',
            type: 'text',
            fieldOptions: {
              default: '1601 Harrier Ln',
              required: false,
              tooltip: 'Your street name',
            },
          },
          {
            key: 'city',
            label: 'City',
            type: 'text',
            fieldOptions: {
              required: true,
              tooltip: 'Your city name',
            },
          },
          {
            key: 'isPrimary',
            label: 'Primary',
            type: 'switch',
            fieldOptions: {
              default: true,
              tooltip: 'Is this your primary residence?',
            },
          },
        ],
      },
    ],
  },
  {
    key: '18+',
    label: '18+',
    type: 'switch',
    fieldOptions: {
      tooltip: 'Are you over 18 years old?',
    },
  },
  {
    key: 'id',
    label: 'ID',
    type: 'file',
    fieldOptions: {
      required: true,
      tooltip: 'Your ID document',
    },
  },
];

.styled-form-example::part(form) {
  display: flex;
  flex-direction: column;
}
 
.styled-form-example::part(submit-button) {
  margin-top: 20px;
  background-color: #4caf50;
  border: none;
  color: white;
  border-radius: 10px;
}
 
.styled-form-example::part(field) {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
 
.styled-form-example::part(array-header) {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
 
.styled-form-example::part(array-label) {
  font-weight: bold;
}
 
.styled-form-example::part(array-item) {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
 
.styled-form-example::part(add-button) {
  color: #4caf50;
  border: none;
  border-radius: 10px;
}
 
.styled-form-example::part(remove-button) {
  color: #f44336;
  margin-bottom: -12px;
}
 
.styled-form-example::part(label) {
  font-size: 0.85rem;
}
 
.styled-form-example::part(switch) {
  background-color: #fff;
  height: 20px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px 1px #ccc;
}
 
.styled-form-example::part(switch-thumb) {
  background-color: #4caf50;
  height: 20px;
  width: 20px;
  border: 0px;
}
 
.styled-form-example::part(input-base) {
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 1px 1px 1px 1px #ccc;
}
 
.styled-form-example::part(input) {
  font-size: small;
}
 
.styled-form-example::part(input):focus {
  outline: none;
  background-color: #f5f5f5;
}
 
.styled-form-example::part(input)::file-selector-button {
  background-color: #fff;
  color: #4caf50;
  font-weight: bold;
}