Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
<label for="jeedtfmtmgayojjzpzyjqabgpqbxgt" class="text-sm flex font-medium text-red-700 dark:text-red-500">Full Name<span data-popover-placement="right" data-popover-target="ymwbwmlwus_target" class="px-2 text-slate-400"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="w-4 h-4">
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 0 1-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 0 1-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 0 1-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584ZM12 18a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd"></path>
</svg>
</span></label>
<div id="ymwbwmlwus_target" data-popover="data-popover" role="tooltip" class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 w-48">
<div class="px-3 py-2">Helper popover</div>
<div data-popper-arrow="true"></div>
</div>
<input name="full_name" placeholder="Enter your full name" type="text" class="mt-1 block w-full border disabled:cursor-not-allowed disabled:opacity-50 disabled:text-slate-900 disabled:dark:text-slate-400 disabled:bg-slate-100 disabled:dark:bg-slate-700 focus:ring-red-500 bg-red-50 dark:bg-red-100 placeholder-red-700 border-red-500 focus:border-red-500 dark:border-red-400 p-2.5 text-sm rounded-lg shadow-xs dark:shadow-xs-light "></input>
<p class="text-sm text-red-600 dark:text-red-500">Helper text</p>
1
2
3
4
5
6
7
8
9
render(Fluxbit::Form::TextInputComponent.new(
label: "Full Name",
name: "full_name",
placeholder: "Enter your full name",
helper_text: "Helper text",
helper_popover: "Helper popover",
color: :failure,
shadow: true
))