DÁP Szolgáltatások

Copybox input

Copybox input is a component that allows users to copy the content of an input field to the clipboard.

Examples

Default

<dap-ds-copybox-input
label="Name"
placeholder="Enter your name">
</dap-ds-copybox-input>

Sizes

<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>

States

<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>

Custom Styling

The copybox input component supports extensive customization beyond the default styles. This section demonstrates practical styling techniques and advanced customization patterns.

Quick Customization with CSS Custom Properties

For simple customizations, use CSS custom properties directly on the component:

<dap-ds-copybox-input
label="Custom Styled Copybox Input"
value="Copy this text"
style={{
  '--dds-input-background': 'var(--dds-brand-100)',
  '--dds-input-border': '2px solid var(--dds-brand-600)',
  '--dds-input-text-color': 'var(--dds-brand-900)',
  '--dds-input-border-radius': 'var(--dds-radius-large)',
}}>
</dap-ds-copybox-input>

Advanced Styling with CSS Parts

Experiment with custom copybox input styling using CSS parts and custom properties. The copybox input component exposes several CSS parts for advanced styling: base, input, label, description, feedback, postfix, copy-button-base, copy-button-content, copy-icon, copy-icon-base, and more. Try the presets below or create your own styles:

CSS Editor

Live Preview

Importing

import { DapDSCopyBoxInput } from 'dap-design-system'

Importing React

import { DapDSCopyBoxInputReact } from 'dap-design-system/react'

Tree-Shakeable Imports

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSCopyBoxInput } from 'dap-design-system/components'

Attributes

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`

Slots

No slots available.

Events

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 }`

CSS Parts

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.
`copy-button-base`	The base of the copy button.
`copy-button-content`	The content of the copy button.
`copy-icon`	The copy icon of the component.
`copy-icon-base`	The base of the copy icon.

How to Use CSS Parts

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.

CSS Custom Properties

Property Name	Description
`--dds-input-height-xs`	The height of the extra small input. (default: var(--dds-spacing-800))
`--dds-input-height-sm`	The height of the small input. (default: var(--dds-spacing-1000))
`--dds-input-height-lg`	The height of the large input. (default: var(--dds-spacing-1200))
`--dds-input-padding-xs`	The padding of the extra small input. (default: 0 var(--dds-spacing-200))
`--dds-input-padding-sm`	The padding of the small input. (default: 0 var(--dds-spacing-300))
`--dds-input-padding-lg`	The padding of the large input. (default: 0 var(--dds-spacing-400))
`--dds-input-font-size-xs`	The font size of the extra small input. (default: var(--dds-font-sm))
`--dds-input-font-size-sm`	The font size of the small input. (default: var(--dds-font-base))
`--dds-input-font-size-lg`	The font size of the large input. (default: var(--dds-font-lg))
`--dds-input-border`	The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base))
`--dds-input-background`	The background color of the input. (default: var(--dds-fields-background-default))
`--dds-input-text-color`	The text color of the input. (default: var(--dds-text-neutral-base))
`--dds-input-border-radius`	The border radius of the input. (default: var(--dds-radius-base))
`--dds-input-disabled-border`	The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled))
`--dds-input-disabled-background`	The background color of the disabled input. (default: var(--dds-fields-background-disabled))
`--dds-input-disabled-text`	The text color of the disabled input. (default: var(--dds-text-neutral-disabled))
`--dds-input-readonly-border`	The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle))
`--dds-input-readonly-background`	The background color of the readonly input. (default: var(--dds-fields-background-read-only))
`--dds-input-readonly-text`	The text color of the readonly input. (default: var(--dds-text-neutral-subtle))
`--dds-input-success-border`	The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base))
`--dds-input-error-border`	The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base))
`--dds-input-addon-background`	The background color of the input addon. (default: var(--dds-fields-background-default))
`--dds-input-addon-success-background`	The background color of the success input addon. (default: var(--dds-fields-background-default))
`--dds-input-addon-error-background`	The background color of the error input addon. (default: var(--dds-fields-background-default))
`--dds-input-addon-border-before`	The border of the addon before the input. (default: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0)

How to Use CSS Custom Properties

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.

<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>

<dap-ds-copybox-input label="Custom Styled Copybox Input" value="Copy this text" style={{ '--dds-input-background': 'var(--dds-brand-100)', '--dds-input-border': '2px solid var(--dds-brand-600)', '--dds-input-text-color': 'var(--dds-brand-900)', '--dds-input-border-radius': 'var(--dds-radius-large)', }}> </dap-ds-copybox-input>

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

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.

copy-button-base

The base of the copy button.

copy-button-content

The content of the copy button.

copy-icon

The copy icon of the component.

copy-icon-base

The base of the copy icon.

/* 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 */ }

Property Name

Description

--dds-input-height-xs

The height of the extra small input. (default: var(--dds-spacing-800))

--dds-input-height-sm

The height of the small input. (default: var(--dds-spacing-1000))

--dds-input-height-lg

The height of the large input. (default: var(--dds-spacing-1200))

--dds-input-padding-xs

The padding of the extra small input. (default: 0 var(--dds-spacing-200))

--dds-input-padding-sm

The padding of the small input. (default: 0 var(--dds-spacing-300))

--dds-input-padding-lg

The padding of the large input. (default: 0 var(--dds-spacing-400))

--dds-input-font-size-xs

The font size of the extra small input. (default: var(--dds-font-sm))

--dds-input-font-size-sm

The font size of the small input. (default: var(--dds-font-base))

--dds-input-font-size-lg

The font size of the large input. (default: var(--dds-font-lg))

--dds-input-border

The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base))

--dds-input-background

The background color of the input. (default: var(--dds-fields-background-default))

--dds-input-text-color

The text color of the input. (default: var(--dds-text-neutral-base))

--dds-input-border-radius

The border radius of the input. (default: var(--dds-radius-base))

--dds-input-disabled-border

The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled))

--dds-input-disabled-background

The background color of the disabled input. (default: var(--dds-fields-background-disabled))

--dds-input-disabled-text

The text color of the disabled input. (default: var(--dds-text-neutral-disabled))

--dds-input-readonly-border

The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle))

--dds-input-readonly-background

The background color of the readonly input. (default: var(--dds-fields-background-read-only))

--dds-input-readonly-text

The text color of the readonly input. (default: var(--dds-text-neutral-subtle))

--dds-input-success-border

The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base))

--dds-input-error-border

The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base))

--dds-input-addon-background

The background color of the input addon. (default: var(--dds-fields-background-default))

--dds-input-addon-success-background

The background color of the success input addon. (default: var(--dds-fields-background-default))

--dds-input-addon-error-background

The background color of the error input addon. (default: var(--dds-fields-background-default))

--dds-input-addon-border-before

The border of the addon before the input. (default: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0)