# Conditionally set an HTML attribute

> Learn how to conditionally set an HTML attribute like selected in Astro using object spread, so the attribute only appears when your condition is true.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2023-12-22 | Topics: [Astro](https://flaviocopes.com/tags/astro/), [HTML](https://flaviocopes.com/tags/html/) | Canonical: https://flaviocopes.com/conditionally-set-an-html-attribute/

I had to conditionally set an attribute while building the HTML of a page.

In particular I wanted to add the `selected` attribute to an option in a select based on the URL.

I couldn’t say `selected={true}`, where true is determined with [JavaScript](https://flaviocopes.com/javascript/), because the mere existence of `selected=` makes the browser consider the option as selected. So the end result is the last option is always selected by default.

Here’s what I ended up doing:

```javascript
<select>
	{teams.map((team) => {
	  const attributes = {
	    ...(Astro.url.pathname.includes('/team/') &&
	    Astro.params.id === team.id && { selected: 'selected' }),
	  }
	
	  return (
	    <option {...attributes} value={`/team/${team.id}`}>
	      {team.name}
	    </option>
	  )
	})}
</select>
```