Lowdefy
v3.23.3/input/SwatchesColorSelector/

SwatchesColorSelector

value type: string

A swatches color selector component.

block_id: null


id: block_id
type: SwatchesColorSelector
properties:
  colors:
    - - '#b71c1c'
      - '#d32f2f'
      - '#f44336'
      - '#e57373'
      - '#ffcdd2'
    - - '#880e4f'
      - '#c2185b'
      - '#e91e63'
      - '#f06292'
      - '#f8bbd0'
    - - '#4a148c'
      - '#7b1fa2'
      - '#9c27b0'
      - '#ba68c8'
      - '#e1bee7'
    - - '#311b92'
      - '#512da8'
      - '#673ab7'
      - '#9575cd'
      - '#d1c4e9'
    - - '#1a237e'
      - '#303f9f'
      - '#3f51b5'
      - '#7986cb'
      - '#c5cae9'
    - - '#0d47a1'
      - '#1976d2'
      - '#2196f3'
      - '#64b5f6'
      - '#bbdefb'
    - - '#01579b'
      - '#0288d1'
      - '#03a9f4'
      - '#4fc3f7'
      - '#b3e5fc'
    - - '#006064'
      - '#0097a7'
      - '#00bcd4'
      - '#4dd0e1'
      - '#b2ebf2'
    - - '#004d40'
      - '#00796b'
      - '#009688'
      - '#4db6ac'
      - '#b2dfdb'
    - - '#194d33'
      - '#388e3c'
      - '#4caf50'
      - '#81c784'
      - '#c8e6c9'
    - - '#33691e'
      - '#689f38'
      - '#8bc34a'
      - '#aed581'
      - '#dcedc8'
    - - '#827717'
      - '#afb42b'
      - '#cddc39'
      - '#dce775'
      - '#f0f4c3'
    - - '#f57f17'
      - '#fbc02d'
      - '#ffeb3b'
      - '#fff176'
      - '#fff9c4'
    - - '#ff6f00'
      - '#ffa000'
      - '#ffc107'
      - '#ffd54f'
      - '#ffecb3'
    - - '#e65100'
      - '#f57c00'
      - '#ff9800'
      - '#ffb74d'
      - '#ffe0b2'
    - - '#bf360c'
      - '#e64a19'
      - '#ff5722'
      - '#ff8a65'
      - '#ffccbc'
    - - '#3e2723'
      - '#5d4037'
      - '#795548'
      - '#a1887f'
      - '#d7ccc8'
    - - '#263238'
      - '#455a64'
      - '#607d8b'
      - '#90a4ae'
      - '#cfd8dc'
    - - '#000000'
      - '#525252'
      - '#969696'
      - '#d9d9d9'
      - '#ffffff'
properties:
colors:
    • #b71c1c
    • #d32f2f
    • #f44336
    • #e57373
    • #ffcdd2

    • #880e4f
    • #c2185b
    • #e91e63
    • #f06292
    • #f8bbd0

    • #4a148c
    • #7b1fa2
    • #9c27b0
    • #ba68c8
    • #e1bee7

    • #311b92
    • #512da8
    • #673ab7
    • #9575cd
    • #d1c4e9

    • #1a237e
    • #303f9f
    • #3f51b5
    • #7986cb
    • #c5cae9

    • #0d47a1
    • #1976d2
    • #2196f3
    • #64b5f6
    • #bbdefb

    • #01579b
    • #0288d1
    • #03a9f4
    • #4fc3f7
    • #b3e5fc

    • #006064
    • #0097a7
    • #00bcd4
    • #4dd0e1
    • #b2ebf2

    • #004d40
    • #00796b
    • #009688
    • #4db6ac
    • #b2dfdb

    • #194d33
    • #388e3c
    • #4caf50
    • #81c784
    • #c8e6c9

    • #33691e
    • #689f38
    • #8bc34a
    • #aed581
    • #dcedc8

    • #827717
    • #afb42b
    • #cddc39
    • #dce775
    • #f0f4c3

    • #f57f17
    • #fbc02d
    • #ffeb3b
    • #fff176
    • #fff9c4

    • #ff6f00
    • #ffa000
    • #ffc107
    • #ffd54f
    • #ffecb3

    • #e65100
    • #f57c00
    • #ff9800
    • #ffb74d
    • #ffe0b2

    • #bf360c
    • #e64a19
    • #ff5722
    • #ff8a65
    • #ffccbc

    • #3e2723
    • #5d4037
    • #795548
    • #a1887f
    • #d7ccc8

    • #263238
    • #455a64
    • #607d8b
    • #90a4ae
    • #cfd8dc

    • #000000
    • #525252
    • #969696
    • #d9d9d9
    • #ffffff


#000000
Default color to display if input value is null.
Color selector height.
Css style to applied to input.
label:
Align label left or right when inline.
Append label with colon.
Hide input label.
Extra text to display beneath the content.
Css style to applied to label extra.
Css style to applied to label feedback.
Display feedback extra from validation, this does not disable validation.
Render input and label inline.
Label inline span.
Label title.
Title to describe the input component, if no title is specified the block id is displayed.
Color selector width.
type: object
properties:
  events:
    additionalProperties: false
    properties:
      onChange:
        description: Trigger actions when color is picked.
        type: array
    type: object
  properties:
    properties:
      colors:
        default:
          - - '#b71c1c'
            - '#d32f2f'
            - '#f44336'
            - '#e57373'
            - '#ffcdd2'
          - - '#880e4f'
            - '#c2185b'
            - '#e91e63'
            - '#f06292'
            - '#f8bbd0'
          - - '#4a148c'
            - '#7b1fa2'
            - '#9c27b0'
            - '#ba68c8'
            - '#e1bee7'
          - - '#311b92'
            - '#512da8'
            - '#673ab7'
            - '#9575cd'
            - '#d1c4e9'
          - - '#1a237e'
            - '#303f9f'
            - '#3f51b5'
            - '#7986cb'
            - '#c5cae9'
          - - '#0d47a1'
            - '#1976d2'
            - '#2196f3'
            - '#64b5f6'
            - '#bbdefb'
          - - '#01579b'
            - '#0288d1'
            - '#03a9f4'
            - '#4fc3f7'
            - '#b3e5fc'
          - - '#006064'
            - '#0097a7'
            - '#00bcd4'
            - '#4dd0e1'
            - '#b2ebf2'
          - - '#004d40'
            - '#00796b'
            - '#009688'
            - '#4db6ac'
            - '#b2dfdb'
          - - '#194d33'
            - '#388e3c'
            - '#4caf50'
            - '#81c784'
            - '#c8e6c9'
          - - '#33691e'
            - '#689f38'
            - '#8bc34a'
            - '#aed581'
            - '#dcedc8'
          - - '#827717'
            - '#afb42b'
            - '#cddc39'
            - '#dce775'
            - '#f0f4c3'
          - - '#f57f17'
            - '#fbc02d'
            - '#ffeb3b'
            - '#fff176'
            - '#fff9c4'
          - - '#ff6f00'
            - '#ffa000'
            - '#ffc107'
            - '#ffd54f'
            - '#ffecb3'
          - - '#e65100'
            - '#f57c00'
            - '#ff9800'
            - '#ffb74d'
            - '#ffe0b2'
          - - '#bf360c'
            - '#e64a19'
            - '#ff5722'
            - '#ff8a65'
            - '#ffccbc'
          - - '#3e2723'
            - '#5d4037'
            - '#795548'
            - '#a1887f'
            - '#d7ccc8'
          - - '#263238'
            - '#455a64'
            - '#607d8b'
            - '#90a4ae'
            - '#cfd8dc'
          - - '#000000'
            - '#525252'
            - '#969696'
            - '#d9d9d9'
            - '#ffffff'
        description: List of swatch colors options to display.
        items:
          items:
            type: string
          type: array
        type: array
      defaultColor:
        default: '#000000'
        description: Default color to display if input value is null.
        type: string
      height:
        default: 135px
        description: Color selector height.
        type:
          - string
          - number
      inputStyle:
        description: Css style to applied to input.
        type: object
      label:
        additionalProperties: false
        description: Label properties.
        properties:
          align:
            default: left
            description: Align label left or right when inline.
            enum:
              - left
              - right
            type: string
          colon:
            default: true
            description: Append label with colon.
            type: boolean
          disabled:
            default: false
            description: Hide input label.
            type: boolean
          extra:
            description: Extra text to display beneath the content.
            type: string
          extraStyle:
            description: Css style to applied to label extra.
            type: object
          feedbackStyle:
            description: Css style to applied to label feedback.
            type: object
          hasFeedback:
            default: true
            description: >-
              Display feedback extra from validation, this does not disable
              validation.
            type: boolean
          inline:
            default: false
            description: Render input and label inline.
            type: boolean
          span:
            description: Label inline span.
            type: number
          title:
            description: Label title.
            type: string
        type: object
      title:
        description: >-
          Title to describe the input component, if no title is specified the
          block id is displayed.
        type: string
      width:
        default: 100%
        description: Color selector width.
        type:
          - string
          - number
    type: object