diff --git a/docs/app/components/content/examples/input/InputCopyButtonExample.vue b/docs/app/components/content/examples/input/InputCopyButtonExample.vue new file mode 100644 index 00000000..38420a2e --- /dev/null +++ b/docs/app/components/content/examples/input/InputCopyButtonExample.vue @@ -0,0 +1,33 @@ + + + diff --git a/docs/app/components/content/examples/input/InputKbdExample.vue b/docs/app/components/content/examples/input/InputKbdExample.vue new file mode 100644 index 00000000..dd1bf2b4 --- /dev/null +++ b/docs/app/components/content/examples/input/InputKbdExample.vue @@ -0,0 +1,21 @@ + + + diff --git a/docs/content/3.components/input.md b/docs/content/3.components/input.md index d4711cb9..8387a03d 100644 --- a/docs/content/3.components/input.md +++ b/docs/content/3.components/input.md @@ -214,6 +214,16 @@ name: 'input-clear-button-example' --- :: +### With copy button + +You can put a [Button](/components/button) inside the `#trailing` slot to copy the value to the clipboard. + +::component-example +--- +name: 'input-copy-button-example' +--- +:: + ### With password toggle You can put a [Button](/components/button) inside the `#trailing` slot to toggle the password visibility. @@ -245,6 +255,20 @@ name: 'input-character-limit-example' --- :: +### With keyboard shortcut + +You can use the [Kbd](/components/kbd) component inside the `#trailing` slot to add a keyboard shortcut to the Input. + +::component-example +--- +name: 'input-kbd-example' +--- +:: + +::note{to="/composables/define-shortcuts"} +This example uses the `defineShortcuts` composable to focus the Input when the :kbd{value="/"} key is pressed. +:: + ### With floating label You can use the `#default` slot to add a floating label to the Input.