diff --git a/app/assets/stylesheets/components/_error-message.scss b/app/assets/stylesheets/components/_error-message.scss
deleted file mode 100644
index ea7263917..000000000
--- a/app/assets/stylesheets/components/_error-message.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import "govuk_publishing_components/individual_component_support";
-@import "helpers/variables";
-
-.app-c-error-message {
- display: block;
- margin-bottom: govuk-spacing(3);
- clear: both;
- color: $govuk-error-colour;
- @include govuk-font(19, $weight: bold);
-}
diff --git a/app/assets/stylesheets/components/helpers/_variables.scss b/app/assets/stylesheets/components/helpers/_variables.scss
deleted file mode 100644
index 4933f358f..000000000
--- a/app/assets/stylesheets/components/helpers/_variables.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-$app-text-colour: $govuk-text-colour;
-$app-secondary-text-colour: govuk-colour("dark-grey", $legacy: "grey-1");
-
-// Border widths
-$app-border-width-mobile: 4px;
-$app-border-width-tablet: 5px;
-$app-border-width-form-element: 2px;
-
-// Focus
-$app-focus-width: 3px;
diff --git a/app/views/components/_error_message.html.erb b/app/views/components/_error_message.html.erb
deleted file mode 100644
index afa8b7614..000000000
--- a/app/views/components/_error_message.html.erb
+++ /dev/null
@@ -1,10 +0,0 @@
-<% add_app_component_stylesheet("error-message") %>
-<% id ||= false %>
-
- id="<%= id %>"
- <% end %>
->
- <%= text %>
-
diff --git a/app/views/components/docs/error_message.yml b/app/views/components/docs/error_message.yml
deleted file mode 100644
index 7b0bc9a58..000000000
--- a/app/views/components/docs/error_message.yml
+++ /dev/null
@@ -1,13 +0,0 @@
-name: Form error message
-description: Component to show a red error message - used for form validation. Use inside a label or legend.
-accessibility_criteria: |
- - have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
-examples:
- default:
- data:
- text: 'Descriptive error message'
- outside_label_or_legend:
- description: 'Used if the error message is not inside a label or legend, for example with `aria-describedby`'
- data:
- id: 'unique-error-id'
- text: 'Descriptive error message'
diff --git a/app/views/content_items/service_sign_in/_choose_sign_in.html.erb b/app/views/content_items/service_sign_in/_choose_sign_in.html.erb
index 1489f365e..b4148c85c 100644
--- a/app/views/content_items/service_sign_in/_choose_sign_in.html.erb
+++ b/app/views/content_items/service_sign_in/_choose_sign_in.html.erb
@@ -23,16 +23,19 @@
method: "post",
data: data_attrs) do %>
<% legend_text = render 'govuk_publishing_components/components/title', title: @content_item.title %>
+ <% description_text = render 'govuk_publishing_components/components/govspeak' do %>
+ <% raw(@content_item.description) %>
+ <% end %>
+
<%= render "govuk_publishing_components/components/fieldset", legend_text: legend_text do %>
- <%= render 'govuk_publishing_components/components/govspeak', {} do %>
- <%= raw(@content_item.description) %>
- <% end %>
- <% if @error %>
- <%= render "components/error_message", text: t('service_sign_in.error.option') %>
- <% end %>
- <%= render "govuk_publishing_components/components/radio", id_prefix: @content_item.options_id, name: "option", items: @content_item.options %>
+ <%= render "govuk_publishing_components/components/radio",
+ id_prefix: @content_item.options_id,
+ name: "option",
+ error_message: (t('service_sign_in.error.option') if @error),
+ description: description_text,
+ items: @content_item.options %>
<% end %>
diff --git a/config/initializers/dartsass.rb b/config/initializers/dartsass.rb
index 16ee521ff..8dfe080c6 100644
--- a/config/initializers/dartsass.rb
+++ b/config/initializers/dartsass.rb
@@ -4,7 +4,6 @@
"components/_banner.scss" => "components/_banner.css",
"components/_contents-list-with-body.scss" => "components/_contents-list-with-body.css",
"components/_download-link.scss" => "components/_download-link.css",
- "components/_error-message.scss" => "components/_error-message.css",
"components/_figure.scss" => "components/_figure.css",
"components/_important-metadata.scss" => "components/_important-metadata.css",
"components/_published-dates.scss" => "components/_published-dates.css",
diff --git a/test/components/error_message_test.rb b/test/components/error_message_test.rb
deleted file mode 100644
index 15704288e..000000000
--- a/test/components/error_message_test.rb
+++ /dev/null
@@ -1,23 +0,0 @@
-require "component_test_helper"
-
-class ErrorMessageTest < ComponentTestCase
- def component_name
- "error_message"
- end
-
- test "fails to render no data is given" do
- assert_raise do
- render_component({})
- end
- end
-
- test "renders an error message correctly" do
- render_component(text: "Descriptive error message")
- assert_select ".app-c-error-message", text: "Descriptive error message"
- end
-
- test "renders an error message with an id" do
- render_component(text: "Descriptive error message with id", id: "unique-error-id")
- assert_select ".app-c-error-message[id='unique-error-id']", text: "Descriptive error message with id"
- end
-end
diff --git a/test/integration/service_sign_in/choose_sign_in_test.rb b/test/integration/service_sign_in/choose_sign_in_test.rb
index c308f76f9..d92a3563a 100644
--- a/test/integration/service_sign_in/choose_sign_in_test.rb
+++ b/test/integration/service_sign_in/choose_sign_in_test.rb
@@ -61,7 +61,7 @@ class ChooseSignInTest < ActionDispatch::IntegrationTest
# Make sure the id is the same as the link href so that they'll link together properly.
assert page.has_css?(".gem-c-radio input[id='option-0'][value='use-government-gateway']", visible: false)
- assert page.has_css?(".app-c-error-message", text: "Please select an option")
+ assert page.has_css?(".gem-c-error-message", text: "Please select an option")
end
test "page less options without an or divider" do