<script>
    let { field } = $props();
</script>

<fieldset>
    <label>
        <input
            bind:checked={field.props.required}
            type="checkbox"
            role="switch"
        />
        Required
    </label>
    <label>
        <input
            bind:checked={field.props.readonly}
            type="checkbox"
            role="switch"
        />
        Readonly
    </label>
    <label>
        <input
            bind:checked={field.props.hidden}
            type="checkbox"
            role="switch"
        />
        Hidden
    </label>
</fieldset>
<fieldset>
    <label>
        Default
        <input bind:value={field.props.default} />
    </label>
    <label>
        Help text
        <input bind:value={field.props.help} />
    </label>
    <label>
        Min characters
        <input type="number" bind:value={field.props.min} />
    </label>

    <label>
        Max characters
        <input type="number" bind:value={field.props.max} />
    </label>
</fieldset>
