diff --git a/src/runtime/components/forms/Select.vue b/src/runtime/components/forms/Select.vue
index 655bf4bc..38566a68 100644
--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -97,6 +97,13 @@ const props = defineProps({
     type: String,
     default: null
   },
+  appearance: {
+    type: String,
+    default: 'default',
+    validator (value: string) {
+      return Object.keys($ui.select.appearance).includes(value)
+    }
+  },
   textAttribute: {
     type: String,
     default: 'text'
@@ -173,7 +180,7 @@ const selectClass = computed(() => {
     props.baseClass,
     $ui.select.size[props.size],
     $ui.select.spacing[props.size],
-    $ui.select.appearance.default,
+    $ui.select.appearance[props.appearance],
     !!props.icon && $ui.select.leading.spacing[props.size],
     $ui.select.trailing.spacing[props.size],
     props.customClass
diff --git a/src/runtime/components/forms/SelectCustom.vue b/src/runtime/components/forms/SelectCustom.vue
index 92c26b30..8f378f72 100644
--- a/src/runtime/components/forms/SelectCustom.vue
+++ b/src/runtime/components/forms/SelectCustom.vue
@@ -101,6 +101,13 @@ const props = defineProps({
     type: String,
     default: null
   },
+  appearance: {
+    type: String,
+    default: 'default',
+    validator (value: string) {
+      return Object.keys($ui.selectCustom.appearance).includes(value)
+    }
+  },
   listBaseClass: {
     type: String,
     default: () => $ui.selectCustom.list.base
@@ -150,7 +157,7 @@ const selectCustomClass = computed(() => {
     props.baseClass,
     $ui.selectCustom.size[props.size],
     $ui.selectCustom.spacing[props.size],
-    $ui.selectCustom.appearance.default,
+    $ui.selectCustom.appearance[props.appearance],
     $ui.selectCustom.trailing.spacing[props.size],
     props.customClass
   )