diff --git a/.changeset/gentle-monkeys-admire.md b/.changeset/gentle-monkeys-admire.md
new file mode 100644
index 000000000..61c149ad8
--- /dev/null
+++ b/.changeset/gentle-monkeys-admire.md
@@ -0,0 +1,5 @@
+---
+"@hopper-ui/components": patch
+---
+
+Fix necessityIndicator not appearing when it's a label
diff --git a/apps/docs/content/components/content/Label.mdx b/apps/docs/content/components/content/Label.mdx
index cb0124587..1bf467b35 100644
--- a/apps/docs/content/components/content/Label.mdx
+++ b/apps/docs/content/components/content/Label.mdx
@@ -35,9 +35,13 @@ The label component has a default color, but it can be easily overridden.
### Required
-The label component can be marked as required.
+The label component can be marked as required. You can customize the necessity indicator, such as using an asterisk.
-
+
+
+Or a label.
+
+
## Advanced customization
diff --git a/apps/docs/examples/Preview.ts b/apps/docs/examples/Preview.ts
index 4447d41c4..2de42c2a9 100644
--- a/apps/docs/examples/Preview.ts
+++ b/apps/docs/examples/Preview.ts
@@ -407,8 +407,11 @@ export const Previews: Record = {
"typography/Label/docs/color": {
component: lazy(() => import("@/../../packages/components/src/typography/Label/docs/color.tsx"))
},
- "typography/Label/docs/required": {
- component: lazy(() => import("@/../../packages/components/src/typography/Label/docs/required.tsx"))
+ "typography/Label/docs/required1": {
+ component: lazy(() => import("@/../../packages/components/src/typography/Label/docs/required1.tsx"))
+ },
+ "typography/Label/docs/required2": {
+ component: lazy(() => import("@/../../packages/components/src/typography/Label/docs/required2.tsx"))
},
"typography/Label/docs/advancedCustomization": {
component: lazy(() => import("@/../../packages/components/src/typography/Label/docs/advancedCustomization.tsx"))
diff --git a/packages/components/src/typography/Label/docs/required1.tsx b/packages/components/src/typography/Label/docs/required1.tsx
new file mode 100644
index 000000000..44a75f62a
--- /dev/null
+++ b/packages/components/src/typography/Label/docs/required1.tsx
@@ -0,0 +1,7 @@
+import { Label } from "@hopper-ui/components";
+
+export default function Example() {
+ return (
+
+ );
+}
diff --git a/packages/components/src/typography/Label/docs/required.tsx b/packages/components/src/typography/Label/docs/required2.tsx
similarity index 60%
rename from packages/components/src/typography/Label/docs/required.tsx
rename to packages/components/src/typography/Label/docs/required2.tsx
index 3c6d370b4..60a97bcd2 100644
--- a/packages/components/src/typography/Label/docs/required.tsx
+++ b/packages/components/src/typography/Label/docs/required2.tsx
@@ -2,6 +2,6 @@ import { Label } from "@hopper-ui/components";
export default function Example() {
return (
-
+
);
}
diff --git a/packages/components/src/typography/Label/src/Label.tsx b/packages/components/src/typography/Label/src/Label.tsx
index 111c07513..d92d7e798 100644
--- a/packages/components/src/typography/Label/src/Label.tsx
+++ b/packages/components/src/typography/Label/src/Label.tsx
@@ -79,7 +79,7 @@ function Label(props: LabelProps, ref: ForwardedRef) {
{...filteredProps}
>
{children}
- {(necessityIndicator === "label" && !isRequired) && ({necessityLabel})}
+ {necessityIndicator === "label" && isRequired && ({necessityLabel})}
{necessityIndicator === "asterisk" && isRequired && requiredIndicator}
);