Add Html::colorInput() and Input::color()

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 3.11.1 under development
 
 - New #249: Add `Tag::addStyle()` and `Tag::removeStyle()` methods (@vjik)
+- New #252: Add `Color` class, `Html::color()` and `Input::color()` methods (@razvbir)
 
 ## 3.11.0 June 10, 2025
 

README.md

@@ -19,7 +19,7 @@ The package provides various tools to help with dynamic server-side generation o
 
 - Tag classes `A`, `Address`, `Article`, `Aside`, `Audio`, `B`, `Body`, `Br`, `Button`, `Caption`, `Col`, `Colgroup`,
  `Datalist`, `Div`, `Em`, `Fieldset`, `Footer`, `Form`, `H1`, `H2`, `H3`, `H4`, `H5`, `H6`, `Header`, `Hr`, `Hgroup`,
- `Html`, `I`, `Img`, `Input` (and specialized `Checkbox`, `Radio`, `Range`, `File`), `Label`, `Legend`, `Li`, `Link`,
+ `Html`, `I`, `Img`, `Input` (and specialized `Checkbox`, `Radio`, `Range`, `File`, `Color`), `Label`, `Legend`, `Li`, `Link`,
  `Meta`, `Nav`, `Noscript`, `Ol`, `Optgroup`, `Option`, `P`, `Picture`, `Script`, `Section`, `Select`, `Small`,
  `Source`, `Span`, `Strong`, `Style`, `Table`, `Tbody`, `Td`, `Textarea`, `Tfoot`, `Th`, `Thead`, `Title`, `Tr`,
  `Track`, `Ul`, `Video`.
@@ -319,9 +319,10 @@ Overall the helper has the following method groups.
 - button
 - buttonInput
 - checkbox
-- file
+- color
 - datalist
 - fieldset
+- file
 - fileInput
 - form
 - hiddenInput
@@ -332,13 +333,14 @@ Overall the helper has the following method groups.
 - option
 - passwordInput
 - radio
+- range
 - resetButton
 - resetInput
 - select
 - submitButton
 - submitInput
-- textInput
 - textarea
+- textInput
 
 #### Table tags
 

src/Html.php

@@ -35,6 +35,7 @@
 use Yiisoft\Html\Tag\Img;
 use Yiisoft\Html\Tag\Input;
 use Yiisoft\Html\Tag\Input\Checkbox;
+use Yiisoft\Html\Tag\Input\Color;
 use Yiisoft\Html\Tag\Input\File;
 use Yiisoft\Html\Tag\Input\Radio;
 use Yiisoft\Html\Tag\Input\Range;
@@ -877,6 +878,24 @@
         return $attributes === [] ? $tag : $tag->addAttributes($attributes);
     }
 
+    /**
+     * Generates a color {@see Input} field.
+     *
+     * @see Input::color()
+     *
+     * @param string|null $name The name attribute.
+     * @param string|Stringable|null $value The value attribute.
+     * @param array $attributes The tag attributes in terms of name-value pairs.
+     */
+    public static function color(
+        ?string $name = null,
+        string|Stringable|null $value = null,
+        array $attributes = []
+    ): Color {
+        $tag = Input::color($name, $value);
+        return $attributes === [] ? $tag : $tag->addAttributes($attributes);
+    }
+
     /**
      * Generates a checkbox {@see Input}.
      *
@@ -1649,7 +1668,7 @@
      */
     public static function renderTagAttributes(array $attributes): string
     {
         if (count($attributes) > 1) {
             $sorted = [];
             foreach (self::ATTRIBUTE_ORDER as $name) {
                 if (isset($attributes[$name])) {
@@ -1673,11 +1692,11 @@
                     /** @psalm-var array<array-key, scalar[]|string|Stringable|null> $value */
                     foreach ($value as $n => $v) {
                         if (!isset($v)) {
                             continue;
                         }
                         $fullName = "$name-$n";
                         if (in_array($fullName, self::ATTRIBUTES_WITH_CONCATENATED_VALUES, true)) {
                             $html .= self::renderAttribute(
                                 $fullName,
                                 self::encodeAttribute(
                                     is_array($v) ? implode(' ', $v) : $v,
@@ -1803,7 +1822,7 @@
                 }
             } else {
                 /** @var string[] */
                 $classes = preg_split('/\s+/', (string) $options['class'], -1, PREG_SPLIT_NO_EMPTY);
                 $classes = array_diff($classes, (array) $class);
                 if (empty($classes)) {
                     unset($options['class']);
@@ -1956,7 +1975,7 @@
     public static function cssStyleToArray(string|Stringable $style): array
     {
         $result = [];
         foreach (explode(';', (string) $style) as $property) {
             $property = explode(':', $property);
             if (count($property) > 1) {
                 $result[trim($property[0])] = trim($property[1]);

src/Tag/Input.php

@@ -7,6 +7,7 @@
 use Stringable;
 use Yiisoft\Html\Tag\Base\InputTag;
 use Yiisoft\Html\Tag\Input\Checkbox;
+use Yiisoft\Html\Tag\Input\Color;
 use Yiisoft\Html\Tag\Input\File;
 use Yiisoft\Html\Tag\Input\Radio;
 use Yiisoft\Html\Tag\Input\Range;
@@ -149,6 +150,26 @@ public static function range(?string $name = null, float|int|string|Stringable|n
         return $input;
     }
 
+    /**
+     * Color.
+     *
+     * @link https://html.spec.whatwg.org/multipage/input.html#color-state-(type=color)
+     *
+     * @param string|null $name Name of the input.
+     * @param string|Stringable|null $value Value of the input.
+     */
+    public static function color(?string $name = null, string|Stringable|null $value = null): Color
+    {
+        $input = Color::tag();
+        if ($name !== null) {
+            $input = $input->name($name);
+        }
+        if ($value !== null) {
+            $input = $input->value($value);
+        }
+        return $input;
+    }
+
     /**
      * Button.
      *

src/Tag/Input/Color.php

@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Yiisoft\Html\Tag\Input;
+
+use Yiisoft\Html\Tag\Base\InputTag;
+
+/**
+ * @link https://html.spec.whatwg.org/multipage/input.html#color-state-(type=color)
+ */
+final class Color extends InputTag
+{
+    protected function prepareAttributes(): void
+    {
+        $this->attributes['type'] = 'color';
+    }
+}

tests/HtmlTest.php

@@ -382,6 +382,22 @@ public function testTextInput(): void
         );
     }
 
+    public function testColorInput(): void
+    {
+        $this->assertSame('<input type="color">', Html::color()->render());
+        $this->assertSame('<input type="color" name>', Html::color('')->render());
+        $this->assertSame('<input type="color" value>', Html::color(null, '')->render());
+        $this->assertSame('<input type="color" name="test">', Html::color('test')->render());
+        $this->assertSame(
+            '<input type="color" name="test" value="#ff0000">',
+            Html::color('test', '#ff0000')->render(),
+        );
+        $this->assertSame(
+            '<input type="color" name="test" value="#ff0000" required>',
+            Html::color('test', '#ff0000', ['required' => true])->render(),
+        );
+    }
+
     public function testHiddenInput(): void
     {
         $this->assertSame('<input type="hidden">', Html::hiddenInput()->render());

tests/Tag/Input/ColorTest.php

@@ -0,0 +1,22 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Yiisoft\Html\Tests\Tag\Input;
+
+use PHPUnit\Framework\TestCase;
+use Yiisoft\Html\Tag\Input\Color;
+
+final class ColorTest extends TestCase
+{
+    public function testBase(): void
+    {
+        $this->assertSame(
+            '<input type="color" name="color" value="#ff0000">',
+            Color::tag()
+                ->name('color')
+                ->value('#ff0000')
+                ->render()
+        );
+    }
+}

tests/Tag/InputTest.php

@@ -77,6 +77,14 @@ public function testRange(): void
         );
     }
 
+    public function testColor(): void
+    {
+        $this->assertSame(
+            '<input type="color" name="color" value="#ff0000">',
+            (string) Input::color('color', '#ff0000')
+        );
+    }
+
     public function testButton(): void
     {
         $this->assertSame(