wireui / wireui

TallStack UI components
https://v1.wireui.dev
MIT License
1.37k stars 166 forks source link

Ability to add required icon to labels that appears in a different color #774

Open carbtest opened 6 months ago

carbtest commented 6 months ago

I would like to be able to add an asterisk "*" in a red to label components

one option i could think of would be to not add the label in the component and add it manually, but it would be nice to be able to add "fieldname " and have the show in red

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like A clear and concise description of what you want to happen.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

jantbox commented 6 months ago

Here's another idea...

If you add the "required" attribute to a form component (input, select, ...), simply add a class (e.g., "required") to the associated label and manage the effect from CSS in this way:

.required:after {
    color: #d73925;
    content: '*';
    display: inline;
}

This is how I do it in some personal components based on Bootstrap 5:

@if($label)
    <label {!! $attributes->merge(['class' => 'form-label' . ($attributes->get('required') ? ' required' : '')]) !!}>
        {!! $label !!}
    </label>
@endif