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

Image Picker Item

An item in an image picker.

<tw-picker style="--tw-image-picker-item-aspect-ratio: 1">
  <tw-image-picker-item
    image="https://picsum.photos/172?random=1"
  ></tw-image-picker-item>
  <tw-image-picker-item
    image="https://picsum.photos/172?random=2"
  ></tw-image-picker-item>
  <tw-image-picker-item
    image="https://picsum.photos/172?random=3"
  ></tw-image-picker-item>
</tw-picker>

Properties

Property Attribute Description Type Default
image image The image of the control. string | undefined undefined
value value The value of the control. string | undefined undefined
label label The label of the control. string | undefined undefined
checked checked Controls whether the radio is checked. boolean false
disabled disabled Controls whether the radio is disabled. boolean false

Events

Name Description
change

CSS Properties

Property Description Default
--tw-image-picker-item-aspect-ratio The aspect ratio of the image. Useful to prevent a visual jump when the image has loaded. 0