diff --git a/src/components/Label/Label.module.css b/src/components/Label/Label.module.css
index b5aa230c2..78a0f1e5f 100644
--- a/src/components/Label/Label.module.css
+++ b/src/components/Label/Label.module.css
@@ -10,7 +10,8 @@
* Labels can sometimes be marked up as legends for field groups (i.e. radio field).
*/
.label {
- @mixin labelStyles;
+ @mixin eds-theme-typography-form-label;
+ display: inline-block;
}
/**
diff --git a/src/components/Select/Select.module.css b/src/components/Select/Select.module.css
index 3d56f7e16..746dc86af 100644
--- a/src/components/Select/Select.module.css
+++ b/src/components/Select/Select.module.css
@@ -24,10 +24,19 @@
/**
* Label on top of the select trigger button to label the select field.
*/
-.label {
- @mixin eds-theme-typography-label-md;
- color: var(--eds-theme-color-form-label);
+.select__label {
+ @mixin eds-theme-typography-form-label;
+ display: inline-block;
+}
+
+/**
+ * Wraps the Label and the optional/required indicator.
+ */
+.select__overline {
+ display: flex;
+ justify-content: space-between;
margin-bottom: var(--eds-size-half);
+ color: var(--eds-theme-color-form-label);
}
/**
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 57d11b19b..70415c61d 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -229,9 +229,12 @@ const SelectContext = React.createContext<{
const SelectLabel = (props: { className?: string; children: ReactNode }) => {
const { children, className } = props;
- const componentClassName = clsx(styles['label'], className);
+ const componentClassName = clsx(styles['select__label'], className);
+ const overlineClassName = clsx(styles['select__overline']);
return (
-