Please add badge-color to flux:input, flux:radio.group, etc.

[lonebadger99]

This is a feature request to add badge-color to inputs so we can change the color of required or mandatory badges. Thanks!

[kyranb]

Was just about to start another discussion, but I too found myself reaching for this. Hopefully it's a quick and easy win to add to flux.

In the following example, when using a field component, it's not possible to override the color of a badge in a label.

<flux:field>
  <flux:label badge="Personal">Phone number</flux:label>

  <flux:input type="phone" placeholder="(555) 555-5555" mask="(999) 999-9999"  />

  <flux:error name="phone" />
</flux:field>

Having color as a prop would let us override this. For example in flux/label.blade.php:

@props([
    'badge' => null,
    'color' => null,
    'aside' => null,
])

@php
    $classes = Flux::classes()
        ->add('text-sm font-medium select-none')
        ->add('text-zinc-800 dark:text-white')
        ;
@endphp

<ui-label {{ $attributes->class($classes) }} data-flux-label>
    {{ $slot }}

    <?php if ($badge): ?>
        <span class="ml-1.5 text-xs px-1.5 py-1 rounded-[4px] aria-hidden="true"
              class="{{ $color ? $color : 'text-zinc-800/70 bg-zinc-800/5 dark:bg-white/10 dark:text-zinc-300' }}">
            {{ $badge }}
        </span>
    <?php endif; ?>

    <?php if ($aside): ?>
        <span class="ml-1.5 text-zinc-800/70 text-xs bg-zinc-800/5 px-1.5 py-1 rounded-[4px] dark:bg-white/10 dark:text-zinc-300" aria-hidden="true">
            {{ $aside }}
        </span>
    <?php endif; ?>
</ui-label>

[GuidoVeltmaat]

Could you not make use of the flux:badge like this?

<flux:field>
   <flux:label>Phone number
      <flux:badge color="lime">Personal</flux:badge>
   </flux:label>

   <flux:input type="phone" placeholder="(555) 555-5555" mask="(999) 999-9999"  />

   <flux:error name="phone" />
</flux:field>

[marchershey]

Could you not make use of the flux:badge like this?

<flux:field>
   <flux:label>Phone number
      <flux:badge color="lime">Personal</flux:badge>
   </flux:label>

   <flux:input type="phone" placeholder="(555) 555-5555" mask="(999) 999-9999"  />

   <flux:error name="phone" />
</flux:field>

Yup!

[kyledoesdev]

it would also be cool to have badge-variant added to nav item to have normal/solid badges on nav items