<script setup>
import { list, q } from "#imports";
let { listRole: roles } = await q({
  listRole: {
    name: true
  }
});
roles = roles.map((role) => {
  return {
    label: role.name,
    value: role.name
  };
});
</script>

<template>
    <l-page>
        <FormKit type="l-form" :value="{ childs: ['Users'] }">
            <FormKit type="l-input" name="name" label="Name" validation="required" />
            <FormKit type="l-option-group" :options="roles" name="childs" label="Child" />
        </FormKit>

    </l-page>
</template>
