Copybox input is a component that allows users to copy the content of an input field to the clipboard.
<dap-ds-copybox-input label="Name" placeholder="Enter your name"> </dap-ds-copybox-input>
<dap-ds-stack> <dap-ds-copybox-input label="Xs Name" size="xs" feedback="This is a feedback message" feedbacktype="negative" placeholder="Enter your name"> </dap-ds-copybox-input> <dap-ds-copybox-input label="Sm Name" size="sm" feedback="This is a feedback message" feedbacktype="negative" placeholder="Enter your name"> </dap-ds-copybox-input> <dap-ds-copybox-input label="Lg Name" size="lg" feedback="This is a feedback message" feedbacktype="negative" placeholder="Enter your name"> </dap-ds-copybox-input> </dap-ds-stack>
<dap-ds-stack> <dap-ds-copybox-input disabled label="Disabled" placeholder="Enter your name" value="John Doe"> </dap-ds-copybox-input> <dap-ds-copybox-input readonly label="Readonly" placeholder="Enter your name" value="John Doe"> </dap-ds-copybox-input> </dap-ds-stack>
import { DapDSCopyBoxInput } from 'dap-design-system/dist/dds'
import { DapDSCopyBoxInputReact } from 'dap-design-system/dist/react'
| Property | Type | Default | Description |
|---|---|---|---|
copyButtonAriaLabel | string | The aria label of the copy button. | |
type | string | 'text' | |
label | string | The label of the input. | |
placeholder | string | The placeholder of the input. | |
description | string | The description of the input. | |
tooltip | string | The tooltip of the input. | |
tooltipPlacement | 'top', 'right' , 'bottom' , 'left' | The position of the tooltip. Can be top, right, bottom, or left. | |
status | 'success', 'error' | The status of the input. Can be success or error. | |
size | 'xs', 'sm' , 'sm' | The size of the input. Default is sm. | |
name | string | The name of the input. | |
value | string | The value of the input. | |
disabled | boolean | The disabled state of the input. Default is false. | |
required | boolean | The required state of the input. Default is false. | |
readonly | boolean | The readonly state of the input. Default is false. | |
autofocus | boolean | The autofocus state of the input. Default is false. | |
feedback | string | The feedback of the input. | |
feedbackType | 'negative', 'positive' , 'warning' | The feedback type of the input. Can be negative, positive, or warning. | |
loading | boolean | The loading state of the input. Default is false. | |
optional | boolean | The optional state of the input. | |
optionalLabel | string | The optional label of the input. | |
subtle | boolean | The weight of the label. Default is false |
No slots available.
| Event Name | Description | Type |
|---|---|---|
dds-copy | Fired when the user clicks on the copy button. | {value: string } |
dds-change | Fired when the input value changes. | {value: string } |
dds-input | Fired when the input value changes. | {value: string } |
dds-keydown | Fired when a key is pressed down. | {value: string, originalEvent: Event } |
dds-blur | Fired when the input loses focus. | {void } |
dds-focus | Emitted when the input gains focus. | {void } |
dds-not-allowed | Emitted when the value cannot be copied. | {void } |
| Part Name | Description |
|---|---|
base | The base container of the component. |
postfix | The inner postfix icon part of the component. |
button | The button of the component. |
| Property Name | Description |
|---|---|
--dds-input-height | The height of the input. Default is var(--dds-spacing-1000). |
--dds-input-padding | The padding of the input. Default is var(--dds-spacing-300). |
--dds-input-font-size | The font size of the input. Default is var(--dds-font-base). |
--dds-input-border-color | The border color of the input. Default is var(--dds-border-neutral-base). |
--dds-input-background-color | The background color of the input. Default is var(--dds-fields-background-default). |
--dds-input-text-color | The text color of the input. Default is var(--dds-text-neutral-base). |
--dds-input-border-radius | The border radius of the input. Default is var(--dds-radius-base). |
--dds-input-border-width | The border width of the input. Default is var(--dds-border-width-base). |
--dds-input-disabled-background | The background color of the disabled input. Default is var(--dds-fields-background-disabled). |
--dds-input-disabled-text | The text color of the disabled input. Default is var(--dds-text-neutral-disabled). |
--dds-input-readonly-background | The background color of the readonly input. Default is var(--dds-fields-background-read-only). |
--dds-input-readonly-text | The text color of the readonly input. Default is var(--dds-text-neutral-subtle). |
--dds-input-success-border | The border color of the success input. Default is var(--dds-border-positive-base). |
--dds-input-error-border | The border color of the error input. Default is var(--dds-border-negative-base). |
--dds-input-addon-background | The background color of the input addon. Default is var(--dds-background-ui-neutral-enabled). |
--dds-input-addon-success-background | The background color of the success input addon. Default is var(--dds-background-ui-positive-enabled). |
--dds-input-addon-error-background | The background color of the error input addon. Default is var(--dds-background-ui-negative-enabled). |