Copybox input is a component that allows users to copy the content of an input field to the clipboard.
import { DapDSCopyBoxInput } from 'dap-design-system'
import { DapDSCopyBoxInputReact } from 'dap-design-system/react'
For optimal bundle sizes, use the tree-shakeable import syntax:
import { DapDSCopyBoxInput } from 'dap-design-system/components'
| 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. |
You can style CSS parts using the ::part() pseudo-element selector:
/* Target a specific part */
.my-custom-dap-ds-copybox-input::part(base) {
/* Your custom styles */
}
/* Target multiple parts */
.my-custom-dap-ds-copybox-input::part(base),
.my-custom-dap-ds-copybox-input::part(postfix) {
/* Shared styles */
}
Example usage:
<dap-ds-copybox-input class="my-custom-dap-ds-copybox-input">
Copybox input
</dap-ds-copybox-input>
.my-custom-dap-ds-copybox-input::part(base) {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.
| Property Name | Description |
|---|---|
--dds-input-height-xs | The height of the extra small input. Default is var(--dds-spacing-800). |
--dds-input-height-sm | The height of the small input. Default is var(--dds-spacing-1000). |
--dds-input-height-lg | The height of the large input. Default is var(--dds-spacing-1200). |
--dds-input-padding-xs | The padding of the extra small input. Default is 0 var(--dds-spacing-200). |
--dds-input-padding-sm | The padding of the small input. Default is 0 var(--dds-spacing-300). |
--dds-input-padding-lg | The padding of the large input. Default is 0 var(--dds-spacing-400). |
--dds-input-font-size-xs | The font size of the extra small input. Default is var(--dds-font-sm). |
--dds-input-font-size-sm | The font size of the small input. Default is var(--dds-font-base). |
--dds-input-font-size-lg | The font size of the large input. Default is var(--dds-font-lg). |
--dds-input-border | The border of the input. Default is var(--dds-border-width-base) solid var(--dds-border-neutral-base). |
--dds-input-background | 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-disabled-border | The border of the disabled input. Default is 0 solid var(--dds-border-neutral-disabled). |
--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-border | The border of the readonly input. Default is 0 solid var(--dds-border-neutral-subtle). |
--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 of the success input. Default is var(--dds-border-width-base) solid var(--dds-border-positive-base). |
--dds-input-error-border | The border of the error input. Default is var(--dds-border-width-base) solid var(--dds-border-negative-base). |
--dds-input-addon-background | The background color of the input addon. Default is var(--dds-fields-background-default). |
--dds-input-addon-success-background | The background color of the success input addon. Default is var(--dds-fields-background-default). |
--dds-input-addon-error-background | The background color of the error input addon. Default is var(--dds-fields-background-default). |
--dds-input-addon-border-before | The border of the addon before the input. Default is var(--dds-border-width-base) solid var(--dds-border-neutral-base). |
--dds-input-addon-border-after | The border of the addon after the input. Default is var(--dds-border-width-base) solid var(--dds-border-neutral-base). |
--dds-input-addon-border-width-before | The border width of the addon before the input. Default is var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base). |
--dds-input-addon-border-width-after | The border width of the addon after the input. Default is var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0. |
--dds-input-addon-success-border | The border of the success addon. Default is var(--dds-border-width-base) solid var(--dds-border-positive-base). |
--dds-input-addon-success-border-before | The border of the success addon before the input. Default is var(--dds-border-width-base) solid var(--dds-border-positive-base). |
--dds-input-addon-success-border-after | The border of the success addon after the input. Default is var(--dds-border-width-base) solid var(--dds-border-positive-base). |
--dds-input-addon-success-border-width-before | The border width of the success addon before the input. Default is var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base). |
--dds-input-addon-success-border-width-after | The border width of the success addon after the input. Default is var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0. |
--dds-input-addon-error-border-before | The border of the error addon before the input. Default is var(--dds-border-width-base) solid var(--dds-border-negative-base). |
--dds-input-addon-error-border-after | The border of the error addon after the input. Default is var(--dds-border-width-base) solid var(--dds-border-negative-base). |
--dds-input-addon-error-border-width-before | The border width of the error addon before the input. Default is var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base). |
--dds-input-addon-error-border-width-after | The border width of the error addon after the input. Default is var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0. |
CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:
Method 1: Inline styles (Quick customization)
<dap-ds-copybox-input
style="--dds-input-height-xs: value; --dds-input-height-sm: value;">
Copybox input
</dap-ds-copybox-input>
Method 2: CSS classes (Reusable styles)
.my-custom-dap-ds-copybox-input {
--dds-input-height-xs: value;
--dds-input-height-sm: value;
--dds-input-height-lg: value;
}
<dap-ds-copybox-input class="my-custom-dap-ds-copybox-input">
Copybox input
</dap-ds-copybox-input>
Method 3: Global theme customization
/* Apply to all instances */
dap-ds-copybox-input {
--dds-input-height-xs: value;
--dds-input-height-sm: value;
}
CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.
