feat(doc) Ajustes exemplo de radios

agenciafmd · Feb 20, 2024 · deb945d · deb945d
1 parent 8cd7795
commit deb945d
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 0 deletions.
diff --git a/docs/form.md b/docs/form.md
@@ -150,6 +150,114 @@
 
 @endverbatim
 
+## Radios
+
+@demo
+<div class="mb-3">
+    <x-form.group label="Radios">
+        <x-form.radio name="radio2" label="Option 01" value="option01"/>
+        <x-form.radio name="radio2" label="Option 02" value="option02"/>
+        <x-form.radio name="radio2" label="Option 03" value="option03" disabled/>
+    </x-form.group>
+</div>
+<div class="mb-3">
+    <x-form.group label="Radios">
+    <x-form.radio name="radio2" label="Option 01" value="option01" required/>
+    <x-form.radio name="radio2" label="Option 02" value="option02" required/>
+    <x-form.radio name="radio2" label="Option 03" value="option03" required/>
+ </x-form.group>
+</div>
+<div class="mb-3">
+    <x-form.group label="Radios">
+        <x-form.radio name="radio2" label="Option 01" value="option01"/>
+        <x-form.radio name="radio2" label="Option 02" value="option02"/>
+        <x-form.radio name="radio2" label="Option 03" value="option03" hint="Selecione uma opção"/>
+ </x-form.group>
+</div>
+@enddemo
+
+@verbatim
+
+```blade
+<div class="mb-3">
+    <x-form.group label="Radios">
+        <x-form.radio name="radio2" label="Option 01" value="option01"/>
+        <x-form.radio name="radio2" label="Option 02" value="option02"/>
+        <x-form.radio name="radio2" label="Option 03" value="option03" disabled/>
+    </x-form.group>
+</div>
+<div class="mb-3">
+    <x-form.group label="Radios">
+        <x-form.radio name="radio2" label="Option 01" value="option01" required/>
+        <x-form.radio name="radio2" label="Option 02" value="option02" required/>
+        <x-form.radio name="radio2" label="Option 03" value="option03" required/>
+    </x-form.group>
+</div>
+<div class="mb-3">
+    <x-form.group label="Radios">
+        <x-form.radio name="radio2" label="Option 01" value="option01"/>
+        <x-form.radio name="radio2" label="Option 02" value="option02"/>
+        <x-form.radio name="radio2" label="Option 03" value="option03" hint="Selecione uma opção"/>
+    </x-form.group>
+</div>
+```
+
+@endverbatim
+
+## Inline Radios
+
+@demo
+<div class="mb-3">
+    <x-form.group label="Radios inline">
+        <x-form.radio name="radio2" label="Option 01" value="option01" inline/>
+        <x-form.radio name="radio2" label="Option 02" value="option02" inline/>
+        <x-form.radio name="radio2" label="Option 03" value="option03" inline disabled/>
+    </x-form.group>
+</div>
+<div class="mb-3">
+    <x-form.group label="Radios inline">
+        <x-form.radio name="radio2" label="Option 01" value="option01" inline required/>
+        <x-form.radio name="radio2" label="Option 02" value="option02" inline required/>
+        <x-form.radio name="radio2" label="Option 03" value="option03" inline required/>
+    </x-form.group>
+</div>
+<div class="mb-3">
+    <x-form.group label="Radios inline">
+        <x-form.radio name="radio2" label="Option 01" value="option01" inline/>
+        <x-form.radio name="radio2" label="Option 02" value="option02" inline/>
+        <x-form.radio name="radio2" label="Option 03" value="option03" hint="Selecione uma opção" inline/>
+    </x-form.group>
+</div>
+@enddemo
+
+@verbatim
+
+```blade
+<div class="mb-3">
+    <x-form.group label="Radios inline">
+        <x-form.radio name="radio2" label="Option 01" value="option01" inline/>
+        <x-form.radio name="radio2" label="Option 02" value="option02" inline/>
+        <x-form.radio name="radio2" label="Option 03" value="option03" inline disabled/>
+    </x-form.group>
+</div>
+<div class="mb-3">
+    <x-form.group label="Radios inline">
+        <x-form.radio name="radio2" label="Option 01" value="option01" inline required/>
+        <x-form.radio name="radio2" label="Option 02" value="option02" inline required/>
+        <x-form.radio name="radio2" label="Option 03" value="option03" inline required/>
+    </x-form.group>
+</div>
+<div class="mb-3">
+    <x-form.group label="Radios inline">
+        <x-form.radio name="radio2" label="Option 01" value="option01" inline/>
+        <x-form.radio name="radio2" label="Option 02" value="option02" inline/>
+        <x-form.radio name="radio2" label="Option 03" value="option03" hint="Selecione uma opção" inline/>
+    </x-form.group>
+</div>
+```
+
+@endverbatim
+
 ## Checkboxes
 
 @demo

diff --git a/src/View/Components/Forms/Inputs/Radio.php b/src/View/Components/Forms/Inputs/Radio.php
@@ -12,6 +12,7 @@ class Radio extends Component
     public function __construct(
         public string $name = '',
         public string $label = '',
+        public string $hint = '',
         public bool $inline = false,
     ) {
         $this->uuid = '-' . str(serialize($this))
@@ -42,6 +43,8 @@ public function render(): string|View
                     <span class="form-check-label">{{ str($label)->lower()->ucfirst() }}</span>
                 @endif
             </label>
+            <x-form.error field="{{ $name }}"/>
+            <x-form.hint message="{{ $hint }}"/>
         HTML;
     }
 }