diff --git a/addons/rose/addon/components/rose/form/input/index.hbs b/addons/rose/addon/components/rose/form/input/index.hbs
index 524523bbb..96bf0330d 100644
--- a/addons/rose/addon/components/rose/form/input/index.hbs
+++ b/addons/rose/addon/components/rose/form/input/index.hbs
@@ -15,6 +15,7 @@
type=@type
disabled=@disabled
error=@error
+ placeholder=@placeholder
aria-describedby=(concat (if @helperText (concat 'helper-text-' this.id)) (if @error (concat ' errors-' this.id)))
)
errors=(component 'rose/form/errors'
@@ -48,6 +49,7 @@
@type={{@type}}
@disabled={{@disabled}}
@error={{@error}}
+ @placeholder={{@placeholder}}
@aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
{{yield (hash
diff --git a/addons/rose/addon/components/rose/form/input/index.stories.mdx b/addons/rose/addon/components/rose/form/input/index.stories.mdx
index 2eaeb2f99..e84eab87b 100644
--- a/addons/rose/addon/components/rose/form/input/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/input/index.stories.mdx
@@ -13,7 +13,7 @@ Renders a simple form input.
```
@@ -40,6 +41,7 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
@error={{false}}
@disabled={{false}}
readonly={{false}}
+ placeholder='la la la'
>
@@ -60,6 +62,7 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
@disabled={{disabled}}
readonly={{read-only}}
@icon={{icon}}
+ placeholder={{placeholder}}
/>
`,
context: {
@@ -75,6 +78,7 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
),
value: text('value', 'Value'),
label: text('label', 'Label'),
+ placeholder: text('placeholder', 'this is a placeholder'),
helperText: text('helperText', 'Helper text'),
link: text('link', 'link goes here'),
linkText: text('linkText', 'link text'),
diff --git a/addons/rose/addon/components/rose/form/input/input/index.hbs b/addons/rose/addon/components/rose/form/input/input/index.hbs
index 95e81a114..802feeea7 100644
--- a/addons/rose/addon/components/rose/form/input/input/index.hbs
+++ b/addons/rose/addon/components/rose/form/input/input/index.hbs
@@ -6,4 +6,5 @@
name={{@name}}
@type={{@type}}
@value={{@value}}
+ placeholder={{@placeholder}}
aria-describedby={{@aria-describedby}} />
diff --git a/addons/rose/addon/styles/rose/components/form/_input.scss b/addons/rose/addon/styles/rose/components/form/_input.scss
index 214f57734..889c933ef 100644
--- a/addons/rose/addon/styles/rose/components/form/_input.scss
+++ b/addons/rose/addon/styles/rose/components/form/_input.scss
@@ -30,6 +30,10 @@
border-radius: sizing.rems(xxxs);
box-shadow: inset 0px 3px 1px rgba(var(--stark-components), var(--opacity-4));
+ &::placeholder {
+ color: var(--ui-gray-subtler-1);
+ }
+
&.error {
color: var(--failure);
border-color: currentColor;
diff --git a/ui/admin/app/components/form/host-set/aws/index.hbs b/ui/admin/app/components/form/host-set/aws/index.hbs
index 9f21b0097..79782093e 100644
--- a/ui/admin/app/components/form/host-set/aws/index.hbs
+++ b/ui/admin/app/components/form/host-set/aws/index.hbs
@@ -103,6 +103,7 @@
@value={{endpoint.value}}
@error={{@model.errors.preferred_endpoints}}
@contextual={{true}}
+ @placeholder='cidr:2001:4860:4860::8888/32'
as |field|
>
@@ -128,7 +129,11 @@
-
+
@@ -128,7 +129,11 @@
-
+