feat(c-select): add an id to allow form control

meretamal · Apr 29, 2023 · 8230ff1 · 8230ff1
1 parent 7b372c0
commit 8230ff1
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/src/components/c-select/c-select.tsx b/src/components/c-select/c-select.tsx
@@ -37,6 +37,10 @@ export const CSelect = defineComponent({
     disabled: {
       type: Boolean,
     },
+    id: {
+      type: String,
+      default: null,
+    },
   },
   emits: ['update:modelValue', 'input', 'change'],
   setup(props, { emit, slots }) {
@@ -63,7 +67,7 @@ export const CSelect = defineComponent({
     return () => (
       <celeste.div class={`${baseClass.value}__container`}>
         {props.label && (
-          <celeste.label class={`${baseClass.value}__label`}>
+          <celeste.label class={`${baseClass.value}__label`} for={props.id}>
             {props.label}
           </celeste.label>
         )}
@@ -72,6 +76,7 @@ export const CSelect = defineComponent({
           class={classes.value}
           onInput={handleInput}
           value={props.modelValue}
+          id={props.id}
         >
           {props.placeholder && (
             <celeste.option value="" disabled>