Issues with component and required attribute.

[fluid quiver]

Hello. Lets say I have the following component. This component comes direct from jetstream.

@props(['disabled' => false])

<input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm']) !!}>

I use this component in my blade like this:

<x-input id="organization_name" type="text" required
                             min="1" max="128"
                             class="mt-1 block w-full placeholder-gray-400"
                             wire:model="org_name"
                             autocomplete="organization"
                             placeholder="Microsoft"/>

In the current situation the required field is present is or not. Only now I want to set the required attribute based on a condition. Laravel provides a @required tag so I used that as followed:

                    <x-input id="organization_name" type="text" @required($contains_reseller)
                             min="1" max="128"
                             class="mt-1 block w-full placeholder-gray-400"
                             wire:model="org_name"
                             autocomplete="organization"
                             placeholder="Microsoft"/>

When I do this, the code 'breaks' in which instead of displaying input in the HTML, it displays x-input, so it fails to render the component correctly. [pic]

How could I resolve this? I rather dont want to change too much since also Jetstream forms depend on the existing code.

[ashen sundial]

make the required a prop and do the required logic in the components template?

[fluid quiver]

Thanks for your reply. The thing is, is that the component comes from Jetstream and for example the login form has just required in there

If there is no other way to resolve this issue, I will do this of course

[static hinge]

Did you publish your jetstream components into your resource/views directory? If yes you could change the components and add the required prop with a default value for it.