Twikit

Get Started Components Avatar Badge Button Carousel Checkbox Color Picker Item Context Menu Context Menu Item Icon Image Picker Item Input Input Unscoped Modal Nav Nav Group Nav Item Picker Progress Radio Radio Group Range Select Sortable Sortable Item Spinner Step Steps Tab Tab Group Textarea Toggle Tooltip CSS Framework Design Tokens Theming

Picker

Allows the user to pick one image from a list.

<h2>Picker Image</h2>
<tw-picker
  label="Select an image"
  name="group"
  value="one">
  <tw-image-picker-item
    image="https://picsum.photos/172?random=1"
    value="one"></tw-image-picker-item>
  <tw-image-picker-item
    image="https://picsum.photos/172?random=2"
    value="two"></tw-image-picker-item>
  <tw-image-picker-item
    image="https://picsum.photos/172?random=3"
    value="three"></tw-image-picker-item>
  <tw-image-picker-item
    image="https://picsum.photos/172?random=4"
    value="four"></tw-image-picker-item>
  <tw-image-picker-item
    image="https://picsum.photos/172?random=5"
    value="five"></tw-image-picker-item>
  <tw-image-picker-item
    image="https://picsum.pho"
    fallbackImage="https://twikit-cdn.s3.eu-west-1.amazonaws.com/images/product/default-product-image.png"
    value="six"></tw-image-picker-item>
</tw-picker>
<h2 style="margin-top: 32px;">Picker Color</h2>
<tw-picker
  label="Select a color"
  name="group-2"
  value="two">
  <tw-color-picker-item
    color="FF0000"
    value="one"></tw-color-picker-item>
  <tw-color-picker-item
    color="FF7F00"
    value="two"></tw-color-picker-item>
  <tw-color-picker-item
    color="FFFF00"
    value="three"></tw-color-picker-item>
  <tw-color-picker-item
    color="00FF00"
    value="four"></tw-color-picker-item>
  <tw-color-picker-item
    color="0000FF"
    value="five"></tw-color-picker-item>
 <tw-color-picker-item
    color="NOHEX"
    value="six"></tw-color-picker-item>  
</tw-picker>

Properties

Property Attribute Description Type Default
itemMinSize item-min-size The minimum size of the image. Mapped to the `--tw-space-{size}` design token, multiplied by four. The minimum minimum size is `m`. "m" | "l" | "xl" | "xxl" "l"
expand expand Controls whether the images will try to fill the width of its container. boolean false
required required Makes the control required. boolean false
disabled disabled Makes the control disabled. boolean false
error error Error to be shown with the input. Styles the input as incorrect when present. string | undefined undefined
controlName name The name of the form component. string | undefined undefined
value value The control value. string | undefined undefined
label label The label of the control. string | undefined undefined

Events

Name Description
input
change