How to get rid of 3 STATES of <CheckboxField/> and make it down to 2 states?

[kausik10]

Hi, I have a boolean field defined in db as:

    isFileApproved = c.boolColumn();

And I've used it as:

                    <CheckboxField field="isFileApproved" label="File Approved Flag" />

However, as the screenshot shows, I have a blue interface with - sign showing for this empty field.

I want to get rid of this intermediate field and only display the tick and empty checkbox.

What I've tried so far?

• Explicitly set to false if no defaultValue as in this case, it's null

<FormCheckbox
                        field={field}
                        isNonbearing={isNonbearing}
                        defaultValue={defaultValue ?? false}
                    >

• Inside the FormCheckbox handled the null value conditions to get rid of it like

<SlotInput
			ref={it => {
				(ref as any).current = checkboxRef
				setCheckboxRef(it)
			}}
			type="checkbox"
			checked={!!accessor.value}
			data-state={value ? 'checked' : 'unchecked'}
			data-invalid={dataAttribute(hasErrors)}
			data-dirty={dataAttribute(dirty)}
			id={id ? `${id}-input` : undefined}
			onFocus={onFocus}
			onBlur={onBlur}
			onChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {
				accessorGetter().updateValue(e.target.checked)
			}, [accessorGetter])}
			{...props}
		/>       

useEffect(() => {
		if (!checkboxRef) {
			return
		}
		checkboxRef.indeterminate = false
	}, [checkboxRef, ref, value])             

	const resolvedDefaultValue = defaultValue !== undefined ? defaultValue : (node.field.defaultValue ?? false))

However, it seems not to be working at all.
My requirements are:

• Remove the intermediate state with - sign.
• Only show tick or empty checkbox
• Remove this default blue color

Is the problem from the above or from

export const CheckboxInput = uic('input', {
	baseClass: 'w-4 h-4',
	defaultProps: {
		type: 'checkbox',
	},
})

Thank you!

[jonasnobile]

Hi! The behavior you're seeing (the blue checkbox with a - sign) happens when the checkbox is in an indeterminate state, which usually corresponds to a null value in your database.

There are a couple of ways to fix this depending on whether you want to keep isFileApproved nullable in your schema:

---

Option 1: Update the database column to be non-nullable

If isFileApproved should always be either true or false, update your column definition to:

isFileApproved = c.boolColumn().notNull().default(false)

This will ensure the field is never null, preventing the indeterminate UI state.

---

Option 2: Keep the column nullable, but handle null in the UI

If you want to keep it nullable in the database, you need to ensure your checkbox never receives null. You can provide a defaultValue explicitly:

<CheckboxField field="isFileApproved" defaultValue={false} />

[kausik10]

Hi! Sorry, I got caught up with things and didn't realize that I hadn't mentioned the crucial detail.
I tried changing other things because

<CheckboxField field="isFileApproved" defaultValue={false} />

didn't workout.

I realize that at some place in codebase these fields are not set. It's in the gallery view for the documents.

I'll look into it and let you know with the updates.

Thank you!

[kausik10]

Hi, I have a question.

              <HasRoles roles={[""......]}
                   <CheckboxField
                        field="isFileApproved"
                        defaultValue={false}
                        label="Schváleno"
                    />
                </HasRoles>
                
            </>
        );
    },
    (_, env) => {
        return (
            <>
            /// Prviously
                <Field
                    field="isFileApproved"
                    defaultValue={false}
                    label="Schváleno"
                />
              /// Amended to
                <CheckboxField
                    field="isFileApproved"
                    defaultValue={false}
                    label="Schváleno"
                />
              
            </>
        );
    }

In the static render, I had <Field> and default value was not set, I provided the complete text CheckboxField, and it was set.
I'm a little confused about static rendering in the context. I thought it was something similar to lazy loading of values from nested database structures
(eg: files.folder.name) but with advanced functionality.

Thank you!

[jonasnobile]

Static render is just a way for Contember bindings to describe the component tree so the system can build a complete query and load all necessary data ahead of time.

The <Field /> component is a low-level primitive, while <CheckboxField /> is a higher-level abstraction that uses <Field /> in static reader. That means when using directly in a static render — and providing equivalent props — it should behave identically to .

I tested this with the latest Contember and UI library versions, and the static rendering works as expected in both cases.