@public-ui/components 1.3.3-rc.2 → 1.4.0-rc.1

package/doc/input-checkbox.md

@@ -8,15 +8,19 @@ Eine optische Alternative zur Standard-Checkbox stellt die Ausgabe als **_Switch
 
 ### Code
 
-```tsx
-<kol-input-checkbox _id="meine_checkbox" _name="meine_checkbox">
-	* Ich stimme der <kol-link>Datenschutzerklärung zu</kol-link>
-</kol-input-checkbox>
+```html
+<kol-input-checkbox _id="checkbox">Ich stimme der <kol-link _href="#" _label="Datenschutzerklärung" _target="document"></kol-link> zu.</kol-input-checkbox>
+<kol-input-checkbox _id="switch" _variant="switch">Geburtsdatum anzeigen?</kol-input-checkbox>
+<kol-input-checkbox _checked _id="button" _variant="button">Schalter aktiviert</kol-input-checkbox>
+<kol-input-checkbox _id="button" _variant="button">Schalter deaktiviert</kol-input-checkbox>
 ```
 
 ### Beispiel
 
-<kol-input-checkbox _id="meine_checkbox" _name="meine_checkbox">\* Ich stimme der <kol-link>Datenschutzerklärung zu</kol-link></kol-input-checkbox>
+<kol-input-checkbox _id="checkbox">Ich stimme der <kol-link _href="#" _label="Datenschutzerklärung" _target="document"></kol-link> zu.</kol-input-checkbox>
+<kol-input-checkbox _id="switch" _variant="switch">Geburtsdatum anzeigen?</kol-input-checkbox>
+<kol-input-checkbox _checked _id="button" _variant="button">Schalter aktiviert</kol-input-checkbox>
+<kol-input-checkbox _id="button" _variant="button">Schalter deaktiviert</kol-input-checkbox>
 
 ## Verwendung
 
@@ -51,25 +55,26 @@ Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenread
 
 ## Properties
 
-| Property           | Attribute        | Description                                                                                                                                       | Type                                                                                     | Default      |
-| ------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------ |
-| `_accessKey`       | `_access-key`    | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.                                                              | `string \| undefined`                                                                    | `undefined`  |
-| `_alert`           | `_alert`         | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.                                                                          | `boolean \| undefined`                                                                   | `true`       |
-| `_checked`         | `_checked`       | Gibt an, ob die Checkbox ausgewählt ist oder nicht.                                                                                               | `boolean \| undefined`                                                                   | `false`      |
-| `_disabled`        | `_disabled`      | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.                                                                                       | `boolean \| undefined`                                                                   | `undefined`  |
-| `_error`           | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                                                          | `string \| undefined`                                                                    | `undefined`  |
-| `_hideLabel`       | `_hide-label`    | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.                                                                                     | `boolean \| undefined`                                                                   | `undefined`  |
-| `_hint`            | `_hint`          | Gibt den Text für eine Hinweistext an.                                                                                                            | `string \| undefined`                                                                    | `''`         |
-| `_id` _(required)_ | `_id`            | Gibt die technische ID des Eingabefeldes an.                                                                                                      | `string`                                                                                 | `undefined`  |
-| `_indeterminate`   | `_indeterminate` | Gibt an, ob die Checkbox weder ausgewählt noch nicht ausgewählt ist.                                                                              | `boolean \| undefined`                                                                   | `undefined`  |
-| `_name`            | `_name`          | Gibt den technischen Namen des Eingabefeldes an.                                                                                                  | `string \| undefined`                                                                    | `undefined`  |
-| `_on`              | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                         | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined`  |
-| `_required`        | `_required`      | Gibt an, ob die Checkbox ein Pflichtfeld ist.                                                                                                     | `boolean \| undefined`                                                                   | `undefined`  |
-| `_tabIndex`        | `_tab-index`     | Gibt an, welchen Tab-Index dieses Input hat.                                                                                                      | `number \| undefined`                                                                    | `undefined`  |
-| `_touched`         | `_touched`       | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.                                                                     | `boolean \| undefined`                                                                   | `false`      |
-| `_type`            | `_type`          | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Attribute _variant.<br/><br/>Gibt an, welchen Type das Input haben soll. | `"checkbox" \| "switch" \| undefined`                                                    | `'checkbox'` |
-| `_value`           | `_value`         | Gibt den Wert der Checkbox an.                                                                                                                    | `string \| undefined`                                                                    | `undefined`  |
-| `_variant`         | `_variant`       | Gibt an, welchen Type das Input haben soll.                                                                                                       | `"checkbox" \| "switch" \| undefined`                                                    | `undefined`  |
+| Property           | Attribute        | Description                                                                                                                                       | Type                                                                                                                                                                                                                                                                                                          | Default     |
+| ------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`       | `_access-key`    | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.                                                              | `string \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_alert`           | `_alert`         | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.                                                                          | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `true`      |
+| `_checked`         | `_checked`       | Gibt an, ob die Checkbox ausgewählt ist oder nicht.                                                                                               | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `false`     |
+| `_disabled`        | `_disabled`      | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.                                                                                       | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_error`           | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                                                          | `string \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_hideLabel`       | `_hide-label`    | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.                                                                                     | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_hint`            | `_hint`          | Gibt den Text für eine Hinweistext an.                                                                                                            | `string \| undefined`                                                                                                                                                                                                                                                                                         | `''`        |
+| `_icon`            | `_icon`          | Ermöglicht das Überschreiben der Icons für die Checkbox.                                                                                          | `string \| undefined \| { checked: string; indeterminate?: string \| undefined; unchecked?: string \| undefined; } & { checked?: string \| undefined; indeterminate: string; unchecked?: string \| undefined; } & { checked?: string \| undefined; indeterminate?: string \| undefined; unchecked: string; }` | `undefined` |
+| `_id` _(required)_ | `_id`            | Gibt die technische ID des Eingabefeldes an.                                                                                                      | `string`                                                                                                                                                                                                                                                                                                      | `undefined` |
+| `_indeterminate`   | `_indeterminate` | Gibt an, ob die Checkbox weder ausgewählt noch nicht ausgewählt ist.                                                                              | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_name`            | `_name`          | Gibt den technischen Namen des Eingabefeldes an.                                                                                                  | `string \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_on`              | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                         | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined`                                                                                                                                                                                                                      | `undefined` |
+| `_required`        | `_required`      | Gibt an, ob die Checkbox ein Pflichtfeld ist.                                                                                                     | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_tabIndex`        | `_tab-index`     | Gibt an, welchen Tab-Index dieses Input hat.                                                                                                      | `number \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_touched`         | `_touched`       | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.                                                                     | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `false`     |
+| `_type`            | `_type`          | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Attribute _variant.<br/><br/>Gibt an, welchen Type das Input haben soll. | `"button" \| "checkbox" \| "switch" \| undefined`                                                                                                                                                                                                                                                             | `undefined` |
+| `_value`           | `_value`         | Gibt den Wert der Checkbox an.                                                                                                                    | `string \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_variant`         | `_variant`       | Gibt an, welchen Type das Input haben soll.                                                                                                       | `"button" \| "checkbox" \| "switch" \| undefined`                                                                                                                                                                                                                                                             | `undefined` |
 
 
 ## Dependencies
@@ -77,11 +82,13 @@ Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenread
 ### Depends on
 
 - kol-input
+- [kol-icon](../icon)
 
 ### Graph
 ```mermaid
 graph TD;
   kol-input-checkbox --> kol-input
+  kol-input-checkbox --> kol-icon
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-alert