DÁP Design System - Copybox input webcomponent

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>

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>

Importing

import { DapDSCopyBoxInput } from 'dap-design-system/dist/dds'

Importing React

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

Slots

No slots available.

Attributes

Property	Type	Default	Description
`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.
`status`	`'success' 'error'`		The status of the input. Can be `success` or `error`.
`size`	`'sm' 'lg'`		The size of the input. Default is `sm`. Can be `sm` or `lg`.
`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`

Events

Event Name	Description
`dds-copy`	Fired when the user clicks on the copy button.
`dds-change`	Fired when the input value changes.
`dds-input`	Fired when the input value changes.
`dds-keydown`	Fired when a key is pressed down.
`dds-blur`	Fired when the input loses focus.
`dds-focus`	Emitted when the input gains focus.
`dds-not-allowed`	Emitted when the value cannot be copied.

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.