lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

The color input component is used to allow users to select a color from a predefined set of options or to input a specific color value. The input should have a clear and consistent label that describes the option it represents.

Example

message text
code
<script type="module">
  import '@blueprintui/components/include/color.js';
</script>

<bp-field>
  <label>color</label>
  <bp-color></bp-color>
  <bp-field-message>message text</bp-field-message>
</bp-field>

Vertical

message textdisabled messageerror messagesuccess message
code
<bp-form-group layout="vertical">
  <bp-field layout="vertical">
    <label>label</label>
    <bp-color></bp-color>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="vertical">
    <label>disabled</label>
    <bp-color disabled></bp-color>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="vertical">
    <label>error</label>
    <bp-color></bp-color>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="vertical">
    <label>success</label>
    <bp-color></bp-color>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Horizontal

message textdisabled messageerror messagesuccess message
code
<bp-form-group layout="horizontal">
  <bp-field layout="horizontal">
    <label>label</label>
    <bp-color></bp-color>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal">
    <label>disabled</label>
    <bp-color disabled></bp-color>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal" status="error">
    <label>error</label>
    <bp-color></bp-color>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal" status="success">
    <label>success</label>
    <bp-color></bp-color>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Compact

message textdisabled messageerror messagesuccess message
code
<bp-form-group layout="compact">
  <bp-field layout="compact">
    <label>label</label>
    <bp-color></bp-color>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="compact">
    <label>disabled</label>
    <bp-color disabled></bp-color>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="compact" status="error">
    <label>error</label>
    <bp-color></bp-color>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="compact" status="success">
    <label>success</label>
    <bp-color></bp-color>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Install

NPM

// npm package
import '@blueprintui/components/include/color.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/color.js/+esm';
</script>

Accessibility

  • Use a label element or aria-labelledby or aria-label to provide a clear and concise description of the color picker option.

bp-color

Events

NameTypesDescription
inputInputEventoccurs when the value changes
changeInputEventoccurs when the value changes

Properties

NameTypesDescription
typestringstring specifying the type of control to render
valuestring | number | FormData | Filecontrol value
disabledbooleandetermines if element is mutable or focusable
requiredbooleanindicates that the user must specify a value for the input before the owning form can be submitted
readonlybooleanmakes the element not mutable, meaning the user can not edit the control
multiplebooleandetermines he form control accepts one or more values
autocompletestringprovide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
namestringrepresents the name of the current
element as a string.
patternstringregular expression the form control's value should match
placeholderstringdefines a short hint to help the user with data entry when a form control has no value
minLengthnumberdefines minimum number of characters
maxLengthnumberdefines maximum number of characters
minnumberdefines the most negative value in the range of permitted values
maxnumberdefines the greatest value in the range of permitted values
sizenumberdetermines number of characters
formAssociatedboolean
valueAsNumber
composedLabel
focus
reset

Attributes

NameTypesDescription
typestringstring specifying the type of control to render
valuestring | number | FormData | Filecontrol value
disabledbooleandetermines if element is mutable or focusable
requiredbooleanindicates that the user must specify a value for the input before the owning form can be submitted
readonlybooleanmakes the element not mutable, meaning the user can not edit the control
multiplebooleandetermines he form control accepts one or more values
autocompletestringprovide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
patternstringregular expression the form control's value should match
placeholderstringdefines a short hint to help the user with data entry when a form control has no value
minLengthnumberdefines minimum number of characters
maxLengthnumberdefines maximum number of characters
minnumberdefines the most negative value in the range of permitted values
maxnumberdefines the greatest value in the range of permitted values
sizenumberdetermines number of characters

CSS Properties

NameTypesDescription
--background
--background-size
--color
--border
--border-radius
--outline
--outline-offset
--padding
--font-size
--line-height
--height
--min-width
--width
--transition
--text-align
--cursor

Slots

NameTypesDescription
prefixslot for prefix text or icons
suffixslot for suffic text or icons